TIPS: スプライトアニメーションへのAnimatedSprite2Dの活用

[Moonling]

ACTION GAME MAKERのヴィジュアルスクリプトでアニメーション再生に利用できるのはAnimationPlayerノードのみとなっております。
Godotのスプライトシートアニメーションに特化したノードであるAnimatedSprite2Dを直接再生することはできません。
AnimationPlayerでもスプライトアニメーションを再生できますが、多数のスプライトシートを切り替えて扱う際には操作が煩雑になる問題があります。
その解決方法を2点紹介をさせていただきます。

1. AnimatedSprite2DのキーをAnimationPlayerに挿入して利用する。

この方法では、AnimatedSprite2Dをスプライトシートの保管場所として扱う方法を説明します。
しかし、プラグインに抵抗がないのであれば2の方法がおすすめです。

AnimatedSprite2Dの準備

1. ノードを追加より、AnimatedSprite2Dノードを追加します。
   

   

2. AnimatedSprite2Dノードを選択し、新しいSpriteFramesを作成します。
   

   

3. 中央下部のパネルSpriteFramesタブで、必要数分のアニメーションを作成します。
   

   

4. 任意のアニメーションを選び、スプライトシートからフレームを追加を選択します。
   

   

5. 追加したいスプライトシートを選びます。右上の分割メニューでスプライトシートを正しく分割します。

6. その後、追加したいフレームを順番に選択します。

   

7. フレームが読み込まれますので追加したいアニメーションの数だけ4~6の手順を繰り返します。
   

   

AnimationPlayer側に読み込む。

1. AnimationPlayerで必要な数だけアニメーションを用意します。
2. トラックを追加より、プロパティトラックを選択します。
   
   
3. AnimatedSprite2Dを選択します。
   
   
4. animationプロパティとframeプロパティを選択して追加します。同時には追加できないため、2~3を繰り返して順番に追加します。
   
   
5. animationトラックの0秒地点でキーを挿入します。
   
   
6. インスペクターでこのアニメーションで再生したいスプライトフレームアニメーションを選択します。
   
   
7. 続いて、frameトラックでキーを挿入しフレーム番号を変更していくことでフレームアニメーションを配置していきます。
   
   

2. pocchi the dev様のプラグインgodot-animated-sprite-2-playerを使う 。

(こちらの方法はJustus Panさんにご紹介いただきました。素晴らしいプラグインを作成されたpocchi the dev様に敬意を評します。)
このプラグインは、AnimatedSprite2Dで作成したフレームアニメーションを、そのままAnimationPlayerにインポートできるプラグインです。

AnimatedSprite2D側でのアニメーション作成。

1. 1.のAnimatedSprite2Dの準備を参考にスプライトシートを読み込んでください。
2. アニメーションを設定します。
   アニメーション速度: 画像では5 FPSとなっている部分がアニメーション速度です。1秒間に何枚のフレームを表示するかという設定です。
   ループ設定: アニメーション速度の左にあるものがループ設定です。デフォルトでは有効になっています。
   Frame Duration: 各フレームごとに長さを倍率で調整できます。例えば、5FPSであるフレームのDurationを2に設定すると、本来の0.12秒ではなく、0.24秒間の長さ表示されます。
   
   
3. 各アニメの設定が完了すれば準備完了です。

プラグインの有効化と利用方法

1. 以下のダウンロードボタンか制作者様のGitHubからプラグイン本体をダウンロードします。
   [ダウンロード] godot-animated-sprite-2-player_2cb178b.zip (4.9 KB)
   godot-animated-sprite-2-player
   
   
2. プロジェクトのルートディレクトリフォルダーをエクスプローラーで開きます。
   
   
3. 先ほどのzipファイルを解凍し、中のaddonsフォルダをルートディレクトリフォルダーに配置します。
   
4. エディターに戻り、プロジェクト＞プロジェクト設定を開きます。
5. プラグインタブに切り替えます。先程追加したプラグインAnimated Sprite to Playerがあるので有効にします。
   
   
6. AnimationPlayerを選択してください。新しいメニューImport AnimatedSprite2D/3Dが追加されているので、正しいAnimatedSprite2Dを選択してImportボタンを押しましょう。
   
   
   
   9.自動でAnimatedSprite2Dの設定通りにアニメーションがインポートされます。ループ設定やアニメーションの長さなども自動調整されます。
   
   
7. インポートしたアニメーションはAnimationPlayerで調整することも問題なく可能です。インポート後にAnimatedSprite2Dの内容を変更した場合は、再度インポートをすることで反映されます。

プラグインはプロジェクト別に設定が必要なので他のプロジェクトで使用する場合は再度有効化が必要です。