STEP2: スプライトアニメーションを作ろう。
- シーンウィンドウのAnimationPlayerを選択してください。中央下部のパネルがAnimationに変化します。2.
- パネル上部のAnimationより新しいアニメーションを作成してください。
- 任意の名前をつけて作成します。サンプルでは歩行アニメーションを作りますのでWalkとつけます。
- なにもないアニメーションが作成されます。デフォルトではアニメーションは1秒ありますが、歩行アニメが1秒は長いので短縮します。パネル右上の
マークの横にある秒数設定を0.4秒にしましょう。
- シーンウィンドウでSprite2Dを選択し、インスペクターウィンドウのAnimation>Framesに注目してください。
- 歩行アニメの1コマ目を探しましょう。サンプル画像では2列目、1列は5コマなので6番目のフレームから始まります。Framesには5と入力しましょう。(0から始まるため6番目は5となります。)
- Framesの右端の
+ボタンをクリックしてください。
- 新しいキーを挿入しますか？というダイアログがでますので、そのまま、作成ボタンを押しましょう。
- Walkアニメーションにコマが挿入されたはずです。2コマ目を挿入しましょう。パネル上部の秒数指定で0.1と入力しましょう。水色の線が少し右に動いたはずです。これは現在の再生位置を示し、キーフレーム挿入時の挿入地点となります。
- Frameを6にしてキーフレーム挿入ボタンを押しましょう。
- 同様の作業を繰り返し、0.2秒地点にFrames7、0.3秒地点にFrames8、0.4秒地点にFrames9を挿入していきます。こうして5個のフレームが挿入されたはずです。
- コマが詰まっていて分かりづらいと思うので拡大しましょう。Animationパネル上でCtrlキーを押しながらマウススクロールするか、右下の
バーを調整して見やすくしておきましょう。
- 歩行アニメーションなのでループを有効にします。秒数の横のループマークを2回クリックして折り返しループ再生を有効にしましょう。
を押して見ましょう。きれいに再生できましたか？できてない場合は以下をチェックしてみましょう。
各コマを選択して、それぞれの秒数とValueが正しいことを確認してください。
手順13.の折り返しループ再生が有効になっているか確認してください。- 最後に、ヴィジュアルスクリプトで利用できるようにゲームオブジェクトに登録をしましょう。ゲームオブジェクトノードsample_2DSpriteを選択してください。
- このオブジェクトは新しく作成したものなので読み込み元のAnimationPlayerが指定されていません。AnimationPlayerを選択ボタンを押して、AnimationPlayerノードを選択してください。
- 選択できたら、アニメーション一括読み込みボタンを押します。
- Animation Setsを展開してみてください。今作成したWalkアニメーションが登録されたはずです。サイドビューゲームの歩行アニメであれば、これで完成です。
解説 オリジナルのスプライトを使う上での注意点
アニメーションセットの詳細設定
ACTION GAME MAKERのアニメーションはデフォルトではオブジェクトの表示方向に応じて自動で反転するように設計されています、通常のサイドビューアニメーションであればそのままで問題ありません。
しかし、前ステップとバックステップで再生するアニメを変えたい、トップビューのゲームで4方向(8方向)に移動アニメを割り当てたい場合等は、手動での詳細設定が必要になります。それぞれの設定項目の内容は以下です。
Animation: 再生するアニメーションを指定します。
自動でY軸反転(Auto Y Flip): 自動反転を設定します。手動設定する場合はオフにしましょう。
表示方向の設定(Eight Direction): キャラクターが選択した方向を向いているとき、指定しているアニメーションを選択します。
方向を追加(+Add Direction Variant): デフォルトでは1カテゴリに1アニメですが、このボタンで追加することで、複数のアニメを設定することができるようになります。
アニメーションセットを追加(+Add Animation Category): 手動でアニメーションカテゴリを追加する場合に使用しますが、通常は使用しません。
トップビューでの設定イメージ(4方向)
キャラクターの向き
前項で、表示方向に応じてキャラクターが反転されると記載しましたが、キャラクターの向きはデフォルトでは、「右方向」を向いていると設定されます。
サンプル画像のように右向きで描かれたキャラクターは問題ないのですが、左向きで描かれたキャラクターには手動で以下の設定が必要です。
BaseSettigsのEnable Auto HFlipのチェックボックスを有効にしてください。
AnimationPlayerとAnimatedSprite2D
Godotでは、AnimatedSprite2Dというスプライトアニメーション専用のノードもありますが、ACTION GAME MAKERでは直接再生できません。しかし、以下の方法を使うことで間接的に利用することが可能です。多数のスプライトシートを切り替える場合等はこちらの方法がおすすめとなります。
おわりに
グラフィックコースは以上です。
チュートリアルでは基本的な扱い方だけを説明しましたが、GodotのAnimationPlayer機能を合わせれば、非常に豊かな表現をすることができます。
ぜひ、色々試していただき、良い表現ができればSNSやギルドで共有をいただければと思います。
他のコースを受講される方はこちら！
2. スクリプトコース
デフォルトキャラでいいからいろんな動きやシステムを作りたい！という人向けのコースです。
3. 表現強化コース
Godotらしいカッコイイ表現をつけてみたい！という人向けのコースです。