このコースでは、2Dスプライトキャラクターを新たに作るコースです。
2Dスプライトアニメーションの基本的な操作を学ぶことができます。
このコースでも、最初のチュートリアルで使用したチュートリアルプロジェクトを利用します。
まずはプロジェクトを開いて準備してください。
STEP1:新しく2Dスプライトキャラクターのゲームオブジェクトを作ろう。
-
まずは2Dスプライトキャラクターの画像をご用意ください。特に無い場合は以下のサンプル画像をダウンロードしてご利用ください。
-
ファイルシステムウィンドウに画像をドラッグ＆ドロップして読み込みます。
-
新しいゲームオブジェクトシーンを作りましょう。中央エディターウィンドウのタブで＋を押して新しいタブを開きます。そしてシーンウィンドウでGame Objectを選択しましょう。
-
設定ウィンドウが開きますので、以下のように設定をしてください。
オブジェクト名: 任意に設定してください。
テンプレート: characters
テンプレートの種類: 2DSprite Character Base
グループ: Player
コントローラーで操作する対象(Objects to be manipulated by input devices.):オン
-
一通りの基本設定がされたゲームオブジェクトシーンが生成されます。まずはセーブをしておきましょう。未保存となっているタブを右クリックするか、Ctrl+Sのショートカットを使って任意の場所に保存しておきましょう。
-
キャラクター画像を読み込みます、シーンウィンドウのSprite2Dをクリックしてください。
-
インスペクターウィンドウのTextureに、ファイルシステムから2.で読み込んだキャラクター画像をドラッグ＆ドロップします。
-
キャラクターが読み込まれましたがシートがそのまま表示されているはずです。分割していきましょう。
-
インスペクターウィンドウのAnimation>Hframes,Vframesを設定します。
Hframes: 横方向に配置されているフレームの数です。 サンプル画像の場合は5を設定してください。
Vframes: 縦方向に配置されているフレームの数です。サンプル画像の場合は4 を設定してください。
-
1つ下のFrameを1つずつ動かしてみてください。正常に分割できていれば0から順にコマ送りで再生されるはずです。なお、Godotではここに限らず、原則的に1つ目のデータは0から始まります。Frame7は8コマ目となり、1つずれることになります。ご注意ください。
-
次は大きすぎる各判定を調整していきましょう。シーンウィンドウでCollisionShape2Dを選択してください。水色の四角形が選択できるようになっているはずです。これは、地面や敵との衝突を判定する壁判定です。
-
壁判定をキャラクターのサイズに合うように調整しましょう。四隅のポイントを選択して移動してサイズを調整します。
-
次はHitCollisionを同様に調整します。これは攻撃との衝突を判定する当たり判定なので壁判定より一回り大きく設定すると良いでしょう。
-
最後はAttackCollisionです。これは、攻撃範囲を示しますが、どのようなアニメーションを作るかで大きく扱いが変わってきますので、まずは無効にしておきましょう。AttackCollisionを選択し、インスペクターでDisabledをオンにします。
AttackCollisionが灰色になりましたが、まだ邪魔に感じるようでしたらAttackCollisionの右側にある
マークをクリックすることで非表示にすることもできます。
-
ここまで完成したらタブを右クリックかCtrl+Sでセーブしておきましょう。
TIPS: 非表示と無効
シーンウィンドウのマークで表示、非表示を切り替えることができますが、これはあくまでエディター上での見え方を制御するものです。非表示にしただけでは、見えなくなるものの実際には動作しています。動作を停止したい場合は、インスペクターで無効化するか、ノードを削除するようにしましょう。
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らしいカッコイイ表現をつけてみたい！という人向けのコースです。