ドット絵アニメーション・スプライト作成ツール

スプライトのキャンバスは、あとで縮小する絵ではありません。選んだサイズが、プレイヤーが見る解像度そのものです。16×16ではキャラクターはシルエットと2ドットの目になるので、アイテムやアイコン、小さな主人公に向いています。32×32なら顔や手の形、陰影の段階を入れる余裕があります。64×64になるとイラストに近く、アニメーションの1コマごとに32×32の4倍のドットを描くことになります。

サイズは描き込みたい細かさではなく、ゲームのほかのスプライトに合わせて決めましょう。16ドットのグリッドのタイルセットなら、キャラクターは高さ16か32ドットが合います。スプライトを大きくする必要が出たときは、サイズ設定で絵を好きな辺や角に寄せたまま広げられ、すべてのコマが同じように変わるので、アニメーションがずれません。

よくできたスプライトの多くは4〜16色です。色が少ないと、1色ごとに役割が決まります。輪郭、ベース、1〜2段の影、ハイライト。ベースの色を決めたら、横の「暗く」「明るく」ボタンで色の段階（カラーランプ）を作りましょう。影はわずかに青寄りに、ハイライトは黄色寄りに色相をずらすと、灰色ではなく光として見えます。

輪郭線は、どんな背景に置いてもスプライトを背景から切り離してくれます。小さなスプライトなら濃い色でぐるりと囲むのがいちばん確実です。大きなものは、囲む部分の色に合わせた輪郭（セレクティブアウトライン）にすると柔らかく見えます。すべての形をふちから内側へ向けて陰影をつける「ピロー（枕）シェーディング」は、形を平たく見せるので避けましょう。光は片側から当たり、影は反対側に落ちます。

ゲームのアニメーションの大半は短いループです。待機中の呼吸や揺れなら2〜4コマを4〜6fpsで。歩きのループはたいてい4〜8コマを8〜12fpsで作ります。足が地面につく2つの接地ポーズと、そのあいだの通過ポーズです。攻撃やダメージは、ゆっくりした予備動作のコマ、ごく速い1〜2コマの動作、そのあとで止めたポーズの順にすると伝わりやすくなります。

まず要になるポーズ（キーポーズ）を描き、それからあいだを埋めていきます。そのための機能が「コマを複製」です。いまのコマをコピーして動くドットだけを変えれば、体がコマごとにぶれることがありません。オニオンスキンをオンにすると前のコマが空いたドットの下にうっすら見えるので、腕を描き直さずに1〜2ドットずらすだけで済みます。ポーズを長く止めたいときは、そのコマを複製します。GIFではどのコマも同じ時間だけ表示されるからです。

プレビューは、ゲームで使う速さで確かめましょう。スローでなめらかに見えた動きが、実際の速さではガタついて見えることはよくあります。直し方はほとんどの場合、コマを増やすことではなく、コマ間で変わるドットを減らすことです。

スプライトシートは、アニメーションのすべてのコマを1枚の画像に並べたものです。このツールが書き出すシートにはコマの間に余白もすき間もないので、どのエンジンでもコマのサイズだけで切り分けられます。8コマの32×32のスプライトなら、256×32の横一列、または最後の1マスが空いた3×3のグリッドで書き出されます。

エンジンには1倍で書き出し、拡大はエンジン側で行いましょう。Godotではテクスチャのフィルターを Nearest にするとドットがくっきり保たれます。Unityでは Filter Mode を Point (no filter) にし、圧縮をオフにして、Pixels Per Unit をスプライトのサイズに合わせます。GameMakerでは横一列の画像を読み込み、コマ数を指定します。透明なドットは透明のまま読み込まれるので、スプライトをどんな背景にも置けます。

32×32のGIFを原寸のまま置くとサムネイルより小さく、たいていのサイトは小さな画像を拡大するときにぼかしてしまいます。代わりに4倍か8倍で書き出しましょう。1ドットが4×4や8×8の同じ色のブロックになり、GIFはこうした同じ色の並びをとてもよく圧縮するので、ファイルは小さいままです。

GIFの透明は1色を「表示しない」に切り替えたものなので、チャットアプリやSNSによっては黒や白で表示されます。背景を選べない場所に投稿するなら、白背景で書き出しましょう。