ドット絵アニメーションの基本
動くピクセルアートの作り方
静止画のドット絵に命を吹き込む「アニメーション」。フレームの考え方から実践的なモーションの作り方まで、基本テクニックを解説します。
静止画のドット絵に動きを加えれば、さらに魅力的な作品になります。
アニメーションの仕組み
ドット絵アニメーションは、少しずつ変化した複数の静止画（フレーム）を順番に表示することで動きを表現します。パラパラ漫画と同じ原理です。
フレームレート（FPS）
1秒間に何フレーム表示するかを「フレームレート」と呼びます。ドット絵アニメーションでは以下が一般的です。
- 8〜12 FPS — ドット絵アニメーションの標準的な速度。レトロゲームの雰囲気
- 4〜6 FPS — ゆったりした動き。待機モーションや環境アニメーションに
- 15〜24 FPS — 滑らかな動き。攻撃エフェクトなどスピード感が必要な場面に
フレーム数は少なくても大丈夫。4フレームの歩行アニメーションでも、十分に「歩いている」ように見えます。少ないフレームでいかに動きを表現するかがドット絵アニメーションの腕の見せどころです。
基本のアニメーションパターン
1. 待機モーション（Idle）
キャラクターが何もしていない状態の微細な動きです。呼吸のように体が上下する、まばたきをする、髪が揺れるなどが定番です。
- フレーム数の目安: 2〜4フレーム
- コツ: 全体を動かさず、1〜2ピクセルだけ変化させる
↑ 呼吸するように上下に動く待機アニメーション
2. 歩行サイクル（Walk Cycle）
ゲームキャラクターの最も基本的なアニメーション。左右の足を交互に出す動きを表現します。
- フレーム数の目安: 4〜6フレーム
- 基本構成: 立ち → 右足前 → 立ち → 左足前
- コツ: 足だけでなく腕も反対方向に振ると自然に見える
歩行サイクルでは「接地感」が大事です。足が地面に着く瞬間にキャラクターが少し沈むように描くと、重量感が出て自然な歩行に見えます。
3. 攻撃モーション（Attack）
振りかぶり → 攻撃 → 戻りの3段階で構成するのが基本です。「振りかぶり」を長めにして「攻撃」を1〜2フレームで素早く見せると、メリハリのある気持ちいいアクションになります。
- フレーム数の目安: 4〜8フレーム
- コツ: 予備動作（アンティシペーション）を入れると動きにメリハリが出る
4. エフェクト（爆発・煙・キラキラ）
エフェクトアニメーションは拡大 → 分散 → 消滅の流れが基本です。ドット絵のエフェクトは少ないフレームでもダイナミックに見えるのが魅力です。
- フレーム数の目安: 3〜6フレーム
- コツ: 最初のフレームを小さく、次のフレームで一気に大きくすると迫力が出る
アニメーションの12原則とドット絵
ディズニーが確立した「アニメーションの12原則」は、ドット絵アニメーションにも応用できます。特に重要なものを紹介します。
スクオッシュ＆ストレッチ
着地時につぶれ、ジャンプ時に伸びる。たった1ピクセルの変化でも効果的です。
予備動作
ジャンプ前にしゃがむ、攻撃前に振りかぶる。次の動きを予告することで動きが自然になります。
緩急（イージング）
動き始めと終わりをゆっくり、中間を速くすると滑らかに見えます。
フォロースルー
メインの動きが止まった後も、髪やマントなどの部位が少し遅れて動くと説得力が増します。
スクオッシュ＆ストレッチの実例：
↑ 上昇時に縦に伸び、着地時に横につぶれるボール
スプライトシートの作り方
アニメーションをゲームに組み込む場合、各フレームを1枚の画像に並べた「スプライトシート」を作成します。詳しいゲーム素材の作り方はゲーム素材ガイドもご覧ください。
- 各フレームを同じキャンバスサイズで描く
- フレームを横一列または格子状に並べる
- PNG形式で書き出す（透過背景推奨）
- ゲームエンジン側でフレームサイズとFPSを指定して再生
↑ このような小さなドット絵を並べてスプライトシートを作ります
スプライトシートの構成例（行=アクション、列=フレーム）
Pixnoteで描いた静止画のドット絵をベースに、少しずつ変化させたバリエーションを描くことで、アニメーション用のフレームを効率的に作成できます。
練習のコツ
- まずは2フレームの点滅アニメーションから始める
- ボールの跳ね返りを作って「スクオッシュ＆ストレッチ」を練習
- 4フレームの歩行サイクルに挑戦
- 好きなゲームのドット絵アニメーションを1フレームずつ観察する