1
00:00:00,360 --> 00:00:06,243
In this video, we'll round out our game
with a nice overview intro animation,

2
00:00:06,286 --> 00:00:11,243
something you see in some fighting games
and some racing games, of course.

3
00:00:11,786 --> 00:00:15,975
The idea here is to see
how to sequence animations,

4
00:00:15,976 --> 00:00:18,660
but not only, if I restart the game,

5
00:00:18,690 --> 00:00:23,020
I can press a button
to skip ahead to the countdown.

6
00:00:23,050 --> 00:00:24,671
You'll see how to do that

7
00:00:24,672 --> 00:00:27,642
and how to manage
the game state basically.

8
00:00:28,157 --> 00:00:30,071
With that let's get started.

9
00:00:30,290 --> 00:00:33,786
I invite you to open
the obstacle course scene

10
00:00:33,819 --> 00:00:36,329
in the obstacle course part 2 directory.

11
00:00:36,957 --> 00:00:40,700
We're going to get started
by creating a camera.

12
00:00:40,770 --> 00:00:43,300
Technically, we could
animate the player's camera,

13
00:00:43,330 --> 00:00:44,971
but as we mentioned before,

14
00:00:45,014 --> 00:00:48,129
we can have multiple cameras
in a game, in Godot

15
00:00:48,186 --> 00:00:51,429
and just set the current property to true.

16
00:00:51,450 --> 00:00:56,100
If I select the existing camera
and turn on and off current,

17
00:00:56,130 --> 00:01:00,329
you can see the purple line
becomes a bit thicker.

18
00:01:01,686 --> 00:01:05,186
What we're going to do
is select the obstacle course node

19
00:01:05,586 --> 00:01:09,086
and add a new camera
2D node as a child of it.

20
00:01:09,434 --> 00:01:11,886
You can see a new pink frame appears

21
00:01:11,887 --> 00:01:16,200
and we're going to move the camera
somewhere else in our game.

22
00:01:16,690 --> 00:01:20,194
Then we want to select
the existing 2D camera

23
00:01:20,394 --> 00:01:24,686
and turn off its current property
because we'll start the game

24
00:01:24,687 --> 00:01:27,643
with the new camera 2D being current.

25
00:01:27,880 --> 00:01:30,729
Select the new camera
and set its current property

26
00:01:30,730 --> 00:01:32,686
to on in the Inspector.

27
00:01:33,986 --> 00:01:36,357
In the scene dock, I'm going to rename it

28
00:01:36,358 --> 00:01:38,400
to Overview Camera 2D

29
00:01:38,502 --> 00:01:42,929
and I'm going to move it up
to the top of my scene tree like that.

30
00:01:43,370 --> 00:01:44,529
All right.

31
00:01:45,010 --> 00:01:50,414
The pink frame tells you
what the camera will show on the screen.

32
00:01:51,880 --> 00:01:55,986
We want to show
a bit more of the scene at a time.

33
00:01:55,987 --> 00:01:57,886
Right now it's going to perhaps

34
00:01:58,014 --> 00:02:00,629
pan a bit too quickly or show too little.

35
00:02:00,900 --> 00:02:05,209
One thing we can do
is in the Inspector increase the zoom.

36
00:02:05,210 --> 00:02:06,980
You could set it to two by two.

37
00:02:07,010 --> 00:02:12,186
It's going to make the view pretty large,
but we can use that to have a slow pan

38
00:02:12,187 --> 00:02:13,586
that's not going to give you

39
00:02:13,587 --> 00:02:15,971
any motion sickness
or something like that,

40
00:02:16,457 --> 00:02:20,029
and show large parts
of the level at a time.

41
00:02:21,200 --> 00:02:23,969
From there we can start animating.

42
00:02:23,970 --> 00:02:28,571
Select the animation player
and go to the animation menu, new,

43
00:02:28,572 --> 00:02:31,914
to create a new animation name,
Course Overview.

44
00:02:32,571 --> 00:02:36,049
In that animation we'll start
by doing a couple of things.

45
00:02:36,050 --> 00:02:39,380
First, we don't want
the info number visible at the start,

46
00:02:39,410 --> 00:02:42,457
so we select the info node
and we're going to go down

47
00:02:42,458 --> 00:02:48,871
to its visibility and turn it off
and create a key frame in there.

48
00:02:49,610 --> 00:02:51,229
We'll click create.

49
00:02:56,786 --> 00:03:01,546
Well, one thing we can do just for safety
is ensure that our overview camera 2D

50
00:03:01,547 --> 00:03:04,671
is set to current at the start,
so we can turn it on

51
00:03:04,672 --> 00:03:07,000
and the Inspector and create a keyframe

52
00:03:07,001 --> 00:03:09,371
for that in our animation.

53
00:03:10,290 --> 00:03:14,800
From there we're going to animate
the camera's position.

