ピクセルパーフェクトで線を1pxに整える技法

ピクセルパーフェクトは、ドット絵の現場では描画側の自動補正と表示側の整数倍レンダリングという、役割の異なる2つの意味で使われます。
32x32のキャラを描いたときにフリーハンドの曲線へダブルが連なって輪郭が濁る場面では、まず何が汚さの原因なのかを見極めることが出発点です。
ジャギー、ダブル、孤立ピクセルは見た目の乱れをほぼ説明しきれる語彙であり、1:0・1:1・1:2・2:1のパーフェクトラインや1-1-2-3-2-1-1のような段階を知っていれば、手作業でも線は理屈で整えられます。
描画モードの補正で1px線を保ちつつ、鋭角や交差点は詰め、最後は2x・3x・4xの整数倍表示とニアレストネイバーで鮮明さを届ける流れが、このテーマの核心です。

ピクセルパーフェクトとは何か：2つの意味を切り分ける

ピクセルパーフェクトは、ドット絵の文脈では描画モードと表示設定の二つを指します。
前者は1pxペンで引いた線をL字の角にできる中間ピクセルだけ消し、始点から終点まで1px幅に保つ仕組みです。
後者は2x・3x・4xの整数倍で、補間なしのまま画素を保って見せる状態を指します。

描画モードとしてのピクセルパーフェクト

描画側のピクセルパーフェクトは、線そのものを整えるためのアルゴリズムです。
フリーハンドで曲線を引くと、L字の角で中間ピクセルが入り、線が太ったりダブルになったりしますが、ピクセルパーフェクトモードは全ピクセルを走査してそこを外し、1px幅を保ちます。
制作を始めたばかりの頃、線をきれいにしたくて検索すると、この話とゲームエンジン側の表示設定が同じ語で混ざって出てきて、まずそこでつまずきやすいのです。

このモードが効くのは、ペンツールで描く輪郭を「手で引いたまま崩れない」状態に寄せたいからです。
ただし鋭角や交差点では自動処理だけで答えが決まらず、手作業のクリーンアップが必要になります。
ジャギー、ダブル、孤立ピクセルを減らしながら、傾きが1:0・1:1・1:2・2:1のようなパーフェクトラインに寄せると、線と曲線の見え方が安定します。
ラフに描いてからズームして詰め、各セグメントを角でだけ接続する流れが基本です。

表示・レンダリングとしてのピクセルパーフェクト

表示側のピクセルパーフェクトは、描いた絵をきれいに「届ける」ための条件です。
32x32のスプライトがエディタ上では鮮明でも、ゲーム画面でぼやけるなら、描画ではなく表示が崩れています。
2x・3x・4xの整数倍で、ニアレストネイバー補間のまま出力して初めて、1画素が均一な正方形のブロックとして保たれます。

ここで崩れると、色ブリードやエッジ歪みが起き、せっかくの輪郭がにじみます。
特に1.5倍のような非整数倍は、画素の幅が揃わず見た目が不安定です。
ゲーム実装ではテクスチャの補間設定に加え、Godotなら2D変形のピクセルスナップ、UnityならPixel Perfect Cameraのように、描画後の座標やカメラ側でも画素をそろえる発想が必要になります。
描画が合っているのに表示で崩れる、という切り分けがここで効いてきます。

なぜ混同されるのか・本記事の対象範囲

両者が混同されるのは、どちらも「1ドットの輪郭を曖昧にしない」という同じ価値観から生まれているからです。
検索で見つかる情報は、線を整える話と表示を整える話が隣り合って並びやすく、制作初期ほど見分けがつきにくいものです。
だが、描画モードは線の生成、表示設定は完成物の再現であり、役割は別です。

本記事では前半で描画側のモードの仕組み、手作業クリーンアップ、線と曲線の基準を扱い、後半で整数倍表示、ニアレストネイバー、ゲーム実装へ進みます。
描いてから届くまでを一気通貫で見ると、どこで鮮明さが失われたのかを追いやすくなります。
まずは「描いた段階の問題か、表示した段階の問題か」を分けて考えてみてください。

ジャギー・ダブル・孤立ピクセルの正体

