Animation in Godot – Complete Guide

Animation brings games to life, transforming static scenes into dynamic storytelling platforms that captivate and delight players. The power to orchestrate movement, control sequences, and craft interactions lies at the fingertips of every game developer through the use of animation tools. Here, we will delve into the essential mechanics of the Animation class in Godot 4, a class designed for both beginners and seasoned developers looking to give soul to their creations within Godot’s versatile engine.

What Is the Animation Class in Godot 4?

The Animation class in Godot 4 is a fundamental part of the engine that allows developers to create complex, timed animations for any object or node within their projects. It doesn’t just animate spatial transformations; it can change any property of a node over time, including colors, variables, or even call methods to trigger custom behavior.

What Is This Class for?

This class is invaluable for Game Development, as it provides the structure for crafted sequences that react to in-game triggers or scripted events. Whether you’re creating the delicate flap of a butterfly’s wings or coordinating the dramatic entrance of a stage’s final boss, the Animation class is your multi-purpose tool for in-game motion.

Why Should I Learn It?

Mastering the Animation class not only enhances the visual appeal and professionalism of your game but also opens a world of possibilities for player interaction and gameplay mechanics. It’s a skill that stands at the core of game development, helping bring static sprites and objects to life with fluent and responsive motions that enrich the gaming experience.

CTA Small Image
FREE COURSES AT ZENVA
LEARN GAME DEVELOPMENT, PYTHON AND MORE
ACCESS FOR FREE
AVAILABLE FOR A LIMITED TIME ONLY

Creating a Simple Animation

Let’s kick off by creating a straightforward animation that moves a sprite across the screen. This introduces you to the basics of setting up an Animation in Godot 4.

var anim = Animation.new()

anim.add_track(Animation.TRACK_TYPE_VALUE)
anim.track_set_path(0, "Node2D:position")
anim.track_insert_key(0, 0, Vector2(0, 0))
anim.track_insert_key(0, 1, Vector2(100, 100))
anim.length = 1.0

This code: initializes a new Animation, adds a value track for the node’s position, inserts a keyframe at the start and endpoint of a 1-second motion from position (0, 0) to (100, 100), and finally sets the animation length to 1 second.

Adding Animation to an AnimationPlayer

Animations are not much use without an AnimationPlayer to play them. This snippet demonstrates how to add our animation to an AnimationPlayer node.

var animation_player = $AnimationPlayer
animation_player.add_animation("move_sprite", anim)

This creates a reference to the AnimationPlayer node and then adds our “anim” animation to it, naming it “move_sprite”.

;

Playing the Animation

Now, let’s play our animation. The following code will trigger the “move_sprite” animation once the scene starts.

func _ready():
    $AnimationPlayer.play("move_sprite")

This function is called when the node is added to the scene. The AnimationPlayer’s play() method is used to start the animation by its name.

Controlling Animation Playback

In practice, you’ll need finer control over the animation playback. Let’s look at how you can play an animation backwards, set its playback speed, and loop an animation.

// Play the animation in reverse
$AnimationPlayer.play("move_sprite", -1.0)

The second parameter in the “play” method defines the playback speed. Giving it a value of -1.0 makes the animation play in reverse.

// Play an animation at double speed
$AnimationPlayer.play("move_sprite", 1.0, 2.0)

Similar to the previous example, the third parameter adjusts the playback speed. Here we set it to double speed with a value of 2.0.

// Loop the animation
$AnimationPlayer.get_animation("move_sprite").loop = true
$AnimationPlayer.play("move_sprite")

Before playing the animation, we access it through the AnimationPlayer and set its loop property to true. This will cause the animation to loop indefinitely until stopped manually.

Continuing with our exploration of the Animation class in Godot 4, we’ll dive deeper into more advanced features that give you precise control over your animations. These examples will illustrate various methods and properties that can significantly enhance the functionality and versatility of your animations.

Let’s start with combining multiple tracks within a single animation to create more complex sequences.