54
00:03:15,671 --> 00:03:18,209
You remember how we did it before?

55
00:03:18,210 --> 00:03:21,660
We used the icons
in the toolbar at the top.

56
00:03:21,690 --> 00:03:25,172
We're going to turn off rotation
because we don't want

57
00:03:25,173 --> 00:03:27,101
to animate the camera's rotation.

58
00:03:27,330 --> 00:03:31,329
We only keep the location on
and press the insert key

59
00:03:31,330 --> 00:03:35,614
to insert a keyframe
at the place the camera started.

60
00:03:36,090 --> 00:03:40,114
Now this animation one second
is not going to be long enough.

61
00:03:40,214 --> 00:03:43,743
I invite you to crank up
the duration to 10

62
00:03:43,744 --> 00:03:46,529
in the top right
of the animation editor.

63
00:03:48,229 --> 00:03:52,161
Working to have maybe a good duration

64
00:03:52,162 --> 00:03:55,229
to pan the camera
is three or four seconds.

65
00:03:55,272 --> 00:04:02,042
It has to be slow enough and long enough
to give the player time to observe

66
00:04:02,157 --> 00:04:05,800
what's in that part
of the obstacle course.

67
00:04:06,010 --> 00:04:11,414
Let's say roughly 3 seconds something,
like one third of the animation,

68
00:04:12,320 --> 00:04:14,586
I'm going to place the time cursor there.

69
00:04:14,900 --> 00:04:20,943
Perhaps increased zoom level
a little bit in my animation editor,

70
00:04:21,529 --> 00:04:24,014
move the camera a little bit.

71
00:04:24,120 --> 00:04:26,370
In that case,
I'm going to have it move down,

72
00:04:26,371 --> 00:04:26,957
up and down.

73
00:04:26,958 --> 00:04:29,413
Then we'll have a camera
jump to some other place

74
00:04:29,414 --> 00:04:32,614
and move to the side
and then jump there

75
00:04:32,700 --> 00:04:35,371
and go back to the player,
something like that.

76
00:04:36,886 --> 00:04:37,664
Let me see.

77
00:04:37,665 --> 00:04:40,386
I'm going to go back
to the starting position

78
00:04:40,387 --> 00:04:42,014
and then up and down a little bit

79
00:04:42,015 --> 00:04:43,800
and press the insert key.

80
00:04:44,324 --> 00:04:46,500
Then we move forward one key frame

81
00:04:46,643 --> 00:04:50,243
and we have the camera jump
to a different starting position.

82
00:04:50,450 --> 00:04:53,171
Insert and I'm going
to move forward in time

83
00:04:53,172 --> 00:04:57,071
to six point something seconds
and pan the camera a little bit.

84
00:04:57,450 --> 00:05:00,471
This is not the most
interesting part of the level,

85
00:05:01,586 --> 00:05:04,629
but let's do that for now.

86
00:05:05,010 --> 00:05:10,214
I'll have the camera jump again,
like down there or up there perhaps.

87
00:05:12,090 --> 00:05:16,614
Press insert to add a keyframe
and go to the end of the animation,

88
00:05:16,615 --> 00:05:19,185
move the camera
towards the player, press insert.

89
00:05:19,557 --> 00:05:23,057
You can now press Shift + D
to see how the camera is going to show

90
00:05:23,058 --> 00:05:24,529
that upper part of the level.

91
00:05:24,530 --> 00:05:25,829
Then it jumps.

92
00:05:26,086 --> 00:05:28,571
It shows up down the level
and then it jumps

93
00:05:28,614 --> 00:05:30,100
and goes to some other place.

94
00:05:30,360 --> 00:05:32,500
There are a couple of issues there.

95
00:05:32,530 --> 00:05:37,620
You can see how when we have the jump,
the camera animates going down

96
00:05:37,650 --> 00:05:39,153
and it looks really off

97
00:05:39,154 --> 00:05:41,514
and it's going to be bad
for the player's eyes.

98
00:05:41,650 --> 00:05:47,386
We can select those key frames
right before the jump in both situations,

99
00:05:47,600 --> 00:05:53,980
and then we can right click the easing
in the Inspector and set it to zero.

100
00:05:54,010 --> 00:05:55,600
What this is going to do

101
00:05:55,601 --> 00:05:58,686
is make the camera
instantly jump to the new position,

102
00:05:59,800 --> 00:06:01,271
which is something nice.

103
00:06:01,530 --> 00:06:03,758
But then that jumping very sudden

104
00:06:03,958 --> 00:06:07,100
is not going to be
too great for the player either.

105
00:06:07,146 --> 00:06:14,359
One thing we're going to add now
is a fade out and in of the view.

106
00:06:14,360 --> 00:06:18,214
We're going to fade to black
when we reach the final position

107
00:06:18,614 --> 00:06:22,043
and then fade in from the new position.