24×24ピクセルの制限内で視認性の高い動物スプライトを作成する方法
24×24ピクセルで動物を判別しやすくするには、その動物を特徴づける要素を見極め、シルエット内でその要素に十分なスペースを与え、意図した表示サイズでも視認できるディテールのみを追加します。まずは単純な形状から始め、内部の色やディテールを省いてテストし、少数のコントラストのある色のグループを追加して、実際の背景に対してスプライトを確認します。24×24のキャンバスには576ピクセルしかないため、すべてのドットが限られたスペースを奪い合うことになります。
1つのアングルと1つの特徴的な要素を決める
描き始める前に、横向き、正面、斜め（クォータービュー）などのアングルを決めます。初めてスプライトを作成する場合は、横向きにすると尻尾、耳、くちばし、鼻筋などを胴体から視覚的に分離しやすくなります。これは絶対的なルールではなく、実用的なデザイン上の選択肢です。見る人に気づかせたい特徴を最も強調できる角度を選びましょう。
主要な判別要素を1つ、そして多くても1つの補助的な特徴を書き出します。例えば、猫なら尖った耳と尻尾、鳥ならくちばしとコンパクトな胴体、カメなら甲羅の形状といった具合です。この制限は便利な作業上の制約であり、決められた基準ではありません。動物の特徴が明確になる前に、汎用的なテクスチャにピクセルを費やしてしまうのを防ぐのに役立ちます。
ピクセルを置く前にキャンバスの計画を立てる
24×24のキャンバスを開き、描画中はピクセルグリッドを表示しておきます。Asepriteなどのスプライトエディタではドキュメントがピクセル単位の画像として扱われ、そのドキュメントではインデックスカラーはパレットエントリを参照するピクセルとして説明されています。グリッドを表示しておくと、各パーツが何行・何列を占めているかを判断しやすくなります。Asepriteのスプライトに関するドキュメントおよびカラーモードガイド
特に耳、角、尻尾などが途切れてしまいそうな端の部分には、少し余白を残しておきましょう。次に、胴体、頭、そして特徴的な突起など、最も大きな塊を配置します。初期の目安の割り当てとしては、胴体と頭を合わせて約15×10ピクセル確保し、残りのエリアに尻尾、脚、耳を収めるとよいでしょう。この数値は固定のテンプレートではありません。細長い動物、丸い動物、正面を向いた動物ではそれぞれ異なるプロポーションが必要になります。
まずシルエットを描いてテストする
コントラストのある背景に対し、1色だけを使って動物を単一のベタ塗りの形状として塗りつぶします。目、模様、陰影は無視してください。この段階で、対象の動物が単なる曖昧な塊と区別できるかどうかを確認します。区別がつかない場合は、口元を伸ばす、耳の間隔を空ける、背中のカーブを変える、尻尾に明確な方向性を持たせるなど、輪郭を修正します。
狭い隙間に注意してください。1ピクセルの隙間でも耳と頭、あるいは脚とお腹を分けるには十分な場合がありますが、スプライトを小さく表示したり、ごちゃごちゃした背景の上に置いたりすると消えてしまうことがあります。2つのパーツが一体化してしまう場合は、輪郭色を追加する前に、角度やシルエットを変更してみてください。Lospecの入門ガイドではピクセル単位のコントロールを重視し、スプライト制作のチュートリアルを勧めています。ここで実用上意味するのは、自動のアンチエイリアスに頼るのではなく、1ピクセルごとの選択を見極めるということです。Lospec, “Pixel Art: Where to Start”
特徴を決定づける要素を追加する
シルエットが認識できるようになったら、顔と特徴的なパーツを配置します。極小のスプライトでは、暗い色の1ピクセルの目だけでも十分な場合があります。口元、くちばし、角、甲羅の縁などは、細かく描き込むよりも、形や色をわずかに変えるだけで表現できることがよくあります。顔のパーツが輪郭に触れると頭の形が読み取りにくくなる場合は、輪郭から離して配置しましょう。
手軽な削除テストを行ってみてください。小さなドットを一時的に非表示にしてみます。それを消しても動物の判別しやすさやポーズの明確さが損なわれない場合は、除外したままにします。これは編集上の経験則であり、普遍的な芸術の法則ではありません。最も重要な特徴のためのスペースを確保するのに役立ちます。
効果的なコントラストを持つコンパクトなパレットを選ぶ
まずは少数の役割から始めます。透明な背景、胴体のベースカラー、境界線や影のための暗いトーン、そして1か所のハイライト用の明るいトーンです。アクセントカラーは、動物を識別するのに役立つ場合にのみ追加します。24×24スプライトに必要な色数の決まりはありません。色の役割を少なくすることで、色が形をわかりやすくしているのか、単にノイズを増やしているだけなのかを判断しやすくなります。
色相だけでなく明度も確認してください。色相が異なっていても明度が近いと、小さいサイズでは境界が判別しにくくなります。一時的にスプライトをグレースケールで表示したり、無地のニュートラルグレーの背景に切り替えたりして、胴体、顔、主要な特徴がきちんと分離して見えるか確認します。Pinnguaqのスプライト制作チュートリアルでも同様に、さまざまな背景での色のコントラストと視認性を評価することを推奨しています（作例のキャンバスは24×24より大きいですが）。Pinnguaq, “Pixel Power: Sprite Creation”
Asepriteでは、RGBモードを使うと各ピクセルが独自の色を保持でき、インデックスモードを使うとピクセルがパレットエントリに関連付けられ、パレットを編集するとそのエントリを使用しているピクセルに反映されます。インデックスモードは少ないパレットの一貫性を保つのに役立ち、RGBモードは色を試行錯誤する際に便利です。今回の作業にはどちらを使用しても構いません。Asepriteのカラーモードガイド
形状を崩さずに陰影をつける
陰影は、シルエットと特徴的な要素がうまく機能した後にのみ追加します。影の面は形態を表現したり重なり合うパーツを分離したりするために使い、すべての面の輪郭をなぞるために使ってはいけません。散らばった単一ピクセルよりも、まとまった広い面の方が通常は読み取りやすくなります。ハイライトは控えめに配置してください。このサイズでは、複数の明るい点がテクスチャではなく不要なノイズに見えてしまうことがあります。
影をつけた境界のせいで脚、尻尾、耳が胴体に溶け込んでしまう場合は、その影を削除するか位置を移動してください。常にシルエットを判断基準とします。内側の色は輪郭を補強すべきであり、輪郭と競合してはいけません。
実際の表示サイズでスプライトを確認する
拡大表示はピクセルを配置するのに便利ですが、通常サイズで発生する問題が見えにくくなることがあります。拡大表示と、ゲームやインターフェース内で実際に表示されるサイズの両方でスプライトを確認してください。実寸サイズでは次の3点を確認します。何の動物かわかるか？ どちらを向いているかわかるか？ 想定される背景の上でもポーズがはっきりとわかるか？
また、複数のシーンで使用される可能性がある場合は、複数の無地背景でスプライトをテストしてください。暗い輪郭がある背景と同化してしまう場合は、輪郭を調整するか、わずかな境界色を追加します。拡大したときにしか何の動物かわからない場合は、ディテールを簡略化するか、アイデンティティを伝える特徴を大きくします。これらのチェックは実用的な診断方法であり、すべての鑑賞者がまったく同じように画像を解釈することを保証するものではありません。
修正の短い手順
修正は、シルエット、ポーズ、特徴的な要素、明度の分離、そして装飾の順序で進めます。変更が効果的だったかどうかを判断できるよう、問題は1つずつ修正してください。それでも動物が何かわかりにくい場合は、その動物の特徴を誇張した、よりシンプルな2つ目のドラフトと比較してみてください。実寸サイズでより明確に判別できる方を採用します。
完成したスプライトで、使用可能な576ピクセルすべてやパレット内の全色を使い切る必要はありません。動物の種類、向いている方向、最も重要な特徴が意図したサイズで認識でき、これ以上手を加えても視認性が向上しなくなった時点で完成とします。