GodotEngine4 スプライトアニメーションの作成1/2

2D / 3D ゲームを作成できる無料・オープンソースの軽快なゲームエンジン「Godot Engine 4」で移動させるキャラクターを、公式チュートリアル「Creating the player scene — Godot Engine (stable) documentation in English」を参考にして、作成します。

キャラチップ画像は「キャラメル -CharaMEL-」で作成しました。

今回は、前回作成した Player ルートノードに、アニメーション機能を持つノードを追加して、アニメーションを設定するリソースを新規作成して割り当て、アニメーション編集用の「スプライトフレーム」パネルを表示して、4方向の歩行アニメーションを設定する要素を作成します。
※ Godot Engine のバージョンは 4.1.2 .NET です。
※ 2023 年 11 月 2 日の段階では Godot Engine 4.x の .NET 版では HTML5 エクスポートに対応していません。HTML5 エクスポートを利用したければ .NET ではないバージョンを使用してください。
※キャラチップ画像は「キャラメル -CharaMEL-」で作成しました。

前回の記事

この話の前の記事では、Godot Engine 4 の新規プロジェクトに、キャラクターを動かすためのルートノードそれらを含むシーンを作成・保存しました。

GodotEngine4 キャラを動かすためのルートノードとシーンの作成 | Compota-Soft-Press

GodotEngine4 作成する Player シーンのルートノードをその他のノードを選択して作成します.

AnimatedSprite2D ノードを Player ルートノードの下位に作成

前回作成した、キャラクターを移動させる Player ルートノードの下位に、アニメーションを行う AnimatedSprite2D ノードを作成・追加します。

「シーン」ドックで、追加先の Player ルートノードを右クリックして、メニュー「子ノードを追加」を選択します。

GodotEngine4 Playerルートノードを右クリックして子ノードを追加を選択して下位に子ノードを作成します.

「Node を新規作成」ダイアログで AnimatedSprite2D ノードを選択して作成します。
※上部の検索ボックスで絞り込むと探しやすいです。

GodotEngine4 Playerルートノードの下位に AnimatedSprite2D ノードを作成します..

「シーン」ドックを見ると、Player ルートノードの下位に AnimatedSprite2D ノードが作成されました。

作成した AnimatedSprite2D ノードを選択した状態で「インスペクター」ドックを確認しましょう。
AnimatedSprite2D セクションの「Animation」→「Sprite Frames」の値は「<空>」になっています。

GodotEngine4 AnimatedSprite2D ノードが用いる SpriteFrames リソースをインスペクターの同名のプロパティのフィールドから新規作成します.

Sprite Frames の「<空>」の右側の矢印ボタンを押すと表示されるドロップダウンから「新規 SpriteFrames」を選択して、新しい SpriteFrames リソースを作成し、割り当てます。

GodotEngine4 AnimatedSprite2D ノードの SpriteFrames プロパティに新規作成した SpriteFrames リソースをクリックします.

SpriteFrames リソースが新規作成されて、AnimatedSprite2D ノードの Sprite Frames フィールドに割り当てられました。

その SpriteFrames リソースクリックすると、画面中央下には「スプライトフレーム」パネルが表示されます。
この「スプライトフレーム」パネルでは、新規作成した SpriteFrames リソースにアニメーションを設定できます。

GodotEngine4 AnimatedSprite2D ノードの SpriteFrames プロパティに新規作成した SpriteFrames リソースを編集するSpriteFrameパネルが表示されました..

「スプライトフレーム」パネルの左側のアニメーションのリストには最初 default という空っぽのアニメーションが用意されています。
リストの default 要素をダブルクリックしてリネームして walk_right に変更します。
左上の+ボタンのついたファイルアイコンのボタンを押すと、アニメーションがリストに追加されるので、同じように walk_left, walk_up, walk_down4方向の歩行アニメーション用の要素を作成しましょう。

GodotEngine4 SpriteFrameパネルでアニメーションを追加して上下左右4方向の歩行アニメーションの要素を作成します.ダブルクリックでリネームできます.

今回はここまで

今回は、Godot Engine 4 で、前回作成した Player ルートノードに、アニメーション機能を持つノードを追加して、アニメーションを設定するリソースを新規作成して割り当て、アニメーション編集用の「スプライトフレーム」パネルを表示して、4方向の歩行アニメーションを設定する要素を作成しました。

次回は、作成した歩行アニメーションに実際に歩行アニメーションの画像フレームを設定します。

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

タイトルとURLをコピーしました