解剖学の知識がなくてもできる、ドット絵の基本的な歩行サイクルの作り方
解剖学にまだ自信がない場合は、シンプルな塊と4つの再現可能なポーズを組み合わせたループとして歩行モーションを構築しましょう。まずは横向きのキャラクターから始め、脚と胴体を対照的な色で大まかに描き、8フレームのアニメーションを作成します。内訳は「接地（コンタクト）」「沈み込み（ダウン）」「通過（パッシング）」「伸び上がり（アップ）」の4ポーズと、反対側の脚を前に出した同様の4ポーズです。服や陰影、ディテールを描き込む前に、小さい表示サイズでループを確認してください。こうすることで、描き込みの完成度に惑わされず、分かりやすい動きを作ることに集中できます。
小さく固定したスタート地点を設定する
すでにあるキャラクターに合ったキャンバスを選びましょう。32×32ピクセルは、あるドット絵の歩行サイクルチュートリアルで使われている実用的な一例であり、必須のサイズというわけではありません。フレーム間でキャンバスサイズやキャラクター全体の幅・高さを一定に保ちます。足元には水平な地面のガイド線を引き、胴体の中心など安定したアンカー（基準点）を意識してください。これらのガイドがあると、意図しないズレに気づきやすくなります。
最初の工程では、頭を楕円やブロック、胴体を1つのコンパクトな形、各腕と脚を太い線や細長い形で表現します。手前と奥の手足が重なった際に見分けがつくよう、一時的に異なる色を使い分けましょう。これは作業用の図郭であり、正確なプロポーションを主張するものではありません。ドット絵アーティストのRaymond Schlitter氏は、大きめのスプライトを細部まで描き込む前に、色分けしたダミーを使って頭、首、胴体、腕、脚を区別する方法を紹介しています。SLYNYRD: “Pixelblog - 50 - Human Walk Cycle”
ディテールを描く前に4つのポーズを設計する
歩行サイクルに役立つフレームワークには、接地（コンタクト）、沈み込み（ダウン）、通過（パッシング）、伸び上がり（アップ）の4つのポーズがあります。まず片足の一歩分を描き、次に反対の脚を前にして同じパターンを繰り返します。接地では、前の足が前方に伸び、後ろの足が後方に伸びます。沈み込みでは、前足にキャラクターの体重が乗り、体が低くなります。通過では、後ろ足が前に抜ける際に脚が交差し、体が持ち上がります。伸び上がりでは、踏み出す脚が次の接地に向けて前に振られます。
8フレームのループにするには、「左足接地、沈み込み、通過、伸び上がり、右足接地、沈み込み、通過、伸び上がり」の順に絵を並べます。後半は前に出る脚が逆になります。画像をただ複製したものではなく、前半と対をなす動きに見えるようにしてください。ある詳細なドット絵の作例では、これらの重要な瞬間をラベル付けし、経済性と滑らかさのバランスをとる一つの方法として8フレームを採用しています。スプライトのスタイルによって適したフレーム数は異なります。SLYNYRD: “Pixelblog - 50 - Human Walk Cycle”
脚をシンプルな形で構築する
スプライトの実際の表示サイズで判別できる程度に脚を前後に開いて、最初の接地ポーズを描きます。足は地面のガイド線上に揃えてください。次のフレームでは、体重を支える脚をわずかに曲げ、胴体を少し低くします。通過のポーズでは、両足を近づけ、振られている足を体の下へと移動させます。伸び上がりのポーズでは、前へ動いている側の踵やつま先を持ち上げ、もう一方の脚で体を支えます。その後、反対側の接地を行い、同じシークエンスを続けます。
各手足は、腰から足先までがつながったひとつの形として扱いましょう。すべての骨をドットに対応させる必要はありません。脚の長さを大まかに一定に保ち、方向や輪郭の変化で膝の曲がりが分かるようにします。小さなスプライトでは、1〜2ドット動くだけの場合もあります。脚が判別できないひと塊になってしまう場合は、前後の開きを広げるか、手前と奥の一時的な色分けを使ってどちらが前を通っているかを明確にしてください。低解像度スプライトのチュートリアルでは、小さなキャラクターなら4フレームの歩行でも十分機能すること、また脚の明暗を交互に変えることで4フレームのサイクルでも左右どちらの脚が前にあるかを区別しやすくなることが示されています。Manning Leonard Krull: “Tutorial: Walking animation for low-res sprites”
胴体と腕の視認性を保つ
フレームが変わっても、胴体と頭はおおよそ同じ中心付近に位置するようにします。体は沈み込みのポーズ付近で低くなり、ステップの通過や伸び上がりのあたりで高くなるようにしますが、上下の揺れは控えめにしてください。小さなキャンバスでは、1ドットの変化でもかなり目立ちます。腕については、前に出ている脚と反対側の腕を振るようにしてみましょう。右脚が前なら左腕を前に出し、次の接地ではその組み合わせを逆にします。手足の先端は、四肢と区別がつく程度にシンプルな形にとどめておきます。
これらはテスト用のベース形状であり、万能の寸法ではありません。厚着のキャラクター、極小のスプライト、強くデフォルメされたデザインなどの場合は、手足の開きを小さくしたり、腕の振りを控えめにしたりする必要があるかもしれません。実践的なドット絵チュートリアルでも同様に、手足を簡略化し、奥側の手足のトーンを変えて奥行きを演出し、目指すキャラクタースタイルに合わせたプロポーションを選ぶことが推奨されています。Clip Studio Tips: “Tips and Configuration for Creating a Walking Cycle - PixelArt”
動きが機能してからドットのディテールを追加する
顔、服のシワ、ハイライト、アクセサリーなどを描き込む前に、大まかなループを再生してみてください。2つの接地ポーズに明確な変化があるか、胴体の下を通過する脚の動きが分かりやすいか、頭が横にブレずに揃っているかを確認します。スプライトがその場で足踏みしているように見えたり、蹴り出しているように見えたりする場合は、まず手足のラフな形状を調整してください。ディテールを描き込んでしまうと動きの問題が見えにくくなり、修正にも余計に時間がかかります。
シルエットが機能したら、キャラクター本来のカラーパレットに戻し、パーツを1つずつブラッシュアップしていきます。遠くの脚の前後関係だけを切り替えるなら、頭や胴体を動かさずにその脚の色や重なりだけを変更するなど、修正は局所的にとどめましょう。髪やゆったりした袖、小さなアクセサリーなどは体の動きに合わせてわずかに動かしてもよいですが、必須ではありません。Pinnguaqの4フレームのドット絵演習では、基本的なサイクルを確立した後に、髪や帽子の飾りといった軽いディテールに小さな動きを加える手順が紹介されています。Pinnguaq: “Pixel Art 4A: Animation Basics In GraphicsGale”
ループを確認し、タイミングを調整する
アニメーションを連続再生でプレビューし、1フレームずつコマ送りして確認します。まずは8フレーム目と1フレーム目を比較してください。胴体、頭、地面の位置、全体のシルエットが不自然に飛ぶことなくつながっている必要があります。次に、2つの接地ポーズが左右逆のステップになっているか、接地している足が不自然に上下に跳ねていないかを確認します。上下の揺れが大きすぎると感じる場合は垂直方向の変位を減らし、脚の動きが混ざって見分けがつかない場合は開きや重なり方を改善しましょう。
一度の修正で変更するのは1点にとどめ、その都度再生して確認します。タイムラインのフレームディレイ（待機時間）によって各絵の表示時間が決まるため、静止画として判断するだけでなく、再生時の速度でテストしてください。Pinnguaqの解説では、アニメーションのプレビューと個々のフレームの両方をチェックし、速度調整のためにフレームディレイを変更することが推奨されています。Pinnguaq: “Pixel Art 4A: Animation Basics In GraphicsGale”
フレーム数を減らす・増やすタイミング
8フレームあれば、両足それぞれの4つのメインポーズを表現する余裕があります。スプライトが極めて小さい場合は、描くべき細かな変化が少ない2フレームや4フレームのサイクルのほうが視認性が高くなることがあります。逆に、動きの遷移が唐突に感じられ、キャンバスサイズにも余裕がある場合は、キーポーズの間にフレームを追加しましょう。すべてのスプライトに当てはまる単一のフレーム数はありません。Adafruitのガイドでは、シンプルなゲームの歩行には約6フレーム、より滑らかなバージョンには最大約12フレームが使われると説明されており、低解像度のチュートリアルでは2、4、8フレームの選択肢が検討されています。Adafruit: “Pixel Art for LED Matrix Displays”、Manning Leonard Krull: “Tutorial: Walking animation for low-res sprites”
意図した表示サイズで歩行がはっきりと認識でき、最後のフレームから最初のフレームへの移行が滑らかに感じられたら完成です。フレームを追加したり付随する動きを加えたりする前に、そのラフ版を保存しておきましょう。ディテールを追加して動きが分かりにくくなった場合でも、立ち返る明確な基準になります。