Introduction to Godot’s AnimationPlayer

Animation Tracks

You can find the tracks on the left side of the Animation panel. These tracks are grouped per affected node by default.

The Add Track button allows you to create a new track and add it to the animation. Clicking this button opens a big list of different track types.

Here’s an overview of the different track types:

• Property Track: This is the most common track type and it’s the one you’ve been using up until now. It allows you to change a node’s properties over time.
• Position 3D / Rotation 3D / Scale 3D Track: These tracks allow you to change the position, rotation and scale of a 3D node over time. These are used to import animations from external 3D models.
• Blend Shape Track: Like the previous track type, the main purpose of this one with externally imported 3D models. It allows you to change the blend shapes of a MeshInstance3D node over time.
• Call Method Track: This allows you to call functions on a node. It’s useful to sync method calls in animations, like enabling/disabling colliders during a weapon swing.
• Bezier Curve Track: This works like a Property Track, but it uses Bezier curves to control the shape of the curve.
• Audio Playback Track: This allows you to play audio files over time and visually shows the audio levels to make it easier to sync the audio to actions.
• Animation Playback Track: This allows you to control animations of other AnimationPlayer nodes. It’s useful for orchestrating in-game cut-scenes for example.

Timeline

The timeline is a representation of an animation over time.

At the top of the timeline is the timeline header which shows the current position of the animation in seconds. Below that are the keyframes.

Timeline Controls

Below the timeline are the timeline controls.

From left to right:

• Bezier Curve toggle: Toggles between the Bezier curve view and the regular track view when any Bezier Curve Tracks are present.
• Node filter button: Enabling this will only show the tracks for selected nodes.
• Snap toggle: Toggles whether keyframes are snapped in increments or not.
• Snap interval: The amount of time in seconds between keyframe snaps.
• Seconds / FPS dropdown: Toggles between viewing an animation in seconds and frames per second.
• Zoom slider: Zooms in and out of the timeline.

Now you’re up to speed with the Animation panel, it’s time to create another common type of animation using more of the track types.

Creating a Cutout Animation

For the last animation, you’ll be creating a cutout animation. This means pieces of an object or character laid on top of each other and moved around to create an animation. This technique has been around since the start of animation in general. In physical media, people draw character pieces on a piece of paper or cardboard, cut them out and attach the pieces with pins or wires.

In this section, you’ll be animating a robot arm with a drill attached at the end. This robot arm consists of separate sprites that come together to create the object.

By rotating the pieces over time, it will give the illusion of a drill animation.

Inspecting the Robot Arm

The robot arm itself is already a part of the scene, but it’s hidden. Click the eye icon next to the Robot Arm node in the Scene tree to reveal it.

You’ll now see the arm appear in the viewport.

Now take a look at the scene tree and fully expand the robot arm’s child nodes.

At the root is a Node2D that’s used to easily move the whole construction around. Below that is a chain of sprites that make up the arm.
The most important nodes here are Part1, Part2 and End. Each of these will have their rotation animated, so careful consideration was put into their pivot points. Select Part1 for example and take a closer look.

The pivot point is marked with a little red cross. The sprite will rotate around it. If you rotate Part1 in the editor, you’ll see that it pivots around the base of the arm.

Remember to undo the rotation when you’re done. When creating these chains of sprites yourself, you’ll need to edit the pivot points, as they’re at the center of the sprite by default. To do this, you can hold down the V key while moving your cursor in Select Mode (Q). In the case of the robot arm, this has already been set up, but feel free to give it a try!

The Drill Block

There’s another hidden node below the Robot Arm, a Block. Click the eye icon next to it like you did for the Robot Arm to see it.
This is an AnimatedSprite2D node with three frames to make it seem like it’s being drilled into.

You’ll be using this block alongside the robot arm to give the illusion of drilling away material.

Animating the Robot Arm

To get started with the robot arm animation, create a new AnimationPlayer node in the root of the scene and name it RobotArmAnimationPlayer. Now select this new node and you should see an empty Animation panel. Next, create a new animation using the button in the Animation panel. Name this animation move_arm.

Next, move the time slider start of the timeline and rotate the Part1, Part2 and End nodes until the arm looks the image below.

The exact rotations are:

• Part1: 15 degrees
• Part2: 75 degrees
• End: 90 degrees

When you’re done, add an initial Rotation keyframe for each of the nodes by clicking the key button in the Inspector. You should now have three animation tracks, one for each node.

Making The Animation Loop

Now change the animation length to 2.5 seconds and enable looping by clicking Animation Looping button in the Animation panel. Also enable the Autoplay on Load button while you’re editing the settings. This gives some headroom to the animation and loops it.

To make sure the arm parts move back to their initial position, you’ll need to duplicate the existing keyframes to the end of the animation. To do this, select the three keyframes at the start of the animation by dragging a bounding box around them. Now move the time slider to the 2.5 second mark and press CTRL/CMD-D to duplicate the keyframes.

Doing this ensures that the animation will be a smooth loop where the arm moves back to its original position.