Introduction to Godot’s AnimationPlayer | Kodeco

From a humble stroll to large bosses and fancy UI parts, video video games are all about animations! In Godot, you’ll be able to create animations utilizing the AnimationPlayer node and a versatile animation system permitting you to create your personal animations utilizing a timeline. You can also make nodes transfer, change shade, make sounds or the rest over time in Godot.

On this article, you’ll learn the way animations in Godot work and tips on how to create your personal utilizing the AnimationPlayer node. Here’s a abstract of what you’ll be taught:

• Animate the place and shade of a sprite
• Get acquainted with the AnimationPlayer node and the Animation panel
• Create a cutout animation
• Use different monitor sorts to orchestrate animations and play sound results

The top results of this tutorial might be an animated title card and a robotic arm that drills right into a block.

Getting Began

To get began, obtain the challenge supplies by way of the Obtain Supplies hyperlink on the high and backside of this web page. Subsequent, import and edit the starter challenge in Godot.

Major Scene

As soon as the challenge is loaded, you’ll be greeted by the essential scene, which consists of a Background sprite and two hidden nodes for later use: a Robotic Arm and a Block.

If you happen to run the challenge, it’s best to see simply the background sprite.

File Overview

Now check out the FileSystem tab to see the included assets.

Here’s an summary of the information and folders:

• scenes: Incorporates the principle scene
• scripts: There’s a single script right here used to animate the hidden Block node
• sounds: This folder holds the drill sound impact for the robotic arm
• sprites: All sprites used all through the challenge, together with the elements of the robotic arm and the background
• credit score.txt: Credit for the challenge property
• icon.svg: The default icon for the challenge

Now you may have a grasp of what the challenge seems like, you’re able to know extra in regards to the AnimationPlayer node!

What’s an AnimationPlayer?

The AnimationPlayer node holds animations and means that you can play, pause, and cease them. It might probably manipulate the properties of nodes within the scene and interpolate them over time. For instance, you’ll be able to transfer a sprite, make characters blink and alter the fabric of a mesh.

This node is without doubt one of the extra highly effective ones in Godot, and you’ll discover makes use of for it in nearly each challenge. Mixed with the Animation panel, the AnimationPlayer node provides you the instruments it’s essential create your personal animations.

Animation Necessities

In your first animation, you’ll be animating the place and shade of a title sprite so it strikes into the display and fades out.

This can cowl the fundamentals of tips on how to create an animation from scratch.

Making ready the Scene

First up, you’ll want the sprite for the title card. Add it to the scene as a toddler of the Major root node by dragging the title.png from the sprites folder into the viewport.

Choose the brand new Title node this created and alter its place to (X: 630, Y: 160) by way of the Inspector so it’s on the high of the display.

With the title in place, you’ll be able to create an AnimationPlayer node. Go forward and create a brand new AnimationPlayer node as a toddler of the Major root node. To do that, right-click the basis node and choose Add Baby Node… within the context menu.

Subsequent, filter for AnimationPlayer within the search bar on the high and double-click the AnimationPlayer possibility so as to add it to the scene.

To maintain monitor of its objective, rename this new AnimationPlayer node TitleAnimationPlayer.
Choose the TitleAnimationPlayer node and it’s best to see the Animation panel opening on the backside of the editor.

That is the place the magic occurs! Within the subsequent part you’ll be creating the animation itself.

Creating the Animation

Create a brand new animation by clicking the Animation button within the Animation panel and choosing New.

A dialog window will pop up asking for the identify of the animation. Enter title because the identify and click on OK to create the animation.
The timeline will now be proven within the house beneath the Animation button.

The title animation will take 2 seconds to finish, so change the animation size to 2 seconds on the far proper of the animation panel, subsequent to the clock icon.

Including Keyframes

All the pieces is now prepared to begin including keyframes. Keyframes are deadlines within the animation the place a price adjustments. The animation will interpolate between these keyframes over time.
To indicate how this works in follow, choose the Title node within the scene and check out the Inspector. With the Animation panel opened, you’ll see key buttons subsequent to node properties.

These buttons will add a keyframe to the animation on the present place within the timeline. Click on the keyframe button subsequent to the Place property to offer it a shot. After doing so, you’ll see a dialog window asking you if you wish to create a brand new monitor and a key.

An animation monitor is a set of keyframes. You’ll want a separate monitor for every property you wish to animate. That method, you’ll be able to animate a number of properties on the identical time.

There are two checkboxes right here: Use Bezier Curves and Create RESET Observe(s). The previous will allow bezier curves for the animation monitor, which gives you handles to manage the form of the curve to fantastic tune the animation. The latter will create an additional RESET animation with the identical property monitor that can reset the property to its default worth.

You may preserve each checkboxes at their default values right here, as you won’t be needing bezier curves. Click on Create to create the animation tracks.

Now take one other take a look at the Animation panel. As you’ll be able to see, there’s a monitor now for the Place property of the Title node. There’s additionally a keyframe now initially of the timeline, represented by a diamond form.

A single keyframe won’t do something, so you’ll want so as to add one other to create an animation. To take action, you’ll have to set the time the place you need your new keyframe to be added. Transfer the time slider to 0.8 second mark by dragging your cursor on the timeline header (the numbers on the high) or by setting it straight within the animation place property on the high left. If you wish to see smaller increments on the time header, maintain the CTRL/CMD key and scroll up.