Tutorial: Graphics Course #2 – 2D Bone-Based Characters

STEP 2: Let’s Add an Animation


1. In the Scene window, select the AnimationPlayer node.

The bottom panel will automatically switch to the Animation view.


2. Press the :play_button: Play button in the top-left of the Animation panel.

The character should move slightly—this is the 001_Idle animation being played.


3. Click the animation name 001_Idle.

There are 47 pre-registered animations. Try playing different ones!
You’ll see the character move based on the white and yellow bones—these bone movements are controlled using the tracks shown below.


4. Let’s create a new animation.

Click the Animation dropdown at the top of the panel, then select New.


5. A dialog will appear—enter a name for your animation and click OK.


6. Your new animation is now created, but it’s empty—no tracks yet.

To add tracks:

  • Select all Bone2D nodes from B_Hip to B_Chain under BoneAnimationRoot2D > Skeleton.
  • Then click the :old_key: Insert Key icon in the toolbar.


7. A prompt will appear: “Create 42 new tracks?” — click Create.

Each of the 21 bones will now have tracks for position and rotation.


8. Let’s start editing the animation.

The blue vertical line shows the current time marker.
Drag it to around the 0.6-second mark.


9. Now, let’s animate the right arm.

In the Scene window, select B_Arm_R — this is the upper right arm bone.


10. In the Inspector, adjust the Node2D > Transform > Rotation value.

You should see the arm rotate.


11. Once you’ve chosen an angle, click the :old_key: Insert Key icon again.

It may not seem like anything happened, but the current rotation has been saved at the 0.6s mark.


12. Press :play_button: Play.

The arm should move smoothly from its default position to the new rotated position.
This movement is automatically interpolated between keyframes.
Just like posing an action figure—set the pose, insert a key, and it becomes animation!


:right_arrow: Continue the Graphics Course here:


:magnifying_glass_tilted_left: Additional Explanation

:stopwatch: Animation Length & Looping

  • You can change animation length using the :alarm_clock: Clock icon in the top-right.
  • Next to it is the Loop setting:
    • Click once: Loop
    • Click twice: Ping-pong
    • Click three times: No loop

image


:puzzle_piece: Using Your New Animation in Visual Scripts

To use your new animation in a visual script, you must register it with the GameObject node’s animation set.

  1. Select the Player node in the Scene window.
  2. Click the Auto-Register Animations button in the Inspector.

  1. Your animation is now registered and usable in visual scripting.
    Expand the Animation Set section to view all registered animations.


:bone: Expanding 2D Bone Animation

This tutorial covers only the most basic operations.
Godot’s AnimationPlayer is very powerful—it includes features like Inverse Kinematics (IK) and much more.

For advanced features, refer to the official Godot documentation:
:blue_book: https://docs.godotengine.org/en/4.x/tutorials/animation/cutout_animation.html