Godot 101 - Part 11: Animated Sprites
Sun, Apr 9, 2017
This is part 11 of “Godot 101”. In this installment, we’ll add animation to the player character. If you haven’t already read through the previous parts, please start with Part 1.
About this series
Godot 101 is an introduction to the Godot game engine and how it works. If you’ve never used a game engine before, or if you’re just new to Godot, this is the place to start. If you’re new here, a quick note about this website: we’re called KidsCanCode because we teach programming and game development to kids, but if you’re an adult you’re welcome here, too. We don’t believe in dumbing-down the material for kids, and game development is hard - so it will probably be challenging no matter what your age.
You can watch a video version of this lesson here:
Animated Sprites
In the art folder are animations for idle, running and jumping, and we’d like to use those animations on the player sprite. However, a Sprite node can only use one texture at a time. Instead, we’ll use an AnimatedSprite.
Instead of creating a new node, we can convert the current one. In the player scene, right-click on the sprite node and choose Change Type.
The texture disappears and now we have a warning:
An AnimatedSprite must have a SpriteFrames resource defined. This resource will contain all the properties of the animation (frames, rate, etc). In the Inspector, click the down arrow next to Frames and choose New SpriteFrames.
Next, click the right arrow > and a new panel will open:
Click to enlarge
On the left, you can define multiple animations. On the right will be the individual frames, arranged in order. You can also specify whether the animation should loop, and at what speed it should run.
Change the default animation name to idle, and drag the two frames of the idle animation from the FileSystem tab into the Animation Frames box. Make sure Loop is set to On .Now click back on the sprite node and check the box next to the Playing property. Our sprite is now animated!
The default speed is a little fast, so feel free to adjust the Speed parameter; 3 works pretty well.
Next, to add the running animation, just click the new button and name the new animation running. Drag the 6 running animation frames into Animation Frames. 8 works well for the Speed here.
Choosing Animations
Now in the player.gd we can specify which animation to play, and which direction to face (using the Flip H property).
onready var sprite = get_node("sprite")
var anim = "idle"
func _fixed_process(delta):
# set animation
if vel.x == 0:
anim = "idle"
else:
anim = "running"
if vel.x > 0:
sprite.set_flip_h(false)
elif vel.x < 0:
sprite.set_flip_h(true)
sprite.play(anim)First we choose which animation based on the player’s vel.x and use the direction to select whether to flip the image. However, when you run this you will notice that when the player stops moving, it doesn’t switch back to the idle animation. This is because while friction is reducing the vel.x, it’s a floating point number and never actually reaching 0. We can fix that by setting the speed to 0 if it falls below a certain value. Add the following to fixed_process() after the movement code:
if abs(vel.x) < 10:
vel.x = 0Platform Images
Let’s change the appearance of the platforms as well. Instead of the plain green square, we can use this nice grass block image:
Drag it from the art folder onto the Texture property. Oh no! This doesn’t look good:
We can’t scale this block, so change the Scale property back to (1, 1). Now we can see the 64x64 block, but we’d like to be able to make the platforms as wide as we like. Here’s how we do that:
First, click the > next to Texture and in Flags make sure Mipmaps and Repeat are checked.
Next, check the box labeled Region. The grass block will disappear, but that’s OK, we still need to fill in the Region Rect, which is right now set to (0, 0, 0, 0). This will be how we choose the size of our platform. Set the height (h) to 64 and the width (w) to 64*10 (did you know you can type math expressions in property fields?).
Finally, choose the collision node and adjust the size to match the new image.
Background Image
Finally, let’s add a background image. Go to the main scene and add a Sprite. Make sure it’s at the top of the tree (right under main), so it will be behind the other objects. Name this node background and drag the background image into the Texture.
Click to enlarge
This image is quite large, so set the scale to (0.5, 0.5) (or whatever you like).
Wrapping Up
AnimatedSprite nodes are a great way to add animation to your character (there are other ways, which we’ll get to later).