アニメーション on Godot 4 レシピ

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

Mon, 01 Jan 0001 00:00:00 +0000

課題

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

解決策

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

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

警告

Godotが自動的に画像を切り分けできるように、スプライトシート内の画像は均一なグリッド状に配置してください。不規則に配置されている場合、ここで説明する手法は使用できませんのでご注意ください。

ノード設定

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

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

CharacterBody2D: Player
 Sprite2D
 CollisionShape2D
 AnimationPlayer

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

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

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

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

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

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

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

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

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

近接攻撃

Mon, 01 Jan 0001 00:00:00 +0000

ℹ️ 留意事項

この記事は Godot 3から Godot 4 へ内容の書き換え中です。 Godot4では存在しない変数、関数が含まれている場合があります。もしその場合はリポジトリのIssuesまでご報告ください。

課題

剣やパンチなどの近接攻撃を実装したい。

解決策

本例では、既に攻撃アニメーションが設定されたキャラクターが存在すると仮定します。説明のために、以下の2種類の攻撃を使用します。

Area2D を使用して剣がターゲットに命中したことを検出できますが、実際に有効化する必要があるのはスイング動作中のみです。アニメーションと同期させるためには、この活性化をAnimationPlayerで制御します。

シーンに Area2D と CollisionShape2D を追加してください。ヒットボックスには矩形形状を使用し、剣が振り上げフレームで完全にカバーされるようにサイズを調整します。

アニメーションを最初のフレームに移動し、領域の [無効] プロパティを確認します。キーフレームアイコンをクリックしてアニメーションにトラックを追加してください。次に、剣が伸びているフレームまでアニメーションを進め、[無効] を解除した状態でもう1つのキーフレームを追加してください。最後に、スイングの終わりまで進み、再度 [無効] を有効にしてキーフレームを作成します。

新しいエリアのarea_enteredシグナル（またはゲームの設定によっては、body_entered）を接続します。このデモでは、ダメージを受け取れる任意のボディにはArea2Dが定義され、「hurtbox」というグループ内に配置されているとします。

func _on_SwordHit_area_entered(area):
 if area.is_in_group("hurtbox"):
 area.take_damage()

これで実際に試してみて、ターゲットが剣の当たり判定範囲内にいればダメージが発生するか確認できるはずです。

ヒットボックスサイズの変更方法

複数の攻撃アニメーションがある場合、ダメージ範囲の大きさが統一されていないことがあります。上記のアニメーション例では、最初の動きは広範囲をカバーする斜め上方向への振り下ろし攻撃です。この処理に対応するため、衝突形状の Extents プロパティに対するアニメーショントラックも追加が必要です。この値を設定して各アニメーションの開始時にキーフレームとして登録してください。

アニメーションツリーを使う

Mon, 01 Jan 0001 00:00:00 +0000

課題

アニメーションの数が増えすぎて、シーン間の切り替え管理が困難になってきていませんか？コードが大量の if 文で埋め尽くされ、少し変更を加えるたびに全体が壊れてしまいそうになっていませんか？

解決策

アニメーション状態機械を作成するには AnimationTree を使いましょう。これにより、アニメーションを整理できるだけでなく、最も重要な点として、それらの間の遷移を制御することが可能になります。

はじめに

本デモでは、Elthen氏作の素晴らしいスプライト「Adventurer」を使用しています。この素材を含め、他にも数多くの高品質なアート作品はhttps://elthen.itch.io/で入手できます。

We’ll also assume you’ve already set up the character’s animations using AnimationPlayer. Using the above spritesheet, we have the following animations: “idle”, “run”, “attack1”, “attack2”, “hurt”, and “die”.

アニメーションツリー

シーンに AnimationTree ノードを追加してください。［ツリールート］プロパティで「新規アニメーションノードステートマシン」を選択してください。

AnimationTreeで作成されたアニメーションを制御するノードです。既存のアニメーションにアクセスさせるには、Anim Player プロパティ内の「割り当て」ボタンをクリックし、使用するアニメーションノードを選択してください。

以下は、状態機械を AnimationTree パネルに設定し始める方法です。

警告に注意してください。インスペクターで「_アクティブ」プロパティを「オン」に設定します。

右クリックして「アニメーションを追加」を選択します。「待機」を選択すると、そのアニメーションを表す小さなボックスが表示されます。「再生」ボタンを押すとアニメーションが実行されるはずです。他のアニメーションを追加する場合も同じ手順で行ってください。

接続を追加できるようになりました。「ノードを接続」ボタンをクリックして、ノード間でドラッグして接続してください。例として、この2つの攻撃アニメーションを使います。

アニメーションを選択すると、ツリーは現在のノードから目的地まで接続経路に沿って追従します。ただし、上記の設定では「attack2」を再生しても途中で「attack1」は表示されません。これは、接続におけるデフォルトの「スイッチモード」が「即時」に設定されているためです。まず「移動/選択」ボタンをクリックし、次に「attack1」と「attack2」間の接続ポイントをクリックします。インスペクターで「スイッチモード」を「終点時」に変更してください。同様の操作を「attack2」から「idle」に対しても行います。接続アイコンがからへと変化します。

「idle」が再生されている状態で「attack2」をクリックすると、二つの攻撃が順番に再生されるようになります。

しかし、現在「attack2」アニメーションが停止しています。接続時には、進行状況/モードプロパティを「自動」に設定してください。これにより、両方のアニメーション再生後にツリーが「待機」状態に戻ります。なお、接続アイコンが緑色に変化することでこの状態が表示されます。

アニメーション on Godot 4 レシピ

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

課題

解決策

ノード設定

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

関連レシピ

近接攻撃

課題

解決策

ヒットボックスサイズの変更方法

関連レシピ

この動画が気に入ったら？

アニメーションツリーを使う

課題

解決策

はじめに

アニメーションツリー