Adding a Scene Animation

Now let’s add a bit of sexy to our game level, by starting with a countdown, then dynamically creating a player object when the animation is over. To pull this off we are going to have to create a state machine of sorts for tracking what our game is currently up to. So first off, let’s delete the Player instance we just added to our level, we will be creating it dynamically.

Let’s start things off by creating a new node of type Label and center it in the middle of the viewport. With your newly created Label, set the following properties in the Inspector:

Configure-Label-in-Inspector Godot Screenshot

Now we need to configure the Font to use with our Label. We are going to use the same font we used on the main menu. Additionally set the Size to 60, outline to white, Outline size to 1, drag the ttf file over the Font Data field and finally slightly lower down expand Custom Colors, tick Font Color and select black:

Configuring-the-label-font in Godot Game Engine Screenshot

The final result should look like:

Stage Results for Game in Godot Screenshot

Now at the beginning of our level, we are going to fade in the newly created label. To do this, we now need to add a new node called AnimationPlayer to our level. At this point your scene hierarchy should look like:

Scene-status in Godot Game Engine Screenshot

With the AnimationPlayer node selected, the Animation tab should be displayed near the bottom of the window:

AnimationTab Godot Screenshot

Now we can create a new animation to control the display of our Label.

Animation-Button Godot Game Engine

Click the Animation button. A menu will pop up, select New:

New-Animation-button Godot Game Engine

When prompted, name the animation Stage Display:

Create New Animation in Godot Screenshot

We will start by setting the duration of our animation. Locate the duration field to the right of the stopwatch icon and set it to 4.

Animation-duration in Godot Game Engine

Next, we want to set which node we are going to animate. This is done by clicking the +Add Track button, then select Property Track:

Add-Track in Godot Screenshot

Next, select the Label in the resulting dialog.

Select-the-Label Godot Screenshot

Next select percent_visible as the property to animate.

Select-property label Godot Screenshot

Now we are going to want to define a number of keyframes across the 4-second timeline. Right-click in the timeline and select Insert Key.

Insert-key in Add Track in Godot

This will create a dot or tick on the timeline where we just created the key. Left-click the new click, then in inspector set Value to 0.

Setting-key-in-inspector Godot Screenshot

Now repeat this process at the 3.5 second mark, this time setting the value to 1. The end result should look like this:

Label-percent_visible-timeline Godot Screenshot

You can now preview your newly created animation using the VCR style controls.

Animation-Controls in Godot Screenshot

When our animation ends, we are going to call a function called startAnimationDone() that will fire up our level once the animation stops playing. Of course, we are going to have to create this function. First, we need to create a new script in our GameScene, attached to the root object in our scene.

Next, in the newly created script, create a new function called startAnimationDone(). Don’t worry about the contents of this function, we will get to the code in a second, for now just call pass. Now that we’ve created our function, we can call it as part of our animation.

To do this, we once again click +Add Track, this time selecting Call Method Track:

Adding-a-Call-Method-track in Godot

When asked for the node, this time select GameSceneRoot. Now at the 4 second mark in the Functions track, left click and create a new Key just like before. This time it will prompt you for what function you want to call, select our startAnimationDone function:

Select-function-key-animation in Godot Screenshot

We will revisit and add features to this code shortly.

 

Like it? Pass it on!
Scroll to Top