Create an AnimationPlayer node

To use the animation tools we first have to create anAnimationPlayer node.

The AnimationPlayer node type is the data container for your animations.One AnimationPlayer node can hold multiple animations, which canautomatically transition to one another.

After you create an AnimationPlayer node, click on it toopen the Animation Panel at the bottom of the viewport.

The animation panel consists of four parts:

• Animation controls (i.e. add, load, save, and delete animations)

• The tracks listing

• The timeline with keyframes

• The timeline and track controls, where you can zoom the timeline andedit tracks, for example.

Computer animation relies on keyframes

A keyframe defines the value of a property at a point in time.

Diamond shapes represent keyframes in the timeline. A line between twokeyframes indicates that the value doesn't change between them.

You set values of a node's properties and create animation keyframes for them.When the animation runs, the engine will interpolate the values between thekeyframes, resulting in them gradually changing over time.

The timeline defines how long the animation will take. You can insert keyframesat various points, and change their timing.

Each line in the Animation Panel is an animation track that references aNormal or Transform property of a node. Each track stores a path toa node and its affected property. For example, the position trackin the illustration refers to theposition property of the Sprite2Dnode.

Tutorial: Creating a simple animation

Scene setup

For this tutorial, we'll create a Sprite node with an AnimationPlayer asits child. We will animate the sprite to move between two points on the screen.

Warning

AnimationPlayer inherits from Node instead of Node2D or Node3D, which meansthat the child nodes will not inherit the transform from the parent nodesdue to a bare Node being present in the hierarchy.

Therefore, it is not recommended to add nodes that have a 2D/3D transformas a child of an AnimationPlayer node.

The sprite holds an image texture. For this tutorial, select the Sprite2D node,click Texture in the Inspector, and then click Load. Select the default Godoticon for the sprite's texture.

Adding an animation

Select the AnimationPlayer node and click the "Animation" button in theanimation editor. From the list, select "New" () to add a newanimation. Enter a name for the animation in the dialog box.

Managing animation libraries

For reusability, the animation is registered in a list in the animation library resource. If you add an animation to AnimationPlayer without specifying any particular settings, the animation will be registered in the [Global] animation library that AnimationPlayer has by default.

If there are multiple animation libraries and you try to add an animation, a dialog box will appear with options.

Adding a track

To add a new track for our sprite, select it and take a look at thetoolbar:

These switches and buttons allow you to add keyframes for the selectednode's location, rotation, and scale. Since we are only animating the sprite'sposition, make sure that only the location switch is selected. The selectedswitches are blue.

Click on the key button to create the first keyframe. Since we don't have atrack set up for the Position property yet, Godot will offer tocreate it for us. ClickCreate.

Godot will create a new track and insert our first keyframe at the beginning ofthe timeline:

The second keyframe

We need to set our sprite's end location and how long it will take for it to get there.

Let's say we want it to take two seconds to move between the points. Bydefault, the animation is set to last only one second, so change the animationlength to 2 in the controls on the right side of the animation panel's timelineheader.

Now, move the sprite right, to its final position. You can use theMove tool in thetoolbar or set thePosition's X value in theInspector.

Click on the timeline header near the two-second mark in the animation paneland then click the key button in the toolbar to create the second keyframe.

Run the animation

Click on the "Play from beginning" () button.

Yay! Our animation runs:

Autoplay on load

You can make it so an animation plays automatically when the AnimationPlayer nodesscene starts, or joins another scene. To do this click the "Autoplay on load"button in the animation editor, it's right next to the edit button.

The icon for it will also appear in front of the name of the animation, so you caneasily identify which one is the autoplay animation.

Back and forth

Godot has an interesting feature that we can use in animations. When AnimationLooping is set but there's no keyframe specified at the end of the animation,the first keyframe is also the last.

This means we can extend the animation length to four seconds now, and Godotwill also calculate the frames from the last keyframe to the first, movingour sprite back and forth.

You can change this behavior by changing the track's loop mode. This is coveredin the next chapter.

Track settings

Each property track has a settings panel at the end, where you can set its updatemode, track interpolation, and loop mode.

The update mode of a track tells Godot when to update the propertyvalues. This can be:

• Continuous: Update the property on each frame