// Adding a rotation track to our existing animation
anim.add_track(Animation.TRACK_TYPE_VALUE)
anim.track_set_path(1, "Node2D:rotation_degrees")
anim.track_insert_key(1, 0, 0)
anim.track_insert_key(1, 1, 360)

Here, we add a new track to rotate our Node2D 360 degrees over the duration of the animation while it also moves position.

Next, we’ll look at how to call a method at a specific time in the animation:

// Adding a function call track to our animation
anim.add_track(Animation.TRACK_TYPE_METHOD)
anim.track_set_path(2, "Node2D:my_custom_method")
anim.track_insert_key(2, 0.5, 'my_custom_method')

In this example, we’re adding a method call track. This will call the `my_custom_method` on the Node2D at the halfway point of our animation.

Now, let’s adjust the way an animation interpolates between keyframes with different easing methods:

// Change the interpolation type of a keyframe
anim.track_set_key_transition(0, 1, Animation.TRANS_CUBIC)

This modifies the interpolation between the first and second keyframes of the position track. Here we set a cubic transition for a smoother start and finish.

We can also blend animations together:

// Blend two animations on an AnimationPlayer
$AnimationPlayer.play("move_sprite")
$AnimationPlayer.play("rotate_node", 0.5, 1.0, true)

In the snippet above, we’re starting to play two animations on our AnimationPlayer. The second animation “rotate_node” is played with a blend time of 0.5 seconds, meaning it will gradually mix with the first animation over half a second.

It might also be necessary to respond when an animation finishes, which we can do using signals:

// Connect to the animation_finished signal
func _ready():
    $AnimationPlayer.connect("animation_finished", self, "_on_AnimationPlayer_animation_finished")

func _on_AnimationPlayer_animation_finished(anim_name):
    print("Animation finished: " + anim_name)

The code connects the `animation_finished` signal from the AnimationPlayer to a custom method in our script. When any animation finishes, the method `_on_AnimationPlayer_animation_finished` is called with the name of the animation that finished, allowing us to perform further actions.

Lastly, we will see how to modify an animation during runtime:

// Change the endpoint of our position track after the game starts
func _ready():
    var anim = $AnimationPlayer.get_animation("move_sprite")
    anim.track_set_key_value(0, 1, Vector2(200, 200))

This piece of code changes the destination of the “move_sprite” animation to a new location. We access the animation via the AnimationPlayer, then update the value of the second keyframe in our position track.

With these code examples, you should have a strong foundation for animating your projects in Godot 4. Remember to experiment with different properties and methods of the Animation class to discover the full range of creative possibilities it offers.

As we further explore the Animation class in Godot 4, we’ll delve into advanced manipulation of tracks and keys, and how to create responsive animations that can dynamically adjust to changes in gameplay.

Let’s start by making a track that changes the color of a sprite:

// Add a color track to change the sprite's color
var color_track_idx = anim.add_track(Animation.TRACK_TYPE_VALUE)
anim.track_set_path(color_track_idx, "Sprite:modulate")
anim.track_insert_key(color_track_idx, 0, Color(1, 1, 1, 1)) // White
anim.track_insert_key(color_track_idx, 1, Color(1, 0, 0, 1)) // Red

In this snippet, we add a value track that targets the ‘modulate’ property of a Sprite node, which allows us to interpolate the sprite’s color from white to red over the duration of the animation.

It’s important to know how to remove keys and tracks if needed. Here’s how to remove a specific key from a track:

// Removing a key from a track
anim.track_remove_key(track_idx, key_idx)

Simply specify the track index and the key index that you wish to remove. This could be useful for dynamic animations that need to adapt during runtime.

Animating properties of a Camera node can create dynamic effects in a game, such as a smooth zoom or camera shake. Here’s a code snippet to animate the Camera zoom:

// Add a zoom track to animate the Camera2D's zoom
var zoom_track_idx = anim.add_track(Animation.TRACK_TYPE_VALUE)
anim.track_set_path(zoom_track_idx, "Camera2D:zoom")
anim.track_insert_key(zoom_track_idx, 0, Vector2(1, 1)) // Normal zoom
anim.track_insert_key(zoom_track_idx, 1, Vector2(2, 2)) // Zoom in

