スプライトシートアニメーション

課題

2Dアニメーションを含むスプライトシートを使いたい。

解決策

スプライトシートは2Dアニメーションの一般的な配布形式です。単一の画像ファイルに全てのアニメーションフレームを集約した形式で、効率的なデータ管理ができます。

このデモでは、Elthen氏制作の優れた「冒険者」スプライトを使用します。このアセットをはじめ、多くの高品質なアート素材は以下から入手できます。https://elthen.itch.io/

ノード設定

このアニメーション手法では、Sprite2Dノードを使用してテクスチャを表示し、その後AnimationPlayerでフレームの切り替えをアニメーション化します。これはあらゆる2Dノードで使用できますが、ここではデモンストレーション用にCharacterBody2Dノードを使用しています。

以下のノードをシーンに追加してください。

CharacterBody2D: Player
   Sprite2D
   CollisionShape2D
   AnimationPlayer

Sprite2Dコンポーネントの Texture プロパティにスプライトシートテクスチャをドラッグ＆ドロップしてください。ビューポート内にすべてのスプライトシートが表示されます。個別のフレームに分割するには、インスペクターの「Animation」セクションを展開し、 Hframes を 13、 Vframes を 8に設定します。Hframes と Vframes は、それぞれ水平方向および垂直方向のフレーム数を指定するパラメーターです。

Frame プロパティを変更してみて、画像がどのように変化するか見てみてください。これは後ほどアニメーション化するプロパティです。

アニメーションの追加方法

以下の手順に従ってアニメーションを設定します。

1. 「AnimationPlayerコンポーネントを選択します。
2. 「アニメーション」ボタンをクリックし、続いて「新規作成」を選択します。
3. 新しいアニメーションに「idle」という名前を付けます。
4. アニメーションの長さを 2 に設定します。
5. 「ループ」ボタンをクリックして、アニメーションが繰り返し再生されるようにします（詳細は以下を参照）。

スクラバーが0時点で、Sprite2Dノードを選択します。アニメーションのフレーム番号を0に設定し、値の隣にあるキーアイコンをクリックします。

アニメーションを再生してみると、何も変化がないように見えます。これは最後のフレーム（12）が最初のフレーム（0）と全く同じ表示になっているためで、その間のフレーム（1～11）が全く反映されていないからです。これを修正するには、トラックの「更新モード」をデフォルト値の「離散」から「連続」に変更してください。このボタンはトラック右側の端に配置されています。

この方法が有効なのは、フレームがすでに順序通りに並んでいることが前提です。そうでない場合は、タイムライン上で各 Frame を個別にキーフレーム化が必要です。

自由に他のアニメーションを追加してください。例えば「ジャンプ」アニメーションはフレーム 65～70 に設定されています。

関連レシピ

• プラットフォームキャラクター