Tutorial: Graphics Course #3 2D Sprite Character

[GGG-Administrator]

This course is for creating new 2D sprite characters.
You can learn the basic operations of 2D sprite animation.

In this course as well, we will use the tutorial project used in the first tutorial.
Please open the project and get ready.

[GGG-Administrator]

STEP 1: Create a New 2D Sprite Character Game Object

1. First, prepare an image for your 2D sprite character. If you don’t have one, please download and use the sample image below.
   

   

2. Drag and drop the image into the File System window to load it.

3. Create a new Game Object scene. Click the + button on the tab in the central Editor window to open a new tab. Then, select “Game Object” in the Scene window.
   

   

4. The Settings window will open. Configure it as follows:
   Object Name: Set as desired.
   Template: characters
   Template Type: 2DSprite Character Base
   Group: Player
   Objects to be manipulated by input devices: On
   

   

5. A Game Object scene with basic settings applied will be generated. First, save it. Right-click the unsaved tab or use the Ctrl+S shortcut to save it to your desired location.
   

   

6. Load the character image. Click “Sprite2D” in the Scene window.

7. In the Inspector window, drag and drop the character image loaded in step 2 from the File System into the “Texture” field.
   

   

8. The character has been loaded, but the sprite sheet should be displayed as is. Let’s split it.
   

   

9. Set “Animation > Hframes, Vframes” in the Inspector window.
   Hframes: The number of frames arranged horizontally. For the sample image, set this to 5.
   Vframes: The number of frames arranged vertically. For the sample image, set this to 4.
   

   

10. Try moving the “Frame” setting below one by one. If split correctly, it should play frame-by-frame starting from 0. Note that in Godot, as a general rule, the first piece of data starts at 0. Frame 7 corresponds to the 8th frame, so there will be an offset of one. Please be aware of this.
    

    

11. Next, adjust the collision shapes which are currently too large. Select “CollisionShape2D” in the Scene window. You should be able to select the light blue rectangle. This is the wall collision used to detect collisions with the ground or enemies.

12. Adjust the wall collision to match the character’s size. Select the points at the four corners and move them to adjust the size.
    

    

13. Next, adjust “HitCollision” in the same way. This is the hitbox used to detect collisions with attacks, so it is recommended to set it slightly larger than the wall collision.
    

    

14. Finally, there is “AttackCollision”. This indicates the attack range, but its handling varies greatly depending on the animation created, so for now, let’s disable it. Select “AttackCollision” and turn on “Disabled” in the Inspector.
    

    
    
    The “AttackCollision” has turned gray. If it still feels obstructive, you can also hide it by clicking the icon on the right side of “AttackCollision”.

15. Once completed up to this point, save the tab by right-clicking it or using Ctrl+S.

TIPS: Hidden vs. Disabled

You can toggle visibility using the icon in the Scene window, but this only controls how things appear in the editor. Simply hiding an object makes it invisible, but it continues to function. If you want to stop its operation, disable it in the Inspector or delete the node.

[GGG-Administrator]

STEP2: Let’s Create a Sprite Animation.

1. Select the AnimationPlayer in the Scene window. The panel at the bottom center will change to Animation.
2. Create a new animation from the Animation menu at the top of the panel.
   
   
3. Create it with any name. In this example, we’ll create a walking animation, so name it “Walk”.
   
   
4. A blank animation will be created. By default, the animation is 1 second long, but 1 second is too long for a walking animation, so let’s shorten it. Change the seconds setting next to the clock icon in the top right of the panel to 0.4 seconds.
   
5. In the Scene window, select the Sprite2D and focus on the Animation > Frames in the Inspector window.
6. Let’s find the first frame of the walking animation. In the sample image, it starts from the 6th frame (2nd column, 1st column has 5 frames). Enter 5 in Frames. (Since it starts from 0, the 6th frame is 5.)
   
   
7. Click the + button at the right end of Frames.
   
8. A dialog will appear asking if you want to insert a new key. Just press the Create button.
   
   
9. The Walk animation should now have a frame inserted. Let’s insert the second frame. Enter 0.1 in the seconds field at the top of the panel. The light blue line should have moved slightly to the right. This indicates the current playback position and the insertion point for the keyframe.
   
   
10. Set Frame to 6 and press the keyframe insertion button.
    
