How to make Animation with AnimatedSprite2D

One of the simplest ways to make animation in Godot is to use AnimatedSprite2D node. Unlike AnimationPlayer which uses Animation Resource and has more complex algorithm to animate different properties of an object, AnimatedSprite2D is devoted exclusively for sprite animation using SpriteFrames Resource. It's main advantage - it does the job well and it's easy to set up.

In Godot 3.5 the same node is called AnimatedSprite. It does pretty much the same thing and it's configured the same way.

CONTENT

• AnimatedSprite2D frames and SpriteFrames editor Panel
  • Preparing the Scene and SpriteFrames
  • SpriteFrames configuration using Editor Panel
• GDScript. Play the animation and queue_free() when animation_finished
• An example of how to use AnimatedSprite2D animation in a project
  • Animation launching object
  • Dealing with the data in Main
• Summary

AnimatedSprite2D frames and SpriteFrames editor Panel

Let's make an explosion animation. I have 6 frames of the explosion which I'm going to upload to Godot project folder and use as frames of aforementioned SpriteFrames in AnimatedSprite2D.

Preparing the Scene and SpriteFrames

Create a new scene and add AnimatedSprite2D node to it. You'll see a warning next to the node in Scene dock:

The warning notifies that for animation to work SpriteFrames resource has to be added to AnimatedSprite2D.

Click on the node, go to its Inspector dock, unfold Animation category and create a new resource by clicking on empty, next to the Frames property, and then - New SpriteFrames in the popped up menu:

An empty resource will appear in the property value field.

Once it's done the warning sign will disappear. Now, let's move on to the frames setup.

SpriteFrames configuration using Editor Panel

This is how it works: first you upload the images to a folder in the project and then add them to SpriteFrames resource using its Panel.

Drag and drop the frames you want to use from OS folder to a folder in FileSystem dock:

Go to Inspector dock and click on the newly created SpriteFrames. The Panel will get opened at the bottom section of Godot editor.

There're 2 sections in this Panel:

• Left: add/delete animation, animations list, animation speed (frames per second) and looping settings
• Right: different settings to deal with frames within each animation in the left section

Rename the default animation or create a new one (Ctrl+N) by clicking on the add animation button . Change its name to, let's say, "explosion". Click on it and then drag and drop the images you uploaded earlier from FileSystem dock to the right section of the Panel. You can also use a folder button in the instruments for that - :

Adjust animation speed by setting it to 12FPS.

To check whether it's working already, make sure you're in the 2D Mode, turn on the loop, go to Inspector dock and set the playing property to 'on' by checking its check box. If everything's alright, un-check the box and turn the looping back off.

In AnimatedSprite2D Inspector dock, under Transform subcategory there is a scale property which you might need later to adjust the dimensions of this scene to make it look organic in the project.

Rename AnimatedSprite2D to Explosion and save the scene.

GDScript. Play the animation and queue_free() when animation_finished

Add a new script file to the scene ( ) and save it to folder. Go to Node dock and click on animation_finished signal. Connect it to your script by pressing Connect button . Confirm connection in the window that pops up.

A new function will be created in the script. It'll be called once the animation's finished playing. The explosion happens one at a time and then gets deleted with queue_free():

# Explosion script. Signal
func _on_animation_finished():
	queue_free()

The next thing to do is to make it actually play. Because it's a separate scene devoted exclusively to this animation you may just simply play it once the node starts being processed by the engine. Write the following under the _process() method:

# Explosion script. Playing animation
func _process(_delta):
	play("explosion")

delta argument isn't used here. Notify Godot about this fact by the underlining before the argument between the parentheses.

Save everything with Ctrl+S.

An example of how to use AnimatedSprite2D animation in a project

Take a look at that gif image down below. This is from my recent tutorial on how to execute shooting in Godot 4 and 3.5. Explosions happen when bullets hit those blocks. The process "under the hood" is quite straightforward:

• At the moment of collision with a block a bullet sends signal and then gets deleted
• The signal also "carry" 2 additional arguments with it: Explosion PackedScene (exported in the bullet scene) and bullet's position at the moment
• (You can also add a third argument - bullet's rotation and use it to rotate the explosion. I don't though)

Animation PackedScene resource can be added to Main directly and then you can just use it anywhere in the script, but it makes more sense to let the object, that causes an explosion, to hand over that animation, especially if there are several of them (bullet can hit rocks, iron, wood and the effects might look different).

Head over here to build a bullet scene if you need one. Meanwhile I'm going to explain what are the next steps to take assuming you already have a scene set up.

Animation launching Object

I'll use bullet object as an example so I don't have to constantly refer to some abstract non-existent thing.

The first step we need to take is to assign the scene (explosion.tscn) to exported variable in the bullet's script. In your variables declaration section (script's top, under extends...) of bullet's script write this piece of code:

# Bullet script. Exporting explosion packed
@export var hit_explosion: PackedScene

In Godot 3.5:

# Bullet script. Exporting explosion packed
export (PackedScene) var hit_explosion

Drag and drop the explosion scene file from FileSystem dock onto a newly created Hit Explosion property value field in the Inspector:

Now, that PackedScene file can be sent to be added as a new node anywhere in the project.

Let's declare a new signal first and then attach explosion to that signal as an argument on emitting. User added signals are declared in the same section with the script variables.

signal explosion

Send the signal with emit_signal()

# Bullet script. Explosion signal's being sent
emit_signal("explosion", hit_explosion, get_position())

When sending a signal the first argument must be existing signal name (as a string) and the rest is additional data you want to attach to that signal. In this case, I add hit_explosion (PackedScene resource) and bullet's position acquired with get_position() Node2D Class method.

Dealing with the data in Main

The finishing part of this process is to inform your Main scene about the explosion which has to take place when the bullet "says so". There must be a piece of code that adds a bullet to Main - mine looks like this:

# Main. Add bullet
func bullet_spawn(spawn_pos, spawn_rot):
	var b = bullet.instantiate()
	b.start(spawn_pos, spawn_rot)
	b.connect("explosion", Callable(self, "explosion"))
	$Bullets.add_child(b)

In Godot 3.5:

# Main. Add bullet
func bullet_spawn(spawn_pos, spawn_rot):
	var b = bullet.instantiate()
	b.start(spawn_pos, spawn_rot)
	b.connect("explosion", self, "explosion")
	$Bullets.add_child(b)

b.connect("explosion", Callable(self, "explosion")) line connects explosion signal from the bullet scene to explosion() function in Main script. The function receives 2 arguments - objects (explosion Packed Scene) and expl_position (bullet position at the moment).

Callable(object, "function name") is a built-in Class in Godot 4 which provides a way to refer a certain function with its string name and location. The function can also be saved to a variable.

In Godot 3.5 connect() method does pretty much the same except there's no Collable(), you just need to provide object and a string function name as the second and the third arguments.

Finally, here is the explosion() in Main:

# Main scene. Adds an explosion scene to Main 
func explosion(object, my_position):
	# var e = object.instance() in Godot 3.5
	var e = object.instantiate()
	e.position = my_position
	add_child(e)

Run the Main scene by pressing F5 and check whether things are working properly.

Summary

That's about it guys. Please share your experience in the comments on using AnimatedSprite2D node in your own projects. Godot's also got AnimationPlayer and Animation resource to create animations. Additionally, there's also Tween node.

This explosion can be made using sprite sheet texture in Sprite2D and AnimationPlayer which plays animations. It would take a little more time and efforts though. Making this kind of short-lived animated scenes is much more convenient and faster with AnimatedSprite2D.

If you find this article useful, follow me on Instagram for more tips and learning materials.