Let’s Move It, 2D Bone Animation!

The Elephant Forest - Under Construction!

The project will also be released soon, so please wait a moment.

■ Introduction

Welcome to the practice ground for 2D bone animation!
Here, we’ll use the “Puppet” created in the first session, Let’s Start 2D Bone Animation, and explain how to register it in AnimationPlayer.

AnimationPlayer

What we want to achieve
Let’s create an animation like this!

■ Table of Contents

  1. Check the rest pose and prepare for unnatural poses
  2. Basics of anime: Create the initial “Wait” animation for all
  3. What is anime? (Reading material)
  4. Full-scale registration: Create the “Move” animation
  5. Points to note when transitioning between animations (e.g., scale and rotation carry over, troubleshooting issues)
  6. What’s next? (Decision-making, integration into vs. mode, guiding to tutorial)

■ 1. Check the Rest Pose and Prepare for Unnatural Poses

1-1. Override the “Rest Pose” from Skeleton2D
This allows you to reset back to the rest pose when needed.
Let's set it up for peace of mind
Having the ability to return to the original pose gives you peace of mind, so feel free to move it around!

1-2. You can turn off the original image


If the “draft image” Sprite2D used during bone animation creation is obstructive, you can hide it.

■ 2. Basics of Anime: Create the Initial “Wait” Animation for All

2-1. Create a new animation “00_wait” from Animation2D

2-2. Change the time to [0.5]. (You can leave it unchanged if you prefer)
image

2-3. Since we won’t be creating a waiting animation this time, this completes the setup.

■ 3. What is Anime? (Reading Material)

For example, when creating a “punch” animation, you need a sequence like:
Wait → Punch → Wait.

Consider how long it takes to finish
For a fast jab, 0.1 seconds might be too slow, while a wide uppercut might take around 0.5 seconds.
We recommend actually using a stopwatch to practice swings or visualize the motion.

② Think about the key points during the animation time
Breaking down an uppercut into smaller steps:

  • Wait
  • Slightly pull the body back and prepare the fist
  • Pull the arm back and gather momentum
  • Shift the center of gravity forward, starting to extend from the shoulder
  • The most stylish pose of the uppercut
  • Softly relax after the swing
  • Lower the arm in a relaxed manner
  • Wait

    (The key is the atmosphere)

③ What do we set?
In AnimationPlayer, we register keyframes, which correspond to the “key drawings” in TV anime.
The “in-between” animation between each keyframe is automatically interpolated and connected.
※ You can imagine the tension building up… then whoosh! and the return with a squeak-squeak sound.

④ There’s no correct answer, so don’t try to teach—just feel the movement that feels good
Whether you’re playing an exhilarating action game or pursuing realistic motion, finding your own “correct” way might be the key to making creation enjoyable.

⑤ Are there simple ways to assemble it?
You might find it easier to move each part separately.
How to create an uppercut
Register keyframes for the torso movement, then sequentially adjust the waist → legs → head → hands → overall adjustments.

  • Enlarge the hands and feet during hit moments
  • Be mindful of footwork to avoid slipping

Now, let’s move on to the next section and get practical!

■ 4. Full-Scale Registration: Create the “Move” Animation

4-1. Create a new animation “01_move” in AnimationPlayer.

4-2. Set the total time to 0.4 seconds. (You can freely adjust this value)
image

3 Likes