無料ドット絵エディタ — ドット絵を1ピクセルずつ描く

ドット絵のサイズは慣習で決まっていて、その慣習は理由があって残っています。16×16はタイルやスプライトの定番サイズで、ファミコンのキャラクター、マインクラフトのアイテムアイコン、ファビコンがそうです。32×32ならキャラクターに顔とポーズを与えられます。64×64はポートレートや描き込んだ敵キャラ、100×100になると一枚のシーンです。絵の用途に合ったサイズを選んでください。64×64で描いたスプライトを16×16に縮めるとぐちゃぐちゃに潰れますし、16×16のアイコンを拡大しても、大きくなった16×16のアイコンでしかありません。

描き始める前に決め切ること。後からリサイズしてもピクセルは残りますが、構図は残りません。32×32のフレームいっぱいに描いたキャラクターは、64×64にすると隅の小さな人物になってしまいます。タイルセット、アイコンパック、パーティのキャラクター一式など、セットで描くなら全体でひとつのキャンバスサイズを決め、全部そのサイズで描きましょう。ゲーム内でもページ上でも同じ縮尺で並びます。

256色パレットはメニューであって、目標ではありません。完成したスプライトの多くは8〜16色で、それを「ランプ」— ひとつの素材を影からハイライトまで3〜5段階に並べたもの — として構成しています。良いドット絵と平板なドット絵を分けるのは、ランプが単に明るくなるだけでなく色相をずらしていることです。影は青や紫に、ハイライトは黄やオレンジに寄せる。だから赤いシャツの影は冷たい深紅に、ハイライトは暖かいコーラルになり、ただピンクっぽい赤にはなりません。

まずランプを作り、それから描くこと。素材ごとに中間色を決め、明度だけでなく色相もずれた影とハイライトを選び、ひとつのランプを複数の素材で使い回せないか試しましょう。同じ3色のグレーが鎧にも石にも雲にもなります。スプライトの中の2色がズームしないと見分けられないほど近いなら、どちらかはその席に見合う仕事をしていません。

ドット絵の斜め線は階段で、段が規則的なときだけ目は階段をなめらかな線として読みます。45°の線は1段1ピクセル。もっと浅い線は2、3、4ピクセルの連なりになり、その連なりの長さは全部同じでなければ線が曲がって見えます。定番のミスは、2本の線が交わる角にピクセルが二重に残ること。それを消せば角がシャープになります。ペンは1ピクセル幅で描き、こまめにズームアウトしてください。8倍では隠れているギザギザが等倍では見えてきます。

ディザリング — 2色の市松模様 — は、限られたパレットで3つ目の色やグラデーションを擬似的に作るドット絵の技法です。ランプの2段階の間を50%の市松で埋めればその中間の段階に見え、もっとまばらなパターンならより柔らかな移り変わりに見えます。空や広い面の影、金属には使い、小さなスプライトには使わないこと。16×16では市松はただのノイズにしか見えません。

絵は実寸か、その整数倍で見られるものであって、描いているときのズーム倍率で見られることは決してありません。数分おきにグリッドをオフにしてキャンバス全体を眺める、できれば目を細めて見てください。ディテールがぼやけてもポーズや物や文字がまだ読めるなら、シルエットは正しい。読めないなら、どれだけ陰影を足しても救えません。先に輪郭を直しましょう。

塗り色を暗くした色（黒ではなく）の1ピクセルの輪郭線があると、どんな背景の上でもスプライトが読めます。真っ黒な輪郭は明るい背景では効きますが、暗い背景では消えてしまいます。光から遠ざかる側は暗く、光に向く側は明るくする「選択的な輪郭線」は現代のドット絵の多くが使う技法で、ランプを先に作ってあればペンツールで正しい階調をクリックするだけです。

PNG出力はキャンバスの1マスを画像の1ピクセルとして、スムージングなしに書き出します。ゲームエンジンが求めているのはまさにこれです。それでもぼやけるとしたら、その次の工程、つまり拡大縮小です。ドット絵の拡大は必ず整数倍 — 2倍、3倍、4倍 — で、補間はニアレストネイバー（最近傍）にしてください。Unityならテクスチャの Filter Mode を Point、Compression を None に。Godotならテクスチャフィルタを Nearest に。ブラウザなら image-rendering: pixelated です。150%の拡大やバイリニアのリサンプルは、描いた縁をひとつ残らず柔らかくしてしまいます。

空のままのマスは透明として書き出されるので、スプライトに背景色はまったく要りません。ゲームではなくWebページや文書に載せるなら、キャンバスサイズのまま書き出してページ側に拡大させるか、印刷用に一度だけ4倍で書き出しましょう。写真編集ソフトのデフォルト設定でPNGをリサイズするのは絶対に避けてください。