Tutorial: Graphic Course #2 2D Bone Character

STEP2: Let’s Add Animation

1. Select AnimationPlayer in the Scene window. The bottom panel will switch to Animation.
2. Try pressing the in the top-left corner of the Animation panel. The character should move slightly. This plays the animation named 001_Idle.
   
   

   image1560×812 107 KB
3. Click on the part labeled 001_Idle. There are 47 animations registered, so try playing one you like. You should see the character move in response to the white and yellow bones. These bone movements are controlled by tracks at the bottom.
4. Let’s create a new animation. Click Animation at the top of the panel and select New.
   
   

   image437×137 10.1 KB
5. A window will appear to create a new animation. Give it a name and press OK.
   
   

   image335×151 5.47 KB
6. Although the animation has been added, the tracks are empty. Let’s add tracks. Select all Bone2D nodes from B_Hip to B_Chain, which are children of BoneAnimationRoot2D > Skeleton. Then, click the icon (Insert Key) button on the top toolbar.
   
   

   image1356×493 66.1 KB
7. A prompt will ask if you want to create 42 new tracks. Select Create as is. This adds tracks to the new animation. These 42 tracks control the position and rotation of each of the 21 bone nodes.
   
   

   image391×192 11.3 KB
8. Let’s edit the tracks. The blue vertical bar indicates the current playback position. It should be at 0 seconds, so drag it to around the middle, approximately 0.6 seconds.
   
   

   image1146×479 36.3 KB
9. Let’s add a simple movement. In the Scene window, select B_Arm_R. This node represents the upper arm bone of the right arm.
10. In the Inspector window, try changing the Rotation under Node2D > Transform. The angle of the right arm should change, causing it to rotate.
    
    

    image1920×649 117 KB
11. Once you’ve decided on an angle, press the icon at the top again. It may seem like nothing happened, but the current rotation value has been saved at the 0.6-second mark.
    
    

    image1042×277 19.8 KB
12. Press the play button. The character’s arm should move slowly from its initial position to the angle where you inserted the key. The movement between the initial position and the specified position is automatically interpolated. Essentially, you create poses like playing with a doll, insert keys, and that becomes an animation.

Continue with the Graphics Course here!

Explanation

Animation Length and Looping
The animation length can be changed using the icon in the top-right corner.
The icon next to it is the loop function. One click enables looping playback, a second click enables ping-pong (back-and-forth) playback, and a third click disables looping.

Using the Added Animation in Visual Script
To use it in Visual Script, you must register it in the Animation Set of the GameObject node.

1. Select Player in the Scene window.
2. Press the Batch Register Animations button in the Inspector.
   
   

   image1903×265 54.1 KB
3. The animation is now registered in the Animation Set and can be used in Visual Script. > You can also expand the Animation Set to see which animations are registered.
   
   

   image330×669 31.9 KB

Extending 2D Bone Animation
This tutorial explains only the most basic operations. Godot’s AnimationPlayer is highly powerful and includes many useful features for handling 2D bone animation, such as IK functions. For more details, please refer to the official Godot documentation below.
https://docs.godotengine.org/en/4.x/tutorials/animation/cutout_animation.html