■Introduction
Welcome to the 2D Bone Animation Practice Area!
You can create many movements with just a few parts.
In this topic, you’ll learn how to complete a [doll] by combining parts.
↓ In the video, the [Polygon] body parts are assigned to the [Skeleton2D] skeletal parts, and they are linked together.
0-1. Download the [Character Material] and register it in the <>.
※Face variations are not used in this session.
0-2. Download the [Final Design] and register it as well.
■Table of Contents
- Prepare the Object Node for Bone Animation
- Hide unnecessary nodes and organize the workspace
- Prepare the final design
- Assign textures to Polygon2D (part images)
- Create Bone2D (skeleton)
- Set the rest pose (basic posture) and prepare
- Assign Polygon2D to Bone2D and complete
■1. Prepare the Object Node for Bone Animation
1-1. Create a new <> from the [+] at the top center of the screen.
(You can name the object as you like.)
1-2. Set the template to the [Character] type (type) as [2DBone Character Base].
※ This is AGMAker’s strength—providing a pre-assembled object node with necessary nodes.
1-3. The creation is complete and ready.
■2. Hide Unnecessary Nodes and Organize the Workspace
Now, what we need this time is:
- The Polygon set
- The Skeleton2D set
in the [BoneAnimationRoot2d].
2-1. Hide the unnecessary nodes for work:
- Wall collision “CollisionShape2D”
- Hit detection “HitArea2D”
- Attack detection “AttackArea2D”
※ We’ll use Skeleton2D later, so keep it OFF for now!
■3. Prepare the Final Design
3-1. Have you registered the [Final Design] (2d_bone_image.png) from the beginning of this article in the <>?
3-2. Drag and drop the registered PNG into the center of the screen and place it as a Sprite2D (image).
3-3. Move it to the top of the <> and place it “behind” (lower positions are closer to the front).
3-4. In the <> under CanvasItem, reduce the alpha value in [Visibility] to make it faint.
■4. Assign Textures to Polygon2D (Part Images)
4-1. Select the [Polygon2D] in the <>, open the [Texture] in the <>.
4-2. Drop the character material registered in 0-1 into the empty section to register it.
An image will also appear in the lower center.
- Zoom in/out with the mouse wheel
- Move with the middle mouse button + drag
Adjust it to a comfortable position.
4-3. This [Polygon2D] is one part. Name it [torso] and proceed to cut out the torso (torso) from the image you registered.
4-4. From the work window in the lower center, select ‘Point’ and ‘Pen Icon’.
4-5. Turn ON ‘Snap’ and ‘Grid’ (blue).
※ You can set the grid width and other settings from Edit.
4-5. Select the texture at four points + end point in order to cut out the torso (torso) section (↓ video 4:00~)
4-6. Minimize the main screen and locate the cut torso.
4-7. Use the rotation pivot setting button to click around the center of the torso (↑ video 13:00~).
4-8. Move it to the same coordinates as the base image.
※ In addition to mouse movement, you can also input coordinates in the Transform section of Node2D in the <>.
4-9. From the scene’s +, create a new [Polygon2D] and repeat steps 4-1 to 4-8 to register all parts… but
Copying and pasting the registered Polygon2D (created torso) and continuing from 4-4 seems faster.
4-10. Register 8 parts: [Head], [Neck], [Torso], [Waist], [Arm] x2, [Leg] x2.
- Refer to the image below to confirm the display priority.
- The “f” after arm means front, “b” means back.
- Place all Polygon in the same hierarchy level.
- The higher one is displayed behind (when Z-index is the same).
Now the Polygon2D registration is complete. It’s like a mascot costume.
Let’s take a break!
■5. Create Bone2D (Skeleton)
5-1. Turn ON the Skeleton2D in the <> and check the mysterious spike.
5-2. If it doesn’t appear as a thin line, adjust as follows:
- Go to the top menu “Editor” → “Editor Settings” and turn ON [Advanced Settings].
- Adjust the [Bone Width] and [Bone Outline Size] in 2D.
※ A thinner line is easier to see!
※ You can find it by filtering “bone”.
5-3. Place it at the center of the character.
- The base image is available, so you can hide the Polygon (optional).
- Move the Bone2D (renamed to torso) to around the navel.
5-4. Point the spike extending to the right upward.
- Turn OFF [Auto Calculate Length and Angle] in the Bone2D in the <>.
- Set Bone Angle to -90 to point upward.
- You can also adjust the length.
5-5. Copy and paste the torso Bone2D to create [Neck] and [Head] below it.
- Rename to neck and move it to the neck area (↓ video 2:00~)
- Copy neck and rename to head, then move it to the base of the head (↓ video 12:00~)
※ If you’re concerned about the length of the end [head] spike, you can adjust it with the “length” in 5-4.
5-6. Create a Bone2D for each body part [Polygon2D].
The key here is to make the joint part the starting point of the Bone2D.
- Copy Bone2D [head] and paste it into [torso] (moving it under torso after pasting is OK).
- Rename it to [Arm_f] and imagine it as the bone of the front arm (↓ video 4:00~)
- Move [Arm_f] to the shoulder area (↓ video 7:00~)
※ Imagine rotating the “arm” around the shoulder as the axis.
- Use the rotation tool to rotate the spike to the tip of the hand. (↑ video 13:00~)
When all Bone2D are registered, it looks like this (↓ image).
Create a tree structure like the diagram with torso (torso) as the main axis.
■6. Set the Rest Pose (Basic Posture) and Prepare
There are some points you might be concerned about.
Bone2D’s ▲ mark!!
The warning says “Rest pose is not confirmed yet.”
6-1. Select the parent node of Bone2D, ‘Skeleton2D’, and a dedicated button appears. (↓ video 4:00~)
6-2. Select [Overwrite Rest Pose] and the warning ▲ will disappear.
6-3. That’s right, the mascot (Skeleton2D) and the skeleton (Bone2D) are not yet linked.
They’re just placed on the intended points.
■7. Assign Polygon2D to Bone2D and Complete
We perform the ritual before passing Bone2D through Skeleton2D.
7-1. Select all Polygon2D parts directly under Polygon.
7-2. In the <> under Skeleton, select [Assign…] and choose Skeleton2D.
Now the passing preparation is complete.
Select Skeleton2D and assign it to the bone.
7-3. Select the part in the Polygon. In the video, Face was selected.
7-4. In the work window, select [Bone], and choose the corresponding Bone from the Bone2D list for Face.
※ The name is head, so it’s recommended to unify the names.
7-5. Select the bucket tool and make the four corners of the polygon white to register it. (↓ video 8:00~)
7-6. Proceed with selecting the corresponding Bone2D for each Polygon2D part and making the points white.
- If you accidentally make it white, you can return the color by using the adjacent bucket tool.
※ This slider can slightly change the color, but it’s uninvestigated.
After all are registered, check for any issues using the rotation tool.
Rotating the torso (torso) causes the entire body to rotate.
Rotating the waist (waist) causes the lower tree legs to rotate, etc.
※ To reset rotation, use Ctrl+Z or the “Reset to Rest Pose” in Skeleton2D.
The tree structure in this sample is below.
Now the “base” of 2D bone animation is complete.
See you next time in Let’s Make 2D Bone Animation Move!