11. Repeat the same process, inserting Frames 7 at 0.2 seconds, Frames 8 at 0.3 seconds, and Frames 9 at 0.4 seconds. You should now have 5 frames inserted.
12. The frames may be too close together and hard to see, so let’s zoom in. Use Ctrl + mouse scroll in the Animation panel or adjust the magnifying glass bar at the bottom right to make it easier to view.
    
    
13. Since this is a walking animation, enable looping. Click the loop icon next to the seconds twice to enable reverse loop playback.
    
14. Press the to check. Did it play smoothly? If not, check the following:
    • Confirm that each frame is selected and that the seconds and Value are correct.
    • Ensure that reverse loop playback is enabled in step 13.
15. Finally, register it to the game object so it can be used in Visual Script. Select the game object node sample_2DSprite.
16. Since this object is newly created, the AnimationPlayer source is not specified. Press the AnimationPlayer selection button and select the AnimationPlayer node.
    
    
17. Once selected, press the animation bulk load button.
    
    
18. Expand Animation Sets and check. The Walk animation you just created should be registered. If this is a side-view game walking animation, you’re done.

Explanation: Points to Note When Using Original Sprites

Animation Set Detailed Settings
ACTION GAME MAKER’s animations are designed to automatically flip according to the object’s display direction by default. This is usually fine for standard side-view animations.
However, if you want to change the animation played for forward and backward steps, or assign movement animations in 4 (or 8) directions for a top-down game, manual detailed settings are necessary. The details of each setting item are as follows:
Animation: Specifies the animation to play.
Auto Y Flip: Sets automatic flipping. Turn it off if you want to set it manually.
Display Direction Settings (Eight Direction): Selects the specified animation when the character faces the selected direction.
Add Direction (+Add Direction Variant): By default, one animation is set per category. Use this button to add more animations.
Add Animation Category (+Add Animation Category): Used to manually add animation categories, but is usually not needed.
Top-Down Game Settings Example (4 Directions)

Character Orientation
In the previous section, we mentioned that the character flips according to the display direction. By default, the character is set to face the “right direction.”
Characters drawn facing right, like in the sample image, are fine. However, for characters drawn facing left, the following manual settings are required:
Enable the Enable Auto HFlip checkbox in BaseSettings.

AnimationPlayer and AnimatedSprite2D
In Godot, there is a dedicated node called AnimatedSprite2D for sprite animations, but ACTION GAME MAKER cannot play it directly. However, you can indirectly use it with the following method. This method is recommended when switching between multiple sprite sheets.

TIPS: スプライトアニメーションへのAnimatedSprite2Dの活用

ACTION GAME MAKERのヴィジュアルスクリプトでアニメーション再生に利用できるのはAnimationPlayerノードのみとなっております。 Godotのスプライトシートアニメーションに特化したノードであるAnimatedSprite2Dを直接再生することはできません。 AnimationPlayerでもスプライトアニメーションを再生できますが、多数のスプライトシートを切り替えて扱…

Conclusion

That concludes the graphics course.
The tutorial only covered basic handling, but combined with Godot’s AnimationPlayer functionality, you can create very rich expressions.
Please try various things and share your creations on social media or the guild if you achieve good results.

For those interested in other courses:
2. Script Course
For those who want to create various movements and systems using default characters.

チュートリアル: スクリプトコース#1 射撃攻撃を作ってみよう。

このコースでは、ACTION GAME MAKERでの基本的なスクリプト作成方法を学んでいきます。 第一回では、攻撃を作っていきます。 ヴィジュアルスクリプトを扱う上での注意点 ヴィジュアルスクリプトとタブ Godotの仕様上、エディター画面でどのシーンタブを開いていても自由に任意のスクリプト画面を開くことが可能です。しかし、ヴィジュアルスクリプトでは、開いているシーンタブにあるノードの…

3. Expression Enhancement Course
For those who want to create cool, Godot-like expressions.

チュートリアル: 表現強化コース #1 パーティクルを使おう。

こちらは、まずは色々な表現を使ってみたい！という人向けのチュートリアルコースです。 このチュートリアルコースを受講する前に、 を完了することをおすすめします。 なお、このコースでは、最初のチュートリアルで利用したプロジェクトを引き続き使用しますので、削除してしまった方は改めてチュートリアル開始よりチュートリアルプロジェクトをご用意ください。