2D / 3D ゲームを作成できる無料・オープンソースの軽快なゲームエンジン「Godot Engine 4」で移動させるキャラクターを、公式チュートリアル「Creating the player scene — Godot Engine (stable) documentation in English」を参考にして、作成します。
![](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-スプライトフレームパネルでスプライトシートの画像のフレーム単位でアニメーションを設定できます。.gif)
今回は、前回作成したアニメーション機能を持つノードのリソースに、キャラチップ画像をフレームごとに割り当てて上下左右4方向3コマずつのアニメーションを「スプライトフレーム」パネルを使って作成します。
※ Godot Engine のバージョンは 4.1.2 .NET です。
※ 2023 年 11 月 2 日の段階では Godot Engine 4.x の .NET 版では HTML5 エクスポートに対応していません。HTML5 エクスポートを利用したければ .NET ではないバージョンを使用してください。
※キャラチップ画像は「キャラメル -CharaMEL-」で作成しました。
前回の記事
前回は、アニメーションを表示するノード AnimatedSprite2D を追加して、アニメーションの設定を記録する SpriteFrames リソースを新規作成してノードのプロパティに割り当てました。
GodotEngine4 スプライトアニメーションの作成1/2 | Compota-Soft-Press
![GodotEngine4 AnimatedSprite2D ノードが用いる SpriteFrames リソースをインスペクターの同名のプロパティのフィールドから新規作成します.](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-AnimatedSprite2D-ノードが用いる-SpriteFrames-リソースをインスペクターの同名のプロパティのフィールドから新規作成します-1024x567.png)
SpreiteFrames リソースをクリックして、「スプライトフレーム」パネルを表示し、アニメーションのリストに4方向の歩行アニメーションの空っぽの要素を作成しました。
![GodotEngine4 SpriteFrameパネルでアニメーションを追加して上下左右4方向の歩行アニメーションの要素を作成します.ダブルクリックでリネームできます.](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-SpriteFrameパネルでアニメーションを追加して上下左右4方向の歩行アニメーションの要素を作成します.ダブルクリックでリネームできます.png)
キャラチップ画像の用意
以前の記事「「キャラメル-CharaMEL-」で組合せでキャラチップ画像を作る | Compota-Soft-Press」でキャラチップ生成アプリ「キャラメル – CharaMEL – 」で、キャラチップ画像を作成しました。
パーツを組み合わせるだけでキャラチップ画像ができるので、「キャラメル – CharaMEL – 」でお好みのキャラクターを作成すると良いでしょう。
![CharaMEL で作成したキャラチップ画像の例](https://compota-soft.work/wp1/wp-content/uploads/2023/10/CharaMEL-で作成したキャラチップ画像の例.png)
研究員なので researcher.png で扱います。
#使うかわかりませんが、リサーチャーということで、主人公の名前はリーサにしようと思います。
キャラチップ画像ファイルのインポート
ここからがこの記事での新しい作業です。
用意したキャラチップ画像を、Godot Engine 4 の開発中のプロジェクトで扱えるように、プロジェクトパス以下のフォルダに追加します。
今回はプロジェクトパス直下に画像ファイルを追加します。
方法はエクスプローラなどの画像ファイルを、Godot Engine 4 のエディター左下の「ファイルシステム」ドックにドラッグ&ドロップするだけです。
※複数ファイルを選択して一括して追加できます。
![GodotEngine4 ファイルシステムタブにキャラチップ画像(スプライトシート)をドラッグ&ドロップして追加します..](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-ファイルシステムタブにキャラチップ画像(スプライトシート)をドラッグ&ドロップして追加します.png)
「ファイルシステム」ドックにファイルが追加されたら、それを右クリックしてメニュー「ファイルマネージャ―で開く」を選択すると、エクスプローラでプロジェクトパス直下のフォルダにコピーされたファイルを確認できます。
また、.import という拡張子が追加されたファイルも確認できます。
![GodotEngine4 ファイルシステムタブにドラッグ&ドロップしたファイルをファイルマネージャーで表示するとプロジェクトパスのフォルダ内に複製され import ファイルも作成されています...](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-ファイルシステムタブにドラッグ&ドロップしたファイルをファイルマネージャーで表示するとプロジェクトパスのフォルダ内に複製され-import-ファイルも作成されています.png)
アニメーションにフレームを設定
前回作成した SpriteFrames リソースの中の4方向の歩行アニメーション要素 walk_right, walk_left, walk_up, walk_down に、先ほどのインポートしたキャラチップ画像をフレーム単位で追加します。
キャラチップ画像のように複数の画像が含まれている場合は、「スプライトフレーム」パネルのアニメーションフレームの下の「スプライトシートからフレームを追加する」ボタンを押します。
![GodotEngine4 キャラチップ画像の複数の画像を指定したい場合はスプライトシートから追加するボタンを押します..](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-キャラチップ画像の複数の画像を指定したい場合はスプライトシートから追加するボタンを押します.png)
「ファイルを開く」ダイアログで、先ほどプロジェクトにインポートした resercher.png キャラチップ画像を選択します。
![GodotEngine4 SpriteFrameパネルでスプライトシートから追加する場合はその画像ファイルを選択します...](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-SpriteFrameパネルでスプライトシートから追加する場合はその画像ファイルを選択します.png)
自動的に分割されたフレーム単位でアニメーションに用いる画像を順番に複数選択できます。
もしも、自動で割り当てられたフレームの分割数が間違っていて正しく画像が区切られていない場合は、右上の Horizontal と Vertical で横と縦の正しい分割数を指定しましょう。
![GodotEngine4 スプライトシート選択後のフレームを選択ダイアログでは自動的に区切られていますが間違いがあればコマ数などを修正します.](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-スプライトシート選択後のフレームを選択ダイアログでは自動的に区切られていますが間違いがあればコマ数などを修正します.png)
クリックした順番でフレームの左上に番号が 0 から表示されます。
今回は下向きの歩行アニメーションに用いるフレームを 3 つ選択しました。
選択したら「フレームを追加」ボタンを押します。
![GodotEngine4 SpriteFrameパネルで選択中のアニメーションで用いるフレームをスプライトシートから複数選択します...](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-SpriteFrameパネルで選択中のアニメーションで用いるフレームをスプライトシートから複数選択します.png)
選択順に 3 つのフレームが、選択中の walk_down (下向きの歩行) アニメーションフレームに追加されました。
![GodotEngine4 選択したスプライトシートのフレーム群が選択順に追加されました..](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-選択したスプライトシートのフレーム群が選択順に追加されました.png)
スムーズなアニメーションを行うために、0 番目のフレームを、1 番目と 2 番目の間にも追加します。
先ほどと同じ手順でフレームを選択して増やすこともできますが、フレームを選択して Ctrl + C, Ctrl + V でコピー&ペーストすると簡単に指定したフレームを増やすことができます。
余分なフレームは選択してから delete キーで削除できます。
![GodotEngine4 歩行のアニメーションで2度使うフレームは再度スプライトシートを選択してフレームを追加しました...](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-歩行のアニメーションで2度使うフレームは再度スプライトシートを選択してフレームを追加しました.png)
アニメーションフレーム内のフレームをドラッグ&ドロップすることで順番を変えられます。
![GodotEngine4 SpriteFrameパネルのアニメーションのフレームはドラッグ&ドロップで並び替えられます。](https://compota-soft.work/wp1/wp-content/uploads/2023/10/GodotEngine4-SpriteFrameパネルのアニメーションのフレームはドラッグ&ドロップで並び替えられます。.gif)
アニメーションのテスト
「スプライトフレーム」パネルの「アニメーションフレーム」の下の「再生」ボタンを押すと、画面中央上のビューポート (2D) に表示されているキャラクターがアニメーションします。
ビューポート (2D) の左上に表示されている倍率を上げると拡大して表示されます。
※ぼやけていますが、以前に紹介した「プロジェクト設定」ウィンドウの「一般」タブの「レンダリング」→「テクスチャ」ページの「デフォルトテクスチャフィルタ」を Nearest に変更するとくっきりと表示できます。
下向きに歩行するアニメーションが再生されました。
同様に、アニメーションのリストの walk_right, walk_left, walk_up を選択して、各方向の歩行アニメーションのフレームを設定しましょう。
まとめ
今回は、2D / 3D ゲームを作成できる無料・オープンソースの軽快なゲームエンジン Godot Engine 4 で、前回作成した 4 方向の歩行アニメーションに、インポートしたキャラチップ画像をフレームごとに追加・並び替えて、上下左右4方向3コマずつのアニメーションを「スプライトフレーム」パネルを使って作成しました。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- Setting up the project — Godot Engine (stable) documentation in English
- Creating the player scene — Godot Engine (stable) documentation in English
- Multiple sprite sheets for one character – Godot Engine – Q&A
- Godotの設計哲学 — Godot Engine (4.x)の日本語のドキュメント
- ノードとシーン — Godot Engine (4.x)の日本語のドキュメント
- 【Godot】Godot Engine の Tips (逆引き) | 2dgames.jp
- キャラメル -CharaMEL-
- 【Godot4.x】タイルマップの基本的な使い方 | 2dgames.jp
記事一覧 → Compota-Soft-Press
コメント