• Discrete: Only update the property on keyframes

• Capture: if the first keyframe's time is greater than0.0, thecurrent value of the property will be remembered andwill be blended with the first animation key. For example, youcould use the Capture mode to move a node that's located anywhereto a specific location.

You will usually use "Continuous" mode. The other types are used toscript complex animations.

Track interpolation tells Godot how to calculate the frame values betweenkeyframes. These interpolation modes are supported:

• Nearest: Set the nearest keyframe value

• Linear: Set the value based on a linear function calculation betweenthe two keyframes

• Cubic: Set the value based on a cubic function calculation betweenthe two keyframes

• Linear Angle (Only appears in rotation property): Linear mode with shortest path rotation

• Cubic Angle (Only appears in rotation property): Cubic mode with shortest path rotation

With Cubic interpolation, animation is slower at keyframes and faster betweenthem, which leads to more natural movement. Cubic interpolation is commonlyused for character animation. Linear interpolation animates changes at a fixedpace, resulting in a more robotic effect.

Godot supports two loop modes, which affect the animation when it's set toloop:

• Clamp loop interpolation: When this is selected, the animation stopsafter the last keyframe for this track. When the first keyframe isreached again, the animation will reset to its values.

• Wrap loop interpolation: When this is selected, Godot calculates theanimation after the last keyframe to reach the values of the firstkeyframe again.

Keyframes for other properties

Godot's animation system isn't restricted to position, rotation, and scale.You can animate any property.

If you select your sprite while the animation panel is visible, Godot willdisplay a small keyframe button in theInspector for each of the sprite'sproperties. Click on one of these buttons to add a track and keyframe tothe current animation.

Edit keyframes

You can click on a keyframe in the animation timeline to display andedit its value in theInspector.

You can also edit the easing value for a keyframe here by clicking and draggingits easing curve. This tells Godot how to interpolate the animated property when itreaches this keyframe.

You can tweak your animations this way until the movement "looks right."

Using RESET tracks

You can set up a specialRESET animation to contain the "default pose".This is used to ensure that the default pose is restored when you savethe scene and open it again in the editor.

For existing tracks, you can add an animation called "RESET" (case-sensitive),then add tracks for each property that you want to reset.The only keyframe should be at time 0, and give it the desired default valuefor each track.

If AnimationPlayer'sReset On Save property is set totrue,the scene will be saved with the effects of the reset animation applied(as if it had been seeked to time0.0).This only affects the saved file – the property tracks in the editor staywhere they were.

If you want to reset the tracks in the editor, select the AnimationPlayer node,open theAnimation bottom panel then chooseApply Reset in theanimation editor'sEdit dropdown menu.

When using the keyframe icon next to a property in the inspector the editor willask you to automatically create a RESET track.

Onion Skinning

Godot's animation editor allows you use onion skinning while creating ananimation. To turn this feature on click on the onion icon in the top rightof the animation editor. Now there will be transparent red copies of whatis being animated in its previous positions in the animation.

The three dots button next to the onion skinning button opens a dropdownmenu that lets you adjust how it works, including the ability to useonion skinning for future frames.

Animation Markers

Animation markers can be used to play a specific part of an animation rather thanthe whole thing. Here is a use case example, there's an animation file that has acharacter doing two distinct actions, and the project requires the whole animation,as well as both actions individually. Instead of making two additional animations,markers can be placed on the timeline, and both actions can now be playedindividually.

To add a marker to an animation right click the space above the timeline and selectInsert Marker....

All markers require a unique name within the animation. You can also set the colorof the markers for improved organization.

To play the part of the animation between two markers use theplay_section_with_markers()andplay_section_with_markers_backwards()methods. If no start marker is specified then the beginning of the animation isused, and if no end marker is specified, then the end of the animation is used.

If the end marker is after the end of the animation then theAnimationPlayer willclamp the end of the section so it does not go past the end of the animation.

To preview the animation between two markers useShift+Click toselect the markers. When two are selected the space between them should behighlighted in red.

Now all of the play animation buttons will act as if the selectedarea is the whole animation.Play Animation from Start will treat the firstmarker as the start of the animation,Play Animation Backwards from Endwill treat the second marker as the end, and so on.