2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Affinityでピクセル単位の描画をするには

Last updated at Posted at 2025-11-03

意識しないと中途半端な座標でも描画できるので注意

Affinityは元々Affinity Photoの時代でもベクターデータを気軽に扱えるようなアプリだったが、だからこそ特にピクセルスタジオで線や図形などの描画を行う時は注意が必要となる。

まずは「ビデオおよびウェブ」の中から画像用のプリセット(例えばHD 720p)を選んで新規作成をし、ピクセルスタジオでデフォルトのまま長方形ツールで適当に長方形を書いてみる。
すると…
affinity_pixelsnap1.png
このように、整数ピクセル単位でなく半端な座標で描画してしまう。

手直しをせずに書き出しをすれば、境界となったピクセルはアンチエイリアス等の階調処理がかかってしまう。

「ピクセルへの整列を強制」で解決

これを解消するため、ツールバーの右の方にある磁石アイコン(スナップ)の右側、[v]を押して、スナップ設定を開く。
affinity_pixelsnap2.png

Affinityには多種多様なスナップが用意されており、個別にオン・オフが可能だ。
affinity_pixelsnap3.png
このうち、赤丸で囲った「ピクセルへの整列を強制」にチェックを入れると、描画時に必ず座標が整数値となる。その下の「ピクセル単位へ移動」も必要に応じてチェックするとよい。
追記:「ピクセル単位へ移動」はチェックを入れない方がよい。エクスプローラー等から画像をドラッグ・アンド・ドロップで貼り付けた場合、中途半端な座標に貼り付いてしまうことがあるが、このとき「ピクセル単位へ移動」にチェックが入っていなければ、移動させた時に自動的に整数値となる。逆に「ピクセル単位へ移動」にチェックが入っていた場合、端数が維持されてしまう)

「ピクセルへの整列を強制」にチェックが入ったプリセットとして「UIデザイン」や「ピクセルワーク」が用意されているので、これらのプリセットを選んでもよい。
affinity_pixelsnap4.png

奇数ドットの輪郭線はストローク設定の整列で

ただし、この設定でも中途半端な描画となってしまうことがある。
例えば長方形に1px(※)の輪郭線を描こうとすると、座標値を中心に線を描こうとするため、薄い2pxの線となってしまう。
(※)ドキュメント設定が72DPI以外の場合、1ptを選ぶのではなく、1pxと打ち込んで指定する
affinity_pixelsnap5.png

輪郭線であれば、ストローク設定によりこれを回避できる。
ストローク設定はツールバーだと線の太さの右側のアイコンになる。
affinity_pixelsnap6.png

ダイアログのうち、整列の部分で境界線の位置を中央、内側、外側から選ぶことができる(デフォルトは境界線を中央に揃える)。
affinity_pixelsnap7.png

境界線を内側に揃える(真ん中のアイコン)
affinity_pixelsnap8.png

境界線を外側に揃える(右側のアイコン)
affinity_pixelsnap9.png

キャプチャ画像のドット感を活かした拡大

最後はすでにドットで表現されている画像の拡大について。
たとえば関数電卓のエミュレータで動作画面をキャプチャした場合、194px×73pxといったような小さな画像となることがある。
(以下にその画像を載せるが、ブラウザやOSの画面設定によっては勝手に拡大されるようだ。その場合はいったん保存して画像ビューア等で確認してほしい)
affinity_pixelsnap10.png

こうした画像を見やすくするため、適宜画像加工ソフトで拡大することになるのだが、画像拡大の補完として通常用いられる「バイリニア」を適用すると、ドット表現まで適度に補完され、ぼやっとした印象となってしまう。
affinity_pixelsnap11.png

ドット表現を活かした拡大をするには、「ニアレストネイバー」を使うとよい。
Affinityのエクスポート画面ではリサンプルのプルダウンから指定する。
プレビューの段階でぼやっとした印象が無いことを確認できる。
affinity_pixelsnap12.png

実際に、ドットがくっきりとした画像を書き出すことができた。
affinity_pixelsnap13.png

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?