In this video, we'll create the game's start animation,
which you can see here, this countdown.
We'll learn not only how to animate text,
but also how to prevent the player from moving until the animation ends.
We'll do this using Godot's call function tracks,
which allows you to call code from your animations.
Let's get started.
To start with, I'm going to fold the Static Body 2D
and hide it to remove visual noise for you.
Then we'll select the Obstacle Course
and add a new label node as a child of it.
The label appears in the top left. And as we learned before,
we should go to Layout, Full Rect in the toolbar.
And let's see what happens.
It's even worse.
What's happening?
The Obstacle Course, the parent of the label,
is a 2D node, it doesn't have a bounding box.
So the label doesn't have a box to fill right now.
Control nodes are supposed to work with other control nodes
and not with the 2D nodes, the blue ones.
We can separate the user interface from the game world and those 2D nodes
by adding a new kind of node called a Canvas Layer.
So we're going to do that, select the Obstacle Course,
and we're going to add a new Canvas Layer node as a child of it.
Then we drag our label onto the Canvas Layer.
And if you select the node now,
you'll see it's filling the entire game window.
With the label selected,
we're going to add some number in the text, like 1.
It draws in the top left and it's not very visible right now,
but we're going to align it and center it in the view.
You go to Align, Center; Valign, Center.
Now the text is here, really tiny, in the center of the view.
We're going to change the font.
We prepared one for you just to save a couple of clicks.
Go to Obstacle Course, Fonts,
and in the Inspector, we go to Theme Overrides, Fonts,
and we can click and drag info_font onto the Font slot.
And you can see now, the text is much bigger.
All right, that gets us started. We're going to rename the label to Info.
It's going to give you a bit of info on the game state.
We'll put the text if you win or you lose in there later on.
We have one last thing to do before we can animate the text.
I'm going to reselect the Info Node
and go to the Rect category in the Inspector
and down to the Pivot Offset.
We're going to scale the text to animate it.
And so if I set my scale to 0.5-0.5,
you can see the text moves to the top left of the screen.
Instead, we want it to scale down, but centered in the view.
And for that, we are going to move the Text Pivot.
If we press V, if you hover over some parts of the game window
and keep the V key down, you're going to move the Pivot,
but we want to be precise about that,
so we'll change the Pivot Offset in the Inspector to 960 by 540.
This is half of the game's based resolution.
And now if I change the scale to 0.5-0.5,
you can see the text stays centered on the screen.
With that, we can get started animating.
To start animating, we select the Obstacle Course
and we're going to add a new Animation Player as a child of it.
Then we want to create an animation by going to the animation menu
and clicking New.
We'll call this one start_countdown.
And to start with,
we're going to change the animation duration.
To the right of the timeline, you have a number there
that you can click and change to 3, press enter.
You'll see the gray area expense.
And then in the bottom right, you have a Zoom Slider
to change the Zoom level of your animation timeline.
We're going to create our Animation Tracks,
and to do so, we select the Info label.
We're going to create them all at once.
First, we're going to change the text
because we need to change the count to two, then three.
Three, two, one.
So we start by clicking the key icon in the top right of the text field.
And every time we're going to add a new animation track,
we're going to animate a new property, we will get this pop-up.
You can press enter to confirm
and see the track added to the animation editor.
We're going to animate the node's scale.
So we expand the Rect category in the Inspector,
go down and click the key next to Scale, and confirm.
We're going to maybe do two things.
We're going to change the visibility of the node.
Later, we'll have to hide it.
So we're going to expand the Visibility category
and click the key next to Visible.
It's generally good to,
when you're going to mess with the visibility of node,
to have a key just to make it visible at the start of an animation
because if an animation makes a node invisible,
if the next animation doesn't make it appear again,
it's going to stay invisible despite playing the animation.
I hope that makes sense.
And we're going to do one last thing.
It's key the font size of our text because we're going to change it
depending on what we want to show here.
Go to Theme Overrides, Fonts, you expand the Font,
Settings, and put a key next to the Size.
Doing this shows you that basically you can key and animate
about everything you see in the Inspector in Godot, including text.
I'm pointing this out because this is not the case with every single game engine
or animation editor.
Let's start animating.
The first thing we'll change is the text.
So we go to 1 second and select the Info node
and change the text to 2, then click the key icon
and you're going to see a little diamond added there.
At the start, it shows 1, 2.
Actually, we want to change the text at the start
so we can place the time cursor at 0, select the label again,
change the text to 3, click the key icon,
and now, the text stays at 3, then goes to 2.
And at 2 seconds, we want to change the text to 1.
Then click the key icon to insert a keyframe.
And then if you go to the view, play the animation,
you can click the play key here.
It's going to go 3, 2, 1.
The text animation is working already.
Then we want to animate the scale.
The way we're going to do that is
we're going to animate the node scaling down
and then we're going to reset the scale to 1
or to a value larger than 1 actually.
Select the first keyframe or the rect scale
and in the Inspector, we're going to type 3-3.
We're going to make the text really big.
And you have to click the animation timeline
to update the animation state.
You'll see the text might be a little blurry.
It does not matter too much because as it's going to animate scaling down,
the player will not see the blurriness too much.
We're going to go to 1 second,
right-click on our first rect scale keyframe
and select duplicate keys,
and do the same at 2 seconds.
Right-click, duplicate.
Why we do that?
It's because every time we want to reset to that scale,
we're going to insert a new keyframe there,
right-click in the rect scale track and select Insert Key
and then select the new key
and we're going to set the scale in the Inspector down to 0.
Now, if you play the animation, the node will go down
and then, it will scale up, as you can see, very quickly
and in a very ugly way.
And we don't want that.
One thing we can do there is
when we select our keyframe with the scale at 0 in the Inspector,
we can right-click on the Easing and select 0.
It's going to keep the value this way.
It's going to prevent any animation as you can see.
And it instantly switches to 2 and shows the 2 very big.
All right. Now we can place the cursor at 1.9 seconds,
select our scale keyframe with the scale at 0.
Right-click, duplicate,
and we are going to do the same right before 3 seconds there.
Right-click, duplicate.
And if we play the animation,
we'll see the text scaling down and we have our animation done, almost.
We want to add one more thing.
It's that when we play the game,
we can use this icon to automatically play the animation on load.
We're going to turn it on. And if we press F6 to play the scene,
we see the countdown and stays on the screen,
but we can move the character.
And at the start of a race,
you don't want the players to be able to move,
so we're going to prevent them.
We need to add code to keep the player in place
and make it work with the animation.
Now the question is: where do we put this code?
The way we do this most typically in Godot is
we place the code on a common parent to the various nodes
that we need to access in the script.
In this case,
we're going to have to toggle processing on the Godot node,
and we're going to need to synchronize
that with the animation player and with the Info node.
The common parent to all three of these is the Obstacle Course.
So it makes sense to add a script to that one
to coordinate the action between these nodes.
We're going to select Obstacle Course and attach a new script to it.
Click Create.
And I'm going to right-click on the script and close all the other tabs
so it's a bit cleaner and fold the Animation Editor.
All right.
With that, we can get coding.
Actually, we're mostly going to need to change the Godot node right there,
but later, we'll expand the script.
We're going to start with, as usual, an already variable called Godot,
and we're going to get our Godot node so we can use the dollar sign
and complete to Course/Godot.
Then we need to do two things. First, at the start of the game,
we need to prevent the character from moving.
And if we open the Godot Script,
we're going to see that it moves in the physics process function.
It turns out that nodes have a function to toggle physics processing on and off.
We're going to do that now.
We go back to the ObstacleCourse.gd script and we're going to add our ready function
because this corresponds to the start of the game basically.
We're going to call godot.set_physics_proces
and we're going to set it to false.
If you're wondering, this just tells Godot,
"skip this node on every update while this value is false".
And then later, to make the node call physics process every frame,
you just call this function with a value of true,
which is what we're going to do in a new function that we'll call start.
And this function will start the game.
For now, the only thing it's going to do is
set physics process back to true.
One thing you can do is you place your cursor on this line of code,
press Ctrl+C to copy and Ctrl+V to paste.
And then in the parentheses, you want it to change the false to true.
You want to activate movement on Godot.
Now, we have to call that function from somewhere to start the game,
and we can do that from the animation player.
We're going to click on the animation player node,
which will open our animation,
and this time, we'll use the Add Track button.
Click that.
And you want to add something called a Call Method Track.
Method is another term for function basically.
We're going to click that
and it asks you on which node you want to call the function.
It's on the Obstacle Course, so we double click this node,
and a new track appears in our animation player.
We're going to place a time cursor at the end of the animation
and right-click on our function call track to insert a key.
Then it asks you which function you want to call.
We're going to look for our start function.
We need to save the script first. Sorry.
We save the script and then right-click, insert a key and look for start.
You can see it finds the functions from your script.
Click open to add this function call.
Now, if we play the game during the countdown animation,
I cannot move, and as soon as it finishes,
now I can move the character and get pushed off the course a little bit
with our push wall.
This shows you how in Godot you can call a function
from your animation which is a very convenient feature.
It's not available, in every game engine and every technology,
so this was something I wanted to point out.
With that, in the next lesson, we'll add
perhaps the countdown timer and the lose condition for the game.
See you there.