With this, the Camera2D will smoothly transition from a normal zoom level to a zoomed-in view.

Responding to user input can also be part of an interactive animation. Here’s how to start an animation when a key is pressed:

// Play an animation when the spacebar is pressed
func _input(event):
    if event is InputEventKey and event.pressed and event.scancode == KEY_SPACE:
        $AnimationPlayer.play("jump_animation")

This the `_input` function reacts to the pressing of the spacebar key by starting the “jump_animation”.

Animations can also be used to transition between scenes or UI states. Here’s a simple way to fade out a scene with an animation that adjusts the alpha value of a ColorRect that covers the entire screen:

// Adjusting the alpha value of a ColorRect to create a fade-out effect
var fade_track_idx = anim.add_track(Animation.TRACK_TYPE_VALUE)
anim.track_set_path(fade_track_idx, "ColorRect:color")
anim.track_insert_key(fade_track_idx, 0, Color(0, 0, 0, 0)) // Fully transparent
anim.track_insert_key(fade_track_idx, 1, Color(0, 0, 0, 1)) // Fully opaque

This technique is perfect for non-intrusive transitions within your game.

Sometimes, you might want to synchronize an animation with an audio track. To do this, use an AudioStreamPlayer node. Here’s a mini-tutorial on how to start an audio stream at a specific point in an animation:

// Adding an AudioStreamPlayer playback as part of an animation sequence
var audio_track_idx = anim.add_track(Animation.TRACK_TYPE_METHOD)
anim.track_set_path(audio_track_idx, "AudioStreamPlayer:play")
anim.track_insert_key(audio_track_idx, 0.5, [0.0]) // Starts half a second into the animation

This will trigger the `play` method on the AudioStreamPlayer node half a second after the animation starts.

Animators should also know about animation dependencies. For example, to ensure the animation adjusts if the scene structure changes:

// Reassign track's node path if the scene's structure changes
anim.track_set_path(track_idx, "NewNodePath:property")

If nodes were restructured in the scene tree and the animation lost reference to the initially animated node, you can update the node path with `track_set_path` method to rectify it.

With these additional examples, you are well-equipped to handle a wide range of animation scenarios in Godot 4. Animations are integral to the storytelling and gameplay mechanics in any interactive medium like games, and mastering the Animation class in Godot can be a game changer for any developer.

Where to Go Next

Now that you’ve begun your journey with the Animation class in Godot 4, the road to mastering game development stretches out before you, filled with opportunities to learn and create. To take your skills to the next level and explore the endless possibilities of game creation, check out our Godot Game Development Mini-Degree. This comprehensive collection of courses is designed to cover all aspects of game development using the powerful and user-friendly Godot 4 engine.

Whether you’re a beginner looking to understand the basics or an experienced developer eager to polish your skills, our Mini-Degree provides a structured learning path complete with real Godot projects that you can add to your portfolio. With Zenva, you have the flexibility to learn at your own pace, anytime, anywhere, to turn your game development dreams into reality.

For those who aim to expand their knowledge even further, we offer a broad range of Godot courses that delve into various mechanics, techniques, and game genres. Continue your learning adventure with us at Zenva, where we’re committed to helping you grow from novice to pro in the exciting world of game development.

Conclusion

Animation is the heartbeat of any memorable game. Through the Animation class in Godot 4, you possess the tools to breathe life into your virtual worlds, making your games not only functional but also storytelling masterpieces. Remember, every great game developer started with a single step, and each animation you create is a leap towards mastering the art of game design.

At Zenva, we believe in turning your passion for games into the skill to create them. Embark on your game development journey with our Godot Game Development Mini-Degree, where each tutorial brings you closer to becoming the developer you’ve always aspired to be. Let’s bring your game ideas to life, one frame at a time!

FREE COURSES
Python Blog Image

FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.