ジャギー、ダブル、孤立ピクセルは、線が汚く見える原因を見分けるための基本語彙です。
どれも「なんとなく粗い」で片づけると直し方が曖昧になりますが、形の乱れ方を言葉にできるだけで、修正の手順はかなりはっきりします。
しかも、この3つは小サイズ表示やアニメーション中に目立ちやすく、静止画では気づきにくい欠点を後から表に出してくるのが厄介です。

ジャギー：線の流れを乱す段差

ジャギーは、滑らかに流れるはずの線や曲線の途中に入る不規則な段差です。
1pxだけ飛び出した部分があったり、段差の長さがそろっていなかったりすると、線全体がトゲトゲしく見え、丸みや勢いまで失われます。
特に曲線では、どこか1か所が乱れるだけで周囲のバランスまで崩れやすく、作品全体の印象を硬くしてしまいます。

実作業では、フリーハンドで大きく描いた直後よりも、ズームして初めてジャギーの量感が見えてきます。
パーフェクトラインで整えるときは、直線なら各段のピクセル数をそろえ、曲線なら頂点付近を小刻みに、直線寄りを大きめに切り替えると流れが戻ります。
描画側のピクセルパーフェクトは、まさにこのL字状の中間ピクセルを拾って線幅を保つ考え方で、1px幅を崩しやすい箇所を先に減らすための土台になるでしょう。

ダブル：隣接2マスの重複ピクセル

ダブルは、ペンが隣接する2マスを同時に通過したときに生じる重複ピクセルです。
本来は1px幅で通したい線が部分的に2pxへ膨らみ、輪郭が太く不均一に見えます。
フリーハンドで輪郭線を一気に描いたあとにズームすると、カーブの内側に連続したダブルが並び、線が二重に膨らんで見えることがあります。
あの「描いた直後は気持ちよかったのに、拡大したら急に重たい」という感覚の正体がこれです。

ダブルが厄介なのは、静止した見た目では許容できるように見えても、小サイズ表示では太り方が強調され、アニメーションのコマ送りでは線の揺れとして露出するからです。
輪郭が1pxで統一されていれば形の読み取りは速いのに、2pxの膨らみが混じるだけで視線が止まり、シルエットの美しさが損なわれます。
表示側のピクセルパーフェクトで整数倍表示やニアレストネイバー補間が重要になるのも、こうしたにじみや見た目の崩れを増やさないためです。

孤立ピクセル・はぐれドットの見つけ方

孤立ピクセルは、線や面から離れて1つだけ取り残されたピクセルです。
消し忘れや塗りはみ出しで生じやすく、拡大するとすぐ見つかるのに、エディタの作業ズームでは背景に紛れて見落としがちです。
完成したと思ってゲームに入れ、動かしてみた瞬間に、止まっているときは気づかなかったはぐれドットがチラついて見えた、という経験は制作で何度も起こります。
静止画では点としてしか見えないものが、アニメーションになると「余計な光り方」に変わるからです。

ここで役に立つのが、3つを別々に呼べる語彙です。
「なんとなく汚い」では、直す箇所が広すぎます。
ところが「ここがダブル」「ここがジャギー」と言えれば、線の太りを削るのか、段差をそろえるのか、浮いた1点を消すのかがすぐ分かります。
語彙がそのまま作業指示になるので、後半のクリーンアップ手順も迷わず効くようになります。

ピクセルパーフェクト描画モードの仕組みと使い方

ピクセルパーフェクト描画モードは、線を構成するピクセル列を走査し、L字（カギ型）に折れ曲がる部分の中間ピクセルを取り除いて、1px幅の連続した線に整える仕組みです。
フリーハンドでカーブを引くときにダブルや重なりが出やすいのは、描画中の軌跡が一度交差するだけで線幅の見た目が崩れるからで、ここを自動で間引ける点がこのモードの価値だと言えるでしょう。
実際、オフのまま曲線を描くとダブルだらけになった線が、オンにして同じカーブを引き直すと一発で1px線に収まり、描きながら整っていく感覚がはっきり分かります。

L字の中間ピクセルを除去する処理

処理の中心は、全ピクセルを順に見ていき、L字状の一部だと判定されたピクセルを除外する単純なループです。
難しい補間や後処理に頼るのではなく、折れ曲がりの途中にある1点を落とすだけなので、計算の重さが増えにくく、描画の手応えも軽いまま保てます。
だからこそ、フリーハンドの線を引いている最中でもリアルタイムに見た目が整い、描き手は「いまの線で十分か」をその場で判断しやすくなります。

