From a humble walk to giant bosses and fancy UI elements, video games are all about animations! In Godot, you can create animations using the AnimationPlayer node and a flexible animation system allowing you to create your own animations using a timeline. You can make nodes move, change color, make sounds or anything else over time in Godot.
In this article, you will learn how animations in Godot work and how to create your own using the AnimationPlayer node. Here’s a summary of what you’ll learn:
- Animate the position and color of a sprite
- Get familiar with the AnimationPlayer node and the Animation panel
- Create a cutout animation
- Use other track types to orchestrate animations and play sound effects
The end result of this tutorial will be an animated title card and a robot arm that drills into a block.
Getting Started
To get started, download the project materials via the Download Materials link at the top and bottom of this page. Next, import and edit the starter project in Godot.
Main Scene
Once the project is loaded, you’ll be greeted by the main scene, which consists of a Background sprite and two hidden nodes for later use: a Robot Arm and a Block.
If you run the project, you should see just the background sprite.
File Overview
Now take a look at the FileSystem tab to see the included resources.
Here’s an overview of the files and folders:
- scenes: Contains the main scene
- scripts: There’s a single script here used to animate the hidden Block node
- sounds: This folder holds the drill sound effect for the robot arm
- sprites: All sprites used throughout the project, including the parts of the robot arm and the background
- credit.txt: Credits for the project assets
- icon.svg: The default icon for the project
Now you have a grasp of what the project looks like, you’re ready to know more about the AnimationPlayer node!
What is an AnimationPlayer?
The AnimationPlayer node holds animations and allows you to play, pause, and stop them. It can manipulate the properties of nodes in the scene and interpolate them over time. For example, you can move a sprite, make characters blink and change the material of a mesh.
This node is one of the more powerful ones in Godot, and you’ll find uses for it in almost every project. Combined with the Animation panel, the AnimationPlayer node gives you the tools you need to create your own animations.
Animation Essentials
For your first animation, you’ll be animating the position and color of a title sprite so it moves into the screen and fades out.
This will cover the basics of how to create an animation from scratch.
Preparing the Scene
First up, you’ll need the sprite for the title card. Add it to the scene as a child of the Main root node by dragging the title.png from the sprites folder into the viewport.
Select the new Title node this created and change its position to (X: 630, Y: 160) via the Inspector so it’s at the top of the screen.
With the title in place, you can create an AnimationPlayer node. Go ahead and create a new AnimationPlayer node as a child of the Main root node. To do this, right-click the root node and select Add Child Node… in the context menu.
Next, filter for AnimationPlayer in the search bar at the top and double-click the AnimationPlayer option to add it to the scene.
To keep track of its purpose, rename this new AnimationPlayer node TitleAnimationPlayer.
Select the TitleAnimationPlayer node and you should see the Animation panel opening at the bottom of the editor.
This is where the magic happens! In the next section you’ll be creating the animation itself.
Creating the Animation
Create a new animation by clicking the Animation button in the Animation panel and selecting New.
A dialog window will pop up asking for the name of the animation. Enter title as the name and click OK to create the animation.
The timeline will now be shown in the space below the Animation button.
The title animation will take 2 seconds to complete, so change the animation length to 2 seconds at the far right of the animation panel, next to the clock icon.
Adding Keyframes
Everything is now ready to start adding keyframes. Keyframes are points in time in the animation where a value changes. The animation will interpolate between these keyframes over time.
To show how this works in practice, select the Title node in the scene and take a look at the Inspector. With the Animation panel opened, you’ll see key buttons next to node properties.
These buttons will add a keyframe to the animation at the current position in the timeline. Click the keyframe button next to the Position property to give it a shot. After doing so, you’ll see a dialog window asking you if you want to create a new track and a key.
An animation track is a collection of keyframes. You’ll need a separate track for each property you want to animate. That way, you can animate multiple properties at the same time.
There are two checkboxes here: Use Bezier Curves and Create RESET Track(s). The former will enable bezier curves for the animation track, which will give you handles to control the shape of the curve to fine tune the animation. The latter will create an extra RESET animation with the same property track that will reset the property to its default value.
You can keep both checkboxes at their default values here, as you won’t be needing bezier curves. Click Create to create the animation tracks.
Now take another look at the Animation panel. As you can see, there’s a track now for the Position property of the Title node. There’s also a keyframe now at the start of the timeline, represented by a diamond shape.
A single keyframe won’t do anything, so you’ll need to add another to create an animation. To do so, you’ll need to set the time where you want your new keyframe to be added. Move the time slider to 0.8 second mark by dragging your cursor on the timeline header (the numbers at the top) or by setting it directly in the animation position property at the top left. If you want to see smaller increments on the time header, hold the CTRL/CMD key and scroll up.
