Tutorial: Graphics Course #3 – 2D Sprite-Based Characters

[GGG-Administrator]

In this course, you’ll learn how to create a new 2D sprite character from scratch.
It covers the basic operations of 2D sprite animation.

As with the previous courses, this one also uses the tutorial project from the first course.
Start by opening the project and getting ready.

[GGG-Administrator]

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

---

1. Prepare your 2D sprite character image.

If you don’t have one ready, you can use the sample image below:

---

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

---

3. Create a new Game Object scene.

Click the ＋ tab in the center editor to open a new tab, then select Game Object in the Scene window.

---

4. In the setup window, configure the following:

• Object Name: Choose any name.
• Template: characters
• Template Type: 2DSprite Character Base
• Group: Player
• Objects to be manipulated by input devices: On

---

5. A Game Object scene will be created with basic settings preconfigured.

Save it right away by right-clicking the unsaved tab or using Ctrl + S, and store it in your preferred location.

---

6. Load your character image.

In the Scene window, select Sprite2D.

---

7. In the Inspector, drag and drop the image from step 2 into the Texture field.

---

8. The character image is now loaded, but you’ll see the entire sheet.

Let’s divide it into individual frames.

---

9. In the Inspector, under Animation, set the following:

• Hframes (horizontal frames): 5 (for the sample image)
• Vframes (vertical frames): 4 (for the sample image)

---

10. Try moving the Frame value up and down.

If the image was split correctly, you should see the sprite switch through the animation frames one by one.

In Godot, frame indexing starts at 0, so Frame 7 is the 8th frame.

---

11. Let’s adjust the collision shapes.

First, select CollisionShape2D in the Scene window.
You should see a light blue rectangle, which defines the collision area for ground and enemy contact.

---

12. Adjust the collision shape to fit the character’s size.

Use the corner handles to resize it.

---

13. Now select HitCollision and adjust it similarly.

This detects hits from enemies—slightly larger than the wall collision area is ideal.

---

14. Finally, let’s disable AttackCollision for now.

This defines the character’s attack area, but since animations vary, we’ll leave it off.

• Select AttackCollision
• In the Inspector, check Disabled

If the shape still feels distracting, click the icon beside AttackCollision to hide it from view.

---

15. Once everything looks good, save your scene again (right-click the tab or use Ctrl + S).

---

TIPS: Visibility vs. Disabled

The icon in the Scene window only toggles editor visibility.
It doesn’t affect the node’s behavior at runtime.

To actually disable a node’s behavior, either:

• Use the Disabled checkbox in the Inspector
• Or delete the node

[GGG-Administrator]

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.

Reference:
https://docs.godotengine.org/en/4.x/tutorials/2d/2d_sprite_animation.html

---

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.

Tutorial: Script Course #1 – Let's Create a Shooting Attack

In this course, you’ll learn the basics of scripting in ACTION GAME MAKER. In Part 1, we’ll be creating a basic attack system. Notes on Using Visual Scripts Visual Script…

3. Expression Enhancement Course
For those who want to add cool, Godot-style visual effects.

Tutorial: Expression Enhancement Course #1 — Using Particles

This tutorial course is designed for those who want to try out various visual effects. Before starting this course, we recommend completing the following tutorial: This course continues using the s…