To fade the screen in and out,
we want some rectangle, a black one,
that's covering the entire display.
That's what we're going to animate, fading in and out.
It turns out that there's a node
we can use for that called color rectangle.
We're going to place it in the UI layer
because this layer does not move with the camera,
so we can easily cover up the screen.
Select the UI canvas layer node,
and press CTRL+A to add a new ColorRect node.
We're going to make it span the entire screen
by going to Layout, FullRect.
You can see how it's a color basically drawn in a rectangle.
We're going to change the color in the inspector to a dark tone.
You can use the one we provide in the color palette,
or you can set it to black if you want.
Now, the cool thing about that
is we can animate the color, the Alpha channel, to fade in and out.
Very easy.
We're going to go to the start of our animation track.
We're going to start with the screen entirely black.
We click the key next to the color and create the new animation track.
From there, we're going to have fades of 0.5 seconds roughly.
We're going to move the time cursor in the animation timeline.
Then go back to the color, and move the Alpha slider down to zero.
Then click the key here to fade from black to transparent screen.
The thing that can look a bit weird is that you'll see the camera moves there,
but we are animating the black screen here.
Well, this rectangle is going to cover up the screen no matter what,
because it is in the UI layer.
You'll see if you play the game that it's working as intended.
Now, to save some time,
we're going to create a fade to black here,
and then we'll copy and paste our fade.
What we can do is...
Well actually, we can place the time cursor to where the camera jumps.
We select our two keyframe by box selecting them with the left mouse button,
and then right-click, duplicate the keys.
It's going to duplicate them at the time cursor's position.
You can see that when we reach 3.4 seconds,
then we have the screen completely black, and we fade again.
Going to focus my viewport on this rectangle for now.
One thing we can do is move back a little bit
and select just the transparent keyframe,
right-click, duplicate.
With that, your color rectangle stays transparent for the time the camera moves,
and then fades to black, and fades back in.
We can place the time cursor after the second camera jump
that you can see right here at 6.9 seconds.
Select our three key frames,
right-click, duplicate, and...
Oh, they get duplicated from the stall.
So we have to click and drag to shift the three key frames a little bit.
Now we have a fade again when the camera jumps the second time.
Lastly, we'll have a fade to black at the end
because we're going to switch camera onto the player.
So we're going to select, for example,
the first two keyframes of one of the fades.
Right-click, duplicate, and then click and drag
on the color squares to move the fade to fade out
basically when the camera reaches the final keyframe.
Lastly, at the end of the animation, we want to switch camera.
We're going to expand the Course node, go to Godot's camera,
and turn on its Current property, then key that.
We're going to create a new animation track for that.
The overview camera is set to current at the start.
And then at the end, it's good as camera.
Now, to ensure that the cameras are set properly at the start of the game,
we're going to add an extra keyframe at the start
to ensure that Godot's camera is not current.
We're going to turn that off in the Inspector and click the key icon.
You can see now, I have two key frames for Godot's Camera2D,
one at the start and the one at the end.
Why do we do that?
Well, the way the Current property works
is that the last node that got its Current property set turned on
becomes the active camera.
But in that case,
because the overview camera comes before Godot's camera
in the scene tree,
it would be taken over by Godot's camera.
Making the animation not work as intended.
Now, we can go to the start countdown animation
where we do want a fade in
because we are fading to black at the end of the course overview.
Go to the start countdown animation and we're going to add a couple of things.
We already have a key to ensure that the Info node becomes visible again.
In the scene dock, we're going to go to the ColorRect.
We're going to add a key for the color being dark like that,
and we're going to add a 0.5 seconds fade in.
I'm going to move the time cursor to 0.5 seconds,
go to the Color in the Inspector,
lower the Alpha channel to zero, and key here.
We have a fade in now and our countdown animation.