Up to date

This page is up to date for Godot 4.0. If you still find outdated information, please open an issue.

2D sprite animation

Introduction

In this tutorial, you'll learn how to create 2D animated characters with the AnimatedSprite2D class and the AnimationPlayer. Typically, when you create or download an animated character, it will come in one of two ways: as individual images or as a single sprite sheet containing all the animation's frames. Both can be animated in Godot with the AnimatedSprite2D class.

First, we'll use AnimatedSprite2D to animate a collection of individual images. Then we will animate a sprite sheet using this class. Finally, we will learn another way to animate a sprite sheet with AnimationPlayer and the Animation property of Sprite2D.

Note

Art for the following examples by https://opengameart.org/users/ansimuz and tgfcoder.

Individual images with AnimatedSprite2D

In this scenario, you have a collection of images, each containing one of your character's animation frames. For this example, we'll use the following animation:

You can download the images here: 2d_sprite_animation_assets.zip

Unzip the images and place them in your project folder. Set up your scene tree with the following nodes:

Note

The root node could also be Area2D or RigidBody2D. The animation will still be made in the same way. Once the animation is completed, you can assign a shape to the CollisionShape2D. See Physics Introduction for more information.

Now select the AnimatedSprite2D and in its SpriteFrames property, select "New SpriteFrames".

Click on the new SpriteFrames resource and you'll see a new panel appear at the bottom of the editor window:

From the FileSystem dock on the left side, drag the 8 individual images into the center part of the SpriteFrames panel. On the left side, change the name of the animation from "default" to "run".

Use the "Play" buttons on the top-right of the Filter Animations input to preview the animation. You should now see the animation playing in the viewport. However, it is a bit slow. To fix this, change the Speed (FPS) setting in the SpriteFrames panel to 10.

You can add additional animations by clicking the "Add Animation" button and adding additional images.

Controlling the animation

Once the animation is complete, you can control the animation via code using the play() and stop() methods. Here is a brief example to play the animation while the right arrow key is held, and stop it when the key is released.

GDScriptC#