この挙動が効くのは、曲線を描くときの微妙なガタつきを、目で追える程度のタイミングで消してくれるからです。
1本の線の中に余分な折れや重なりが残ると、ドット絵では輪郭がにごって見えやすいのですが、ピクセルパーフェクトはそのにごりを先回りして抑えます。
ピクセル単位で整列した線を作りたい場面では、最初からこのモードで引いてしまうほうが、後から描き直す回数を減らせます。

Aseprite での有効化手順

Aseprite では、ペンツールを選んだ状態で、上部のコンテキストバーにある「ピクセルパーフェクト」のチェックを入れると有効になります。
ショートカットは B なので、素早く切り替えたいときも操作は単純です。
チェックがオンの間は、描画中に生じたダブルや重なりが自動で間引かれるため、線を引くことそのものに集中しやすくなります。

使いどころとして分かりやすいのは、輪郭線や髪の流れのように、細い線が少しでも太ると印象が変わる場面です。
オンとオフを切り替えながら同じカーブを引き直すと、修正量の差がその場で見えるので、どの程度までモードに任せられるかも掴みやすいでしょう。
おすすめです。

自動では直らないケース

ただし、ピクセルパーフェクトは万能ではありません。
鋭角の頂点や線同士が交差する箇所では、どのピクセルを残すかが一意に決まらず、意図と違う除去が起きることがあります。
髪の毛の鋭く尖った先端を描いたときに頂点の1pxが消えて丸まってしまい、結局そこだけ手で打ち直した、という場面はまさにその例です。

こうした箇所では、自動処理に期待しすぎず、次のクリーンアップ工程で手作業で詰める前提にしておくのが現実的です。
線の大部分はモードに任せ、残る数カ所だけ自分で整える。
おすすめはその分担で、曲線の気持ちよさを保ちながら、形の決めどころだけは人の目で押さえることです。

パーフェクトラインと曲線のセグメント進行

パーフェクトラインは、1:0・1:1・1:2・2:1・0:1のような単純な比で構成された線です。
段差の並びが規則的だと視線が途中で引っかからず、線の流れをそのまま追いやすくなります。
ドット絵では、この単純さが見た目の安定感を生む基準になります。

パーフェクトラインの比率

目で追いやすい線には、1:0・1:1・1:2・2:1・0:1といった素直な比率があります。
こうした比は段差の出方がそろいやすく、斜め線や曲線の輪郭でも破綻が目立ちにくいのです。
比が複雑になるほど段の並びに不自然さが混ざり、どこかで視線が止まりやすくなります。

この基準を持っておくと、線を感覚だけで整えなくて済みます。
どの比率が入っているかを見れば、線がなぜ不安定に見えるのかを切り分けやすくなるからです。
パーフェクトラインは、修正の指針そのものだと言えるでしょう。

直線：各段の長さを揃える

直線をきれいに見せるコツは、各段のピクセル数をそろえることです。
横に1px・1px・1px・1pxと同じ長さで刻めば、段差は均質に並び、線のテンポが崩れません。
逆に1px・2px・1px・1pxのように1か所だけ長さが違うと、その部分がジャギーとして浮き、直線全体の印象まで乱れます。

実際、なだらかなカーブのつもりで描いていても、1か所だけ段の長さが違うと、そこにだけ視線が引っかかります。
隣の段と長さをそろえ直すだけで急に線が締まり、輪郭に落ち着きが出るのはよくあることです。
直線の処理は地味ですが、ここを詰めると全体の精度が一段上がります。
細部の不揃いは、思った以上に目立つのです。

曲線：セグメントを段階的に増減させる

曲線は、セグメントの長さを段階的に増減させるのが鉄則です。
1-1-2-3-2-1-1のように山なりに変化させると、弧の流れが自然につながり、丸みが無理なく立ち上がります。
3,2,1,4のように不規則な進行が混ざると、曲線は途中でつまずいたように見え、形が歪みやすくなります。

円形のオブジェクトを描くときも、この配分が効きます。
頂点付近は1-1-1のように小刻みに刻み、側面に近づくほど3-4-5のように大きく取ると、いびつだった円が一気に丸く見えることがあります。
右角、つまりカクッと90度に折れる箇所は曲線の中では避けましょう。
そこが入ると弧の連続性が切れ、滑らかさが失われます。
セグメントの増減は、円弧の説得力を決める配分なのです。

