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

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.
image


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 :old_key: (Insert Key) button next to the Frame field.

image


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.

image


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.

image


14. Press :play_button: 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!


:memo: Notes: When Using Custom Sprites

:wrench: 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)

:compass: Example: Top-down 4-direction settings


:man_standing: 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


:prohibited: 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.


:white_check_mark: 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!


:backhand_index_pointing_right: 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.