1
00:00:00,371 --> 00:00:02,243
To fade the screen in and out,

2
00:00:02,244 --> 00:00:05,386
we want some rectangle, a black one,

3
00:00:05,387 --> 00:00:07,457
that's covering the entire display.

4
00:00:07,871 --> 00:00:10,500
That's what we're going to animate,
fading in and out.

5
00:00:10,586 --> 00:00:12,957
It turns out that there's a node

6
00:00:12,958 --> 00:00:15,386
we can use for that
called color rectangle.

7
00:00:15,571 --> 00:00:18,286
We're going to place it in the UI layer

8
00:00:18,287 --> 00:00:21,357
because this layer does not move
with the camera,

9
00:00:21,358 --> 00:00:24,029
so we can easily cover up the screen.

10
00:00:24,129 --> 00:00:27,043
Select the UI canvas layer node,

11
00:00:27,044 --> 00:00:32,057
and press CTRL+A
to add a new ColorRect node.

12
00:00:33,729 --> 00:00:36,086
We're going to make it span
the entire screen

13
00:00:36,087 --> 00:00:38,143
by going to Layout, FullRect.

14
00:00:38,144 --> 00:00:42,929
You can see how it's a color
basically drawn in a rectangle.

15
00:00:43,243 --> 00:00:47,143
We're going to change the color
in the inspector to a dark tone.

16
00:00:47,416 --> 00:00:50,257
You can use the one we provide
in the color palette,

17
00:00:50,258 --> 00:00:52,671
or you can set it to black if you want.

18
00:00:53,000 --> 00:00:54,729
Now, the cool thing about that

19
00:00:54,730 --> 00:01:00,886
is we can animate the color,
the Alpha channel, to fade in and out.

20
00:01:00,887 --> 00:01:01,900
Very easy.

21
00:01:02,914 --> 00:01:06,614
We're going to go to the start
of our animation track.

22
00:01:07,329 --> 00:01:10,486
We're going to start with the screen
entirely black.

23
00:01:10,686 --> 00:01:17,014
We click the key next to the color
and create the new animation track.

24
00:01:17,114 --> 00:01:21,386
From there, we're going to have fades
of 0.5 seconds roughly.

25
00:01:21,900 --> 00:01:27,987
We're going to move the time cursor
in the animation timeline.

26
00:01:28,187 --> 00:01:33,100
Then go back to the color,
and move the Alpha slider down to zero.

27
00:01:33,129 --> 00:01:39,657
Then click the key here to fade
from black to transparent screen.

28
00:01:39,771 --> 00:01:44,399
The thing that can look a bit weird
is that you'll see the camera moves there,

29
00:01:44,400 --> 00:01:47,414
but we are animating
the black screen here.

30
00:01:47,415 --> 00:01:52,892
Well, this rectangle is going
to cover up the screen no matter what,

31
00:01:52,986 --> 00:01:55,000
because it is in the UI layer.

32
00:01:55,001 --> 00:01:59,486
You'll see if you play the game
that it's working as intended.

33
00:02:00,329 --> 00:02:02,286
Now, to save some time,

34
00:02:02,287 --> 00:02:06,371
we're going to create
a fade to black here,

35
00:02:06,372 --> 00:02:09,400
and then we'll copy and paste our fade.

36
00:02:10,086 --> 00:02:11,642
What we can do is...

37
00:02:11,643 --> 00:02:18,271
Well actually, we can place
the time cursor to where the camera jumps.

38
00:02:18,429 --> 00:02:23,129
We select our two keyframe by box
selecting them with the left mouse button,

39
00:02:23,130 --> 00:02:25,957
and then right-click, duplicate the keys.

40
00:02:25,958 --> 00:02:29,657
It's going to duplicate them
at the time cursor's position.

41
00:02:29,658 --> 00:02:32,700
You can see that
when we reach 3.4 seconds,

42
00:02:32,771 --> 00:02:38,000
then we have the screen
completely black, and we fade again.

43
00:02:38,014 --> 00:02:44,400
Going to focus my viewport
on this rectangle for now.

44
00:02:44,943 --> 00:02:48,277
One thing we can do
is move back a little bit

45
00:02:48,386 --> 00:02:51,314
and select just the transparent keyframe,

46
00:02:51,315 --> 00:02:53,186
right-click, duplicate.

47
00:02:53,500 --> 00:02:59,486
With that, your color rectangle stays
transparent for the time the camera moves,

48
00:02:59,487 --> 00:03:02,457
and then fades to black,
and fades back in.

