このコースでは、ゼロから新しい2Dスプライトキャラクターを作成する方法を学びます。
2Dスプライトアニメーションの基本的な操作を扱います。
以前のコースと同様に、このコースでも最初のコースで使用したチュートリアルプロジェクトを利用します。
まず、プロジェクトを開いて準備を整えてください。
ステップ 1: 新しい 2D スプライトキャラクターゲームオブジェクトを作成しましょう
1. 2D スプライトキャラクターの画像を準備します。
用意がない場合は、以下のサンプル画像を使用できます：
2. 画像をファイルシステムにドラッグ＆ドロップしてインポートします。
3. 新しいゲームオブジェクトシーンを作成します。
中央エディタの＋タブをクリックして新しいタブを開き、シーンウィンドウでゲームオブジェクトを選択します。
4. 設定ウィンドウで以下を設定します：
- オブジェクト名: 任意の名前を選択
- テンプレート:
characters - テンプレートタイプ:
2DSprite Character Base - グループ:
Player - 入力デバイスで操作されるオブジェクト:
オン
5. 基本的な設定が事前に構成されたゲームオブジェクトシーンが作成されます。
未保存のタブを右クリックするか、Ctrl + Sを使用してすぐに保存し、お好みの場所に格納します。
6. キャラクター画像を読み込みます。
シーンウィンドウで Sprite2D を選択します。
7. インスペクタで、ステップ 2 の画像をテクスチャフィールドにドラッグ＆ドロップします。
8. キャラクター画像が読み込まれましたが、シート全体が表示されます。
個々のフレームに分割しましょう。
9. インスペクタのアニメーションセクションで以下を設定します：
- Hframes（横フレーム数）:
5（サンプル画像の場合） - Vframes（縦フレーム数）:
4（サンプル画像の場合）
10. フレーム値を上下に動かして確認します。
画像が正しく分割されていれば、スプライトがアニメーションフレームを順に切り替えて表示されるはずです。
Godot ではフレームインデックスは0から始まるため、フレーム 7は 8 番目のフレームです。
11. 衝突形状を調整しましょう。
まず、シーンウィンドウでCollisionShape2Dを選択します。
地面や敵との接触を定義する衝突領域を示す、薄い青色の四角形が表示されるはずです。
12. キャラクターのサイズに合わせて衝突形状を調整します。
角のハンドルを使ってサイズを変更します。
13. 次にHitCollisionを選択して同様に調整します。
これは敵からのヒットを検出するもので、壁の衝突領域よりわずかに大きいのが理想的です。
14. 最後に、現時点ではAttackCollisionを無効にします。
これはキャラクターの攻撃領域を定義しますが、アニメーションによって異なるため、今回はオフにしておきます。
AttackCollisionを選択- インスペクタでDisabledをチェック
形状がまだ邪魔に感じる場合は、
AttackCollisionの隣のアイコンをクリックして表示を非表示にします。
15. すべてが問題なければ、シーンを再度保存します（タブを右クリックするか、Ctrl + Sを使用）。
ヒント：表示切り替え vs 無効化
シーンウィンドウのアイコンは、エディタでの表示のみを切り替えます。
ランタイムでのノードの動作には影響しません。
ノードの動作を実際に無効にするには、以下のいずれかを行います：
- インスペクタのDisabledチェックボックスを使用
- またはノードを削除
STEP 2: Create a Sprite Animation
1. In the Scene window, select the AnimationPlayer node.
The lower center panel will switch to Animation view.
2. At the top of the panel, click Animation > New to create a new animation.
3. Give it a name.
In this example, we’ll create a walk animation, so name it Walk.
4. A blank animation will be created.
By default, it lasts 1 second, but that’s too long for a walk cycle—let’s shorten it.
Set the length to 0.4 seconds using the timer icon at the top right.
5. In the Scene window, select Sprite2D.
In the Inspector, go to Animation > Frame.
6. Identify the first frame of the walking animation.
In the sample sprite, it’s in the second row (index starts at 0), so it begins at frame 5.
Enter 5 in the Frame field.
7. Click the 
(Insert Key) button next to the Frame field.
8. When prompted to insert a new keyframe, just click Create.
9. A frame will be inserted into the Walk animation.
Now move the timeline to 0.1 seconds.
10. Set Frame to 6, then click the key icon again to insert the next frame.
11. Repeat this process:
- At 0.2s → Frame 7
- At 0.3s → Frame 8
- At 0.4s → Frame 9
You should now have 5 frames.
12. The frames might appear crowded—zoom in for better clarity.
Use Ctrl + scroll on your mouse or adjust the zoom bar in the lower right.
13. Enable looping for the animation.
Click the loop icon twice (next to the timer) to set it to Ping-Pong Loop.
14. Press 
to preview the animation.
If it doesn’t play as expected, check:
- Each frame’s timestamp and value
- That looping is properly enabled (Step 13)
15. To use this animation in a visual script, register it to your Game Object.
Select your Game Object node (e.g., sample_2DSprite).
16. Because this is a new object, its AnimationPlayer isn’t linked yet.
Click the Select AnimationPlayer button and choose the correct node.
17. Click the Auto-Register Animations button.
18. Expand the Animation Sets section.
You should see your newly created Walk animation listed.
If you’re making a side-view game, you’re now ready to go!
Notes: When Using Custom Sprites
Animation Set Advanced Settings
By default, ACTION GAME MAKER flips the animation horizontally based on movement direction.
For most side-view games, this is fine. But if you want different animations for:
- Forward and backward steps
- 4-direction or 8-direction top-down games
…you’ll need to manually configure the animation set:
| Setting | Description |
|---|---|
| Animation | Specifies which animation to play |
| Auto Y Flip | Toggles automatic horizontal flipping. Disable for manual control |
| Eight Direction | Defines which animation plays based on facing direction |
| +Add Direction Variant | Allows multiple animations per direction |
| +Add Animation Category | Adds custom animation groups (advanced use only) |
Example: Top-down 4-direction settings
Character Facing Direction
Characters are assumed to face right by default.
If your sprite faces left, you must enable this setting:
- Go to
BaseSettings - Check Enable Auto HFlip
Note About AnimatedSprite2D
Although Godot includes a dedicated node called AnimatedSprite2D,
ACTION GAME MAKER does not support it.
All sprite animation should be done with AnimationPlayer.
However, it is possible to indirectly use AnimatedSprite2D by applying the methods described below.
This approach is especially recommended when dealing with multiple sprite sheets.
Conclusion
That wraps up the Graphics Course!
This tutorial covered the basics, but Godot’s AnimationPlayer is extremely powerful.
By combining it with ACTION GAME MAKER’s tools, you can create rich, expressive characters.
Feel free to share your creations on social media or the official Guild!
Explore Other Courses:
2. Scripting Course
For those who are fine using default characters but want to build various mechanics and systems.
3. Expression Enhancement Course
For those who want to add cool, Godot-style visual effects.