手作業でのクリーンアップ手順

まず大まかな線を描いてからズームし、余分なエッジやはみ出しを削っていくのが手早いです。
いきなり1px単位で追い込もうとすると手が止まりやすいですが、ラフに形を取ってから整えるほうが、迷いが少なく線の流れも自然になります。
実際、アウトラインを描き終えて満足していても、200%や400%まで拡大すると隠れていた乱れが見えてきます。
そこで少しずつ削っていくと、線が締まり、見た目の密度も安定していくでしょう。

ラフ描き→ズームして整える流れ

最初は完成形を狙いすぎず、勢いを優先してラフに描きます。
ここで大事なのは、線の細部を詰めることではなく、全体の輪郭とリズムを先に決めることです。
ズームしてからの修正は、形を壊さずに余計なピクセルだけを外していく作業になるため、初期段階で迷い込むより結果的に速く進みます。
線を描き終えたあとに全体を眺めると、まだ荒く見えても、それが後の整形の土台になるのです。

ダブル・はぐれピクセルの除去

拡大して確認すると、線が途中で2pxに膨らんでいる箇所、つまりダブルが見つかります。
こうした部分は、曲線の内側にある隣接ピクセルを1つ消すだけで1px幅に戻せることが多く、削る方向を見誤らないのがコツです。
あわせて、線や面から離れて取り残された孤立ピクセルも探して消します。
塗りのはみ出しや消し忘れが原因になりやすく、これを放置すると輪郭のノイズが残ったままになるからです。
ズームを上げるたびに細かな乱れが見えてきて、消すほどに線が引き締まっていく感覚があります。

アンチエイリアスを足す前の下地づくり

クリーンアップの目的は、最終的にすべての線を1px幅に落とし込み、各セグメントが角でのみ接続する状態にそろえることです。
ここが整っていないままアンチエイリアスを足すと、中間色がダブルやジャギーを巻き込んでしまい、輪郭がぼやけます。
実際、ジャギーを残したまま処理してしまい、かえって濁った経験があると、順序の意味がよく分かります。
だからこそ、まず下地を1pxに整え、そのあとで段差をなじませる工程に進みましょう。
アンチエイリアスは仕上げであり、下地の代わりではありません。

表示側のピクセルパーフェクト：整数倍とニアレストネイバー

ドット絵をきれいに見せるには、制作時の1px設計だけでなく、表示側でどう拡大するかまでそろえる必要があります。
整数倍で見せ、補間にはニアレストネイバーを選ぶ。
この2点を外すと、輪郭の鋭さや色面の切れ味が簡単に崩れてしまいます。

整数倍スケーリングの原則

ドット絵は2x・3x・4xといった整数倍で拡大すると、1画素が同じ大きさの正方形として並び、作った形をそのまま大きく見せられます。
等倍では小さすぎて埋もれる32x32の絵でも、4xにすれば画面上で存在感が出て、線の太さや顔の表情まで読み取りやすくなるのです。
完成した32x32を等倍でSNSに上げたときは小さくて目に止まりにくかったのに、4xで上げ直したら印象が一気に変わった、という体験が示す通り、倍率は見た目の伝わり方を左右します。
整数倍が強いのは、各画素の境界がずれないからです。
中途半端な拡大ではなく、2の倍数、3の倍数、4の倍数にそろえることが、描いた情報を守るいちばん単純で確実な方法でしょう。

ニアレストネイバー補間とは

拡大時の補間方法はニアレストネイバーを選びます。
これは新しい画素位置に対して、元画像の最も近い1画素の色をそのままコピーする方式で、周辺の色を平均化したり混ぜたりしません。
だからこそ、境界線の黒は黒のまま、肌色は肌色のまま残り、ドット絵特有のくっきりした面分けが保たれます。
この方式は、ピクセルアートの「1画素を意図して置いた」という情報を壊さない点に価値があります。
ぼかし系の補間だと、輪郭の端に中間色が発生して、せっかくの手触りが失われます。
ニアレストネイバーは地味ですが、ドット絵にとっては最も誠実な表示方法です。

非整数倍が引き起こすにじみ

