2026-07-26

Godot でスプライトシートから2Dキャラクターアニメーションを作る — インポートから再生まで

Godot は 2D に強いエンジンですが、動かすキャラクターがなければ始まりません。この記事では、キャラクター画像1枚から作ったスプライトシートを Godot 4 プロジェクトに入れ、フレームに分割してアニメーションとして登録し、コードで再生するまでを一通り解説します。

シートとメタデータを用意する

GenioPlus のアニメーションツールにキャラクター画像をアップロードし、モーションプリセット（待機・歩行・斬撃・ジャンプ・詠唱・被弾）を選ぶと短い動画が生成され、そこからフレームを抽出してスプライトシートを作れます。ダウンロードには PNG シートと一緒にメタデータ JSON が含まれ、フレームサイズ・列×行・余白（padding）が記録されています。この数値が次の工程でそのまま必要になります。シート PNG は res:// 以下の好きな場所に置けば Godot が自動でインポートします。

AnimatedSprite2D でフレームに分割する

シーンに AnimatedSprite2D ノードを追加し、インスペクターの Sprite Frames プロパティで「New SpriteFrames」を作ると、エディタ下部に SpriteFrames パネルが開きます。パネルの「Add frames from a Sprite Sheet」からシート PNG を選ぶと設定ウィンドウが表示されるので、横・縦の枚数（Horizontal / Vertical）をメタデータ JSON の列×行と同じ値にします。シートに余白がある場合は Separation と Offset も合わせると、フレームの境界がぴったり揃います。プレビューで使うフレームを選び「Add N Frames」を押せば登録完了です。

アニメーション名と再生速度

新しいアニメーションの名前は最初「default」です。ダブルクリックして walk・idle・attack などに変更し、パネル左のリストの「+」で複数のアニメーションを1つの SpriteFrames リソースにまとめられます。再生速度は Speed (FPS) の値で調整し、歩行ループなら 8〜12 FPS 程度が自然です。ループ再生は Loop スイッチで有効にし、攻撃のように1回だけ再生するモーションではオフにします。

コードから再生する

再生はノードに対して play() を呼ぶだけです — 例えば $AnimatedSprite2D.play("walk") のように書きます。左右の移動はシートをもう1枚作らず flip_h プロパティで反転させます（velocity.x の符号に応じて sprite.flip_h を切り替える形）。移動入力がないときは play("idle") に戻し、攻撃のような単発モーションでは animation_finished シグナルを受け取って待機状態へ戻すと、状態遷移がすっきりします。

Sprite2D + AnimationPlayer を使う場合

フレームの切り替えを位置・回転・当たり判定のオンオフ・効果音などと同じタイムラインにまとめたい場合は、Sprite2D と AnimationPlayer の組み合わせが向いています。Sprite2D の Texture にシートを入れ、Animation セクションの Hframes/Vframes を列数・行数に設定すると、Frame の値でフレームを選べるようになります。AnimationPlayer で新しいアニメーションを作り、長さ（例：0.6秒）と Loop を決めて、Frame プロパティに一定間隔でキーを打てば完成です。フレームが中間値でぼやけて見える場合は、そのトラックの更新モードを Discrete にすると、きっちり切り替わります。

ドット絵ならフィルターを Nearest に

Godot 4 以降、2D のテクスチャフィルターはノード側の CanvasItem プロパティで設定します（プロジェクト設定の値がデフォルトとして働きます）。ドット絵のシートがぼやけて見えるときは、AnimatedSprite2D や Sprite2D のインスペクターで CanvasItem > Texture > Filter を Nearest に変更してください。プロジェクト全体に適用したい場合は、プロジェクト設定のレンダリング > テクスチャにあるデフォルトのテクスチャフィルターを Nearest にします。また、ドット絵テクスチャは圧縮を Lossless にし、カメラを大きくズームアウトしない限りミップマップはオフのままが無難です。

はじめかた

キャラクター画像が1枚あれば、歩行プリセットでシートを1枚書き出して、上の手順どおり Godot に入れてみられます。背景除去とカットアウト編集はクレジットを消費しないので、まず自分のキャラクターがどれだけきれいに切り抜けるかを確かめてみるのもおすすめです。