Animations are usually at the core of how we enable the team to enrich our game. As noted in our game example, every time a notable event happens (for example the player dies), we play an empty animation. Even if it's empty, calling an animation is a way to enable the rest of the team to add their content at that point. Animation can not only change the frame of a sprite, or the position and rotation of a bone in 3D, but they can also control any property of any node or resource in your scene tree. The rule is: if it's a property, and can be edited within the Editor, it can be animated. Animations can, for example, play sounds, fire off particle systems, move around UI elements, and even enable/disable them, change gameplay properties (exported via GDScript with the
In this example we will describe how to create the animation for the flying bat.
There are two methods to animate a sprite:
- using more than one image
- using a Sprite Sheet (several frames of the animation into one file)
Animation with a sprite
Let's try first with the sprite node.
- Open the scene concerned by the animation.
- Select the sprite node of the bat.
- Go to the Inspector.
- If your scene has multiple animations, select the animation concerned by your customization on the dropwdown menu at the bottom of the central windows.
- First, load your sprite on Texture.
- See especially Vframes,
Hframes and Frame. For this bat we have 3 frames disposed horizontally. So, set VFrames to 1, HFrames to 3 and Frame to 2 (frame 0, frame 1 and frame 2).
When you change the Frame property, with values 0, 1, or 2, you will see the different images appear in the editor.
Remember that each frame on the Sprite Sheet needs to be the same width, and the total width of the image will be the width of all your frames (same with height, if you have more than one row and use the VFrames property). This way Godot will show a different bat for each value of Frame, 0, 1 and 2.
Now, we have to customize the animation.
Your animation will consist of a timeline, and multiple tracks. Each track points to a node in your scene, and a property from that Node. Along the timeline, you will add keyframes with values for that peoperty. The animation can have multiple tracks that control mutiple nodes in the same timeline.
- Press the button located in the top right of the animation editor panel. This will display the time line. We will indicate which image to use depending on the timestep of the animation.
- We want the bat fly animation to be over one second and then loop indefinitely. So let's add the first keyframe at second 0. When you are editing an animation, a key icon will appear next to the value of each property in the Inspector panel for all your nodes. Verify that you are on the Sprite node, and locate the Frame property. At Frame 0, and a timestep of 0, click on the key icon in the Inspector. Godot show a blue point in the animation editor to indicate that a keyframe was added.
- We have 3 images on this sprite, so let's distribute the other frames of the bat as we want. In this example, we put frame 1 at 0.25, and frame 2 at 0.7.
Godot offers two options to customize the rythm of the animation: Discrete or Continuous. These options are located on the bottom left of each track.
- Discrete: a discrete track will set the value of each property when it reaches a keyframe on the timeline (as you would normally expect from an animation). When the time of the animation is in between 2 keyframes, nothing happens to the property. This is useful for properties such as our Bat's frame, or properties with types of values that can't be interpolated, such as booleans (for example, the visibleproperty of a sprite; remember, any property can be animated)
- Continuous: in continuous mode, the value of the property is constantly being updated, with an interpolation between the 2 keyframes around the current time of the animation. This is useful when we want properties to transition smoothly, for example when creating a fade-in animation, set the transparency of the sprite to 0 at the start of the animation, and 1 at the end. The value will be updated on every frame in between.
Test your animation with the play button of the animation editor (and stop it with the stop button).
A few tips to remember:
- Keep in mind what is the sequence of animations that will be played, and what is the status of your tracks left by the previous animation. For example, if you have an animation that hides a sprite at the end (eg a death animation), the node will remain invisible when you play the next animation (eg a fly animation). You might need to initialize the value of those tracks even if it's not relevant to that specific animation.
- In the case of our bat animation, if you have multiple sequence (for example fly and death), you can add all the frames to the Sprite Sheet, and use a different group of frames for each animation. Or you can assign the value of the Texture property on the Sprite node at the start of each animation, with a different Sprite Sheet. Remember, the Texture of the Sprite is a property, and all properties can be animated.