49
00:03:02,686 --> 00:03:06,829
We can place the time cursor
after the second camera jump

50
00:03:06,871 --> 00:03:11,543
that you can see right here
at 6.9 seconds.

51
00:03:11,757 --> 00:03:14,171
Select our three key frames,

52
00:03:14,229 --> 00:03:16,677
right-click, duplicate, and...

53
00:03:16,678 --> 00:03:19,200
Oh, they get duplicated from the stall.

54
00:03:19,201 --> 00:03:23,286
So we have to click and drag to shift
the three key frames a little bit.

55
00:03:23,287 --> 00:03:27,657
Now we have a fade again
when the camera jumps the second time.

56
00:03:27,786 --> 00:03:32,114
Lastly, we'll have a fade to black
at the end

57
00:03:32,115 --> 00:03:34,871
because we're going to switch camera
onto the player.

58
00:03:34,872 --> 00:03:38,343
So we're going to select, for example,

59
00:03:38,344 --> 00:03:41,229
the first two keyframes
of one of the fades.

60
00:03:41,230 --> 00:03:44,586
Right-click, duplicate,
and then click and drag

61
00:03:44,587 --> 00:03:50,243
on the color squares
to move the fade to fade out

62
00:03:50,244 --> 00:03:53,514
basically when the camera
reaches the final keyframe.

63
00:03:53,786 --> 00:03:56,586
Lastly, at the end of the animation,
we want to switch camera.

64
00:03:56,587 --> 00:04:00,571
We're going to expand the Course node,
go to Godot's camera,

65
00:04:00,572 --> 00:04:05,456
and turn on its Current property,
then key that.

66
00:04:05,457 --> 00:04:08,043
We're going to create
a new animation track for that.

67
00:04:08,814 --> 00:04:11,643
The overview camera
is set to current at the start.

68
00:04:11,800 --> 00:04:14,856
And then at the end,
it's good as camera.

69
00:04:14,857 --> 00:04:20,271
Now, to ensure that the cameras
are set properly at the start of the game,

70
00:04:20,272 --> 00:04:23,243
we're going to add
an extra keyframe at the start

71
00:04:23,244 --> 00:04:25,943
to ensure that Godot's camera
is not current.

72
00:04:25,944 --> 00:04:31,271
We're going to turn that off
in the Inspector and click the key icon.

73
00:04:31,272 --> 00:04:35,714
You can see now, I have two key frames
for Godot's Camera2D,

74
00:04:36,629 --> 00:04:38,656
one at the start and the one at the end.

75
00:04:38,657 --> 00:04:39,871
Why do we do that?

76
00:04:39,872 --> 00:04:42,843
Well, the way the Current property works

77
00:04:42,844 --> 00:04:48,692
is that the last node that got
its Current property set turned on

78
00:04:48,693 --> 00:04:50,514
becomes the active camera.

79
00:04:50,515 --> 00:04:51,614
But in that case,

80
00:04:51,615 --> 00:04:54,986
because the overview camera
comes before Godot's camera

81
00:04:54,987 --> 00:04:56,114
in the scene tree,

82
00:04:56,115 --> 00:04:59,514
it would be taken over
by Godot's camera.

83
00:04:59,657 --> 00:05:02,871
Making the animation not work as intended.

84
00:05:02,872 --> 00:05:07,157
Now, we can go to
the start countdown animation

85
00:05:07,158 --> 00:05:10,513
where we do want a fade in

86
00:05:11,471 --> 00:05:15,329
because we are fading to black
at the end of the course overview.

87
00:05:15,330 --> 00:05:21,300
Go to the start countdown animation
and we're going to add a couple of things.

88
00:05:21,301 --> 00:05:26,200
We already have a key to ensure that
the Info node becomes visible again.

89
00:05:27,271 --> 00:05:31,914
In the scene dock,
we're going to go to the ColorRect.

90
00:05:32,057 --> 00:05:35,971
We're going to add a key for the color
being dark like that,

91
00:05:36,243 --> 00:05:39,829
and we're going to add
a 0.5 seconds fade in.

92
00:05:39,830 --> 00:05:43,847
I'm going to move the time cursor
to 0.5 seconds,

93
00:05:43,848 --> 00:05:46,314
go to the Color in the Inspector,

94
00:05:46,315 --> 00:05:50,871
lower the Alpha channel to zero,
and key here.

95
00:05:52,043 --> 00:05:55,814
We have a fade in now
and our countdown animation.