問題になるのは1.5倍のような非整数倍です。
1画素を1.5画素に割り当てることはできないため、ある部分は2画素分に、別の部分は1画素分に見え、画素サイズが不均一になります。
その結果、ぼかし、色ブリード、エッジの歪みが起き、1pxに整えた線が2pxに膨らんだように見えることさえあります。
うっかり1.5倍で書き出してしまい、にじみで線が太って見えたものを整数倍に直したら鮮明さが戻った、という失敗は、その差をいちばんはっきり教えてくれます。
Webやアプリで表示するときも考え方は同じです。
画像を整数倍で配置し、CSSなら image-rendering: pixelated のようなニアレストネイバー相当の指定を使えば、ブラウザ側の自動ぼかしを抑えられます。
書き出し時の拡大設定まで整数倍にそろえておくと、制作画面と公開画面の印象が揃い、ドット絵らしい硬質さを保ちやすくなります。

ゲーム実装でのピクセルパーフェクト

ゲームエンジンでドット絵を鮮明に見せるには、まず画像そのものをぼかさない設定に切り替え、そのうえで座標の扱いをピクセル単位にそろえる必要があります。
テクスチャのフィルタをニアレストネイバーにし、カメラや2D変形のスナップを合わせていくと、エディタ上の見た目と実機の描画差が一気に減ります。
ただし、鮮明さを優先すると今度は動きの滑らかさが揺れやすくなります。
特にサブピクセルジッターは、物理更新と描画更新のズレが見える形で出るため、設定を一つずつ詰めながら落としどころを探す作業になるでしょう。

テクスチャをニアレストネイバーに設定する

Unityにスプライトを入れた直後、輪郭が少しにじんで見えることがあります。
原因は、エンジン側が拡大縮小のときに滑らかさを優先してリニア補間をかけるからです。
ドット絵ではその滑らかさが逆にノイズになり、1px単位で描いた線が中間色の帯に変わってしまいます。
実際、テクスチャ設定をPoint（no filter）に変えた瞬間、エディタ上で見えていた鮮明さがそのまま戻る場面は少なくありません。
まずはここを押さえるのが出発点です。

ニアレストネイバーは、近い画素をそのまま採用するため、ドットの角を崩しません。
Asepriteで整えた輪郭や、16×16の顔パーツのような細部は、補間が入るだけで印象が大きく変わるからです。
GodotでもUnityでも、画面上で「ぼやけて見える」の多くは素材の劣化ではなく、表示側のフィルタ設定に起因します。
素材をそのまま見せたいなら、まず画素を守る設定に切り替えましょう。

ピクセルパーフェクトカメラとスナップ

Godotでは Project Settings→Rendering→2D→Snap の「Snap 2D Transforms to Pixel」で、2D変形をピクセル単位にそろえられます。
Unityでは Pixel Perfect Camera コンポーネントで Pixels Per Unit と Zoom Level を指定し、描画の基準を明確にできます。
どちらも目的は同じで、カメラやオブジェクトが半端な座標に乗らないようにして、1pxのズレを発生させないことです。

この設定が効くのは、見た目の鮮明さが「描画の計算誤差」に直結するからです。
たとえばキャラだけでなく、背景タイルやUIアイコンまで同じ基準でスナップできると、画面全体の輪郭が安定します。
ピクセルパーフェクトカメラは見栄えのための飾りではなく、ドット絵をドット絵のまま維持するための土台だと考えるとわかりやすいでしょう。
まずはここを合わせてみてください。

サブピクセルジッターとその対処

サブピクセルジッターは、キャラやカメラがピクセル境界をまたぐたびに起きる微妙な震えです。
物理が60tick/秒で進んでいても、高リフレッシュレートの画面では描画がその更新を待たずに何度も走るため、位置が中途半端なまま見えてしまいます。
その結果、鮮明なはずのスプライトが動いた瞬間だけ1px単位でチラつくのです。

現場では、キャラはくっきりしているのに歩かせると震える、という悩みがいちばん厄介でした。
ピクセルスナップを強めれば止まった画面は安定しますが、カメラが硬くなり、追従がぎこちなく見えます。
そこで、グリッドスナップ、カメラ平滑化、移動計算、当たり判定を少しずつ調整し、まず鮮明さを優先したうえで、必要ならサブピクセルカメラを足す順番で詰めていくのが現実的です。
動きを滑らかにしたいなら、スナップだけで解決しようとせず、両立のための調整を重ねましょう。