Animated Sprites: Creating 2D Animations in Godot

Unlike in the 3D Animation world where we rely on Animation Players that will adjust bones in a character mesh and flow from key frame to key frame… the 2D Animation world utilizes animated sprite sheets. These sprite sheets are 2D images that contain drawn animation frames for each of the characters key movements: running, jumping, idling, etc. The animation frames are typically done at a lower framerate (such as 5-10 fps) since they need to be manually created at each step. The frames are then imported into our game engine and converted into something we can use for an animated sprites.

Thankfully, Godot has the AnimatedSprite2D Node that lets us easily leverage sprite sheets to create compelling animations.

Using a AnimatedSprite2D

The AnimatedSprite2D Node is added to the scene and replaces the normal Sprite2D we might normally use. Immediately, we are met with a warning that this node is missing it’s most important resource: the SpriteFrames.

Fret not about the Warning!

These SpriteFrames are what allow us to select the sprite sheet including the animations we need on it. Additionally, they let us actually define the individual animations. Creating the SpriteFrames will provide an empty resource containing only a “default” animation. From here, you can add frames from a sprite sheet which brings up a dialog to import in the art. The most important thing to keep in mind here is making sure the size and number of slices is set correctly to allow Godot to properly size the cells for our animated sprites. At last you can select the cells that make up your current animation. Any additional animations can be created in the same manner.

Selecting Frames from Sprite Sheet

Calling Animations Through Code

The AnimatedSprite2D Node has a couple of useful built in methods that can be used to control it through a script. In most cases, you’ll use the play() and stop() methods to (like the name implies) start or stop a specific animation. For a “Run” animation, it is as easy as calling play() whenever the character velocity in the X (left/right) direction is not zero. Otherwise, we can call the “Idle” Animation.

Code Snippet to Play Animations

With all this, we now have a very basic AnimatedSprite2D Node dictating animations from our script. If you want to diver deeper into using animated sprites or want to see this in action be sure to check out the video here.