Introduction to Godot’s AnimationPlayer

Learn how to create animations in Godot using the AnimationPlayer node. Animate sprites, orchestrate movements, and add sound effects for exciting gameplay. Dive into the Animation panel, understand keyframes, and master various track types. From simple motions to complex cutout animations, explore the possibilities and enhance your game development skills. By Eric Van de Kerckhove.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 4 of 4 of this article. Click here to view the first page.

Drilling Motion

The next step is to make the pieces of the arm move in a way that makes it appear as if the drill is going through the block. You’re going to do this via two extra keyframes: one to position the drill above the block and another to make the drill move down. Move the time slider to the 0.8 second mark and make sure rec mode is on at the top, with rotation enabled. This ensures that the keyframes will be added automatically.

Rec mode with rotate

Now rotate the pieces of the arm until they look like the image below or use this list of rotations:

  • Part1: 9.9 degrees
  • Part2: 103.3 degrees
  • End: 67.2 degrees

First keyframe

If you play the animation now, the arm will quickly move to the block and then slowly move back to its original position.

Animation after first keyframe

For the drilling, move the time slider to the 1.2 second mark and add another set of keyframes to make the drill move down into the block:

  • Part1: 15 degrees
  • Part2: 111.4 degrees
  • End: 52 degrees

Second keyframe

If you play the animation again, you’ll see the arm moving down and drilling into the block.

Drill animation

That finishes up the movement of the arm.
The illusion isn’t complete yet though, as the block already has a hole in it. Time to fix that!

Calling Methods

The Block node has a small script attached to it:

extends AnimatedSprite2D

func set_frame_number(frame_number: int) -> void:
    frame = frame_number

The script contains a single function: set_frame_number. This function takes a single integer as an argument which changes the active frame of the block.
You can call functions like these in your animations using a Call Method Track.

To do so, click the Add Track button at the top-left of the Animation panel and choose Call Method Track.

Call method track

You’ll now have to choose a node to call methods on via a dialog window. Choose the Block node here and click the OK button.

Choose block

Next, move the time slider to the start of the animation and create a new keyframe in the Functions track by right-clicking the track and selecting Insert Key.

Insert keyframe

A window will pop up asking what method to call. Select void set_frame_number and click Open.

Select method

You’ll now see the new keyframe appear in the timeline, with a label saying set_frame_number(0). Select this keyframe to see its properties in the Inspector. Here, you can change the value of the argument passed to the method by expanding the Args section.

Call method properties

If you play the animation in the editor, it will seem like nothing has changed. This is because call methods aren’t called in the editor, but while the project is running.
Run the project and see what changed. You should see that block now appears fully solid.

Solid block animation

The reason the block is now solid, is because that’s frame 0 of its animation. To animate the block further, you’ll need to add more keyframes.
Select the existing call method keyframe, move the time slider to the 1 second mark and press CTRL/CMD-D to duplicate the keyframe. Now select the new keyframe and change the value of its argument to 1 in the Args section. This will switch the frame of the block to one with a slight hole in it at this point in the animation.

Set argument value

Next, duplicate the existing keyframe again at the 1.2 second mark and change the value of its argument to 2. In frame 2, the block has the full hole in it. To finish up the Call Method track, add yet another keyframe at the 2.2 second mark and change the value of its argument to 1. This final keyframe will make the hole slightly fill up again at the end of the animation. You should now have four keyframes in the Functions track of Block.

Call method full

To test if the animation is working properly, play the project. If you set up the animation correctly, the block get a hole drilled into it.

Animation done

Great! To fully finish the animation, you can add a drill sound effect to make the animation more exciting.

Adding Sound

To play sound effects in Godot, you’ll need an AudioStreamPlayer node. To add this node, right-click the Main node, select Add Child Node… and choose AudioStreamPlayer. Name this new node DrillSound.

Drill sound node

With this node added, you can now add an Audio Playback Track to the move_arm animation. Click the Add Track button at the top-left of the Animation panel and choose Audio Playback Track.

Audio track

A window will pop up asking what node to use. Select DrillSound and click OK.

Select drill sound

You can now add sound effects to the new Audio Clips track. Next, move the time slider to the 1 second mark and create a new keyframe in the DrillSound‘s Audio Clips track by right-clicking the track and selecting Insert Key. Select this new keyframe and set its Stream property to sounds/drill.wav via the Inspector by dragging the audio file from the sounds folder onto the Stream property.

Drag audio

You’ll now see the audio waveform representing the drill sound in the timeline.

Audio wave

Play the project for a final time and you’ll hear the drill sound every time the robot arm drills the block.
That finishes the animation!

Where to Go From Here?

Congratulations on finishing this tutorial. You can download the project materials via the Download Materials link at the top and bottom of this page.
You now have a solid grasp of how to use the AnimationPlayer node in Godot.

Of course, this was just the tip of the iceberg, there’s a lot more to learn about animations. With what you’ve learned here, you should be able to create your own animations with ease. If you want to go more in-depth, check out the Animation section in Godot’s official documentation.

If you have any questions or comments, feel free to join the discussion below.

Contributors

Eric Van de Kerckhove

Author and Team Lead

Adriana Kutenko

Illustrator

Over 300 content creators. Join our team.