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

[GGG-Administrator]

In this course, you’ll learn how to modify the player object included as a sample.
It focuses on the basic operations of 2D bone-rigged characters.

As with the previous courses, this tutorial will use the same tutorial project from the initial lessons.
Please start by opening the project and getting ready.

[GGG-Administrator]

STEP 1: Let’s Replace the Skin

---

1. Download the attached image:

---

2. Drag and drop P_01_stickman_skin.png into any location in your project’s File System to import it.

---

3. Open the Player scene (Object_Sampleplayer.tscn).

---

4. In the Scene tree, go to:

BoneAnimationRoot > Polygon,
then select all the nodes from Mantle_down to Hand_R.

---

5. In the Inspector, drag and drop P_01_stickman_skin.png into the Texture field.

---

6. The player character will now appear as a black stick figure.

---

7. Press the F5 key or click the button to test play.

You should see the stick figure character in motion.

---

8. To revert to the original appearance:

Go to File System > templates > objects > characters > P_01 > P_01_mat_000.png,
and repeat steps 4–5 to reapply the original texture.

---

Explanation

Node Overview

Node	Description
BoneAnimationRoot2D	A special node required by ACTION GAME MAKER to recognize 2D bone characters for effects like filters or motion trails. All Skeleton2D and Polygon2D nodes must be placed under this node.
Skeleton2D	A Godot node that defines 2D bones. Its transformations (position, rotation) affect the linked Polygon2D textures.
Polygon2D	(Mantle_down ~ Hand_R) These nodes define the visual parts of the character, using polygon meshes and UV mapping for skin display.

---

About Polygon2D and Textures

Each Polygon2D node uses a UV system to cut out parts of a shared image.

Let’s take a look:

1. Select the ArmL node.
2. Click the UV button in the top toolbar.
   
   
3. The UV Editor will appear.
   The polygon-shaped selection shows the area used from the texture for ArmL.
   
4. Since the UV coordinates remain unchanged, you can easily create and apply new skins by keeping the same layout and dimensions in your custom image.

---

Custom Skin Guide

Here are the default skin layouts for reference:

P_01_mat_000.png (Male character):

P_02_mat_000.png (Female character):

When creating your own skin, follow the same layout as shown above.
You can use these as a guide to modify or design your base skin textures.

[GGG-Administrator]

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

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!

---

Continue the Graphics Course here:

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

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 tutoria…

---

Additional Explanation

Animation Length & Looping

• You can change animation length using the 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

---

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.

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

---

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:
https://docs.godotengine.org/en/4.x/tutorials/animation/cutout_animation.html