1
00:00:00,029 --> 00:00:05,500
In this video, I'm going to run through
the camera shake code in the robot scene.

2
00:00:05,886 --> 00:00:09,343
Going back to the robot script,
I added a temporary function

3
00:00:09,344 --> 00:00:14,557
just for this video that will increase
the camera shake intensity property

4
00:00:14,657 --> 00:00:17,671
when pressing the spacebar
or the enter key.

5
00:00:18,014 --> 00:00:21,600
If I run the scene now and I press space,
the camera shakes.

6
00:00:21,829 --> 00:00:24,800
If I press a couple of times,
it shakes more.

7
00:00:25,171 --> 00:00:28,800
Now, we want to open
the shaking camera 2D script.

8
00:00:28,986 --> 00:00:31,843
I'm going to scroll back to the top
to run you through it.

9
00:00:31,986 --> 00:00:34,829
You will find more information
in the comments,

10
00:00:34,929 --> 00:00:38,000
but I'm going to give you
the general flow of the code.

11
00:00:38,500 --> 00:00:42,343
We control the shake through
that shake intensity property.

12
00:00:42,657 --> 00:00:46,086
You can increase it to make
the camera start to shake.

13
00:00:46,357 --> 00:00:47,029
As you can see,

14
00:00:47,030 --> 00:00:49,971
it uses a setter function,
which is at the bottom of the script.

15
00:00:49,986 --> 00:00:53,071
I'm going to scroll down
to set shake intensity.

16
00:00:53,657 --> 00:00:58,471
This one limits the value between
zero and one using the clamp function.

17
00:00:59,200 --> 00:01:01,569
You first give it the value to limit,

18
00:01:01,700 --> 00:01:04,451
and then the lower limit
and the upper limit

19
00:01:04,651 --> 00:01:08,971
that will prevent the intensity from going
beyond one but also below zero.

20
00:01:10,543 --> 00:01:14,014
Then when we change
the shake intensity,

21
00:01:14,757 --> 00:01:18,214
we check if the camera
should be shaking.

22
00:01:18,514 --> 00:01:19,271
To do that,

23
00:01:19,400 --> 00:01:24,757
we just check if the shake intensity
is not equal to zero.

24
00:01:25,071 --> 00:01:29,114
Notice how we use a function
called 'is equal approx'.

25
00:01:29,400 --> 00:01:31,743
This one is a safe way to compare

26
00:01:31,744 --> 00:01:34,757
two decimal values
like our shake intensity.

27
00:01:35,243 --> 00:01:40,571
The reason is that decimal numbers
are not exactly precise on the computer.

28
00:01:41,129 --> 00:01:43,329
When you compare them…

29
00:01:43,471 --> 00:01:46,957
Well, you can use double equal,
and it will often work.

30
00:01:47,329 --> 00:01:49,914
Sometimes, it will fail unexpectedly.

31
00:01:50,514 --> 00:01:52,857
You can use that function for safety.

32
00:01:54,057 --> 00:01:58,443
Then we use that 'is shaking' value,
it's going to be true or false,

33
00:01:58,657 --> 00:02:00,800
and pass it to 'set physics process'.

34
00:02:00,943 --> 00:02:03,386
This will turn off physics process

35
00:02:03,529 --> 00:02:06,329
when the shake intensity value
is equal to zero,

36
00:02:06,714 --> 00:02:11,900
but it will keep it turned on
while the value is greater than zero.

37
00:02:12,314 --> 00:02:17,157
And so then, the shake animation
happens in physics process.

38
00:02:17,301 --> 00:02:22,657
We use physics process here although
the camera is not a physics body.

39
00:02:22,900 --> 00:02:27,043
We use it to synchronize the camera
motion with the robot's motion.

40
00:02:27,071 --> 00:02:29,271
The robot uses physics process to move,

41
00:02:29,400 --> 00:02:31,814
so we use physics process
to move the camera.

42
00:02:31,957 --> 00:02:35,157
Otherwise, they will be desynchronized,
and you will have some jitters.

43
00:02:35,771 --> 00:02:37,143
Every physics frame,

44
00:02:37,343 --> 00:02:40,043
we call 'set shake intensity'
and we lower it.

45
00:02:40,143 --> 00:02:41,543
We lower it by delta.

46
00:02:42,471 --> 00:02:47,686
That will go through the setter and check
if it has to turn off physics process.

47
00:02:48,071 --> 00:02:51,586
Then we use that shake intensity value
at the bottom here.

48
00:02:51,600 --> 00:02:52,743
We'll start there.

49
00:02:53,086 --> 00:02:57,457
Every frame, we offset the camera
in a random direction,

50
00:02:58,029 --> 00:03:00,829
and we multiply that by
the shake intensity.

51
00:03:01,010 --> 00:03:05,343
If the shake intensity is one,
it's going to have the maximum amplitude.

52
00:03:05,514 --> 00:03:08,914
As the value gets lower and lower,
you will have less and less shake.

53
00:03:09,257 --> 00:03:14,957
Now, we square the shake intensity
so that when the value

54
00:03:15,314 --> 00:03:19,300
of shake intensity gets close to one,
you get a lot of shake.

55
00:03:19,301 --> 00:03:23,457
But as it goes down,
it goes down faster and faster.

56
00:03:23,786 --> 00:03:26,200
This gives the shake a nicer feel.

57
00:03:26,871 --> 00:03:28,114
That offset here,

58
00:03:28,186 --> 00:03:31,186
you can see in the Inspector
when you select the camera.

59
00:03:31,187 --> 00:03:33,729
It's a property of the camera
that's around the top,

60
00:03:34,014 --> 00:03:37,714
and it's an offset from
the camera's position in pixels.

61
00:03:38,071 --> 00:03:40,200
You use it to offset the view.

62
00:03:40,343 --> 00:03:41,986
It's really nice to make the camera

63
00:03:41,987 --> 00:03:45,086
look around the character
or to make it shake.

64
00:03:45,300 --> 00:03:47,814
Let's head back to
the shaking camera script

65
00:03:47,815 --> 00:03:50,529
to see how we calculate
the random direction.

66
00:03:51,057 --> 00:03:57,729
We use something called a noise generator
to get random values to offset the camera.

67
00:03:58,157 --> 00:04:01,457
You learned about noise
in the Random Rock series.

68
00:04:01,629 --> 00:04:07,271
You coded a blue noise that would
offset rocks inside grid cells.

69
00:04:07,557 --> 00:04:11,043
Now, Godot has a built-in noise algorithm

70
00:04:11,143 --> 00:04:17,114
that's going to generate random values,
but we can get continuous series

71
00:04:17,171 --> 00:04:20,957
that give us that nice smooth
camera shake animation.

72
00:04:21,200 --> 00:04:22,386
We use that here.

73
00:04:22,900 --> 00:04:27,800
To calculate a random direction,
we first calculate a random position

74
00:04:27,801 --> 00:04:30,500
by calling the noise
'get noise 2D function'.

75
00:04:30,986 --> 00:04:38,900
We try to sample a value that is random
somewhere in the noise generator.

76
00:04:39,771 --> 00:04:41,700
It's a position on the noise.

77
00:04:41,971 --> 00:04:45,886
To do that, we use
a time value every frame.

78
00:04:46,014 --> 00:04:46,586
Why?

79
00:04:46,671 --> 00:04:49,371
Because we can get continuous samples.

80
00:04:49,372 --> 00:04:53,486
We can sample along a line
as we'll see in a second.

81
00:04:54,314 --> 00:04:56,100
Actually, let's look at this now.

82
00:04:56,414 --> 00:05:02,871
I prepared a little visualization here
to show you how we sample the noise.

83
00:05:03,343 --> 00:05:07,271
Your noise generator,
you can visualize it as an image like so

84
00:05:07,272 --> 00:05:12,714
where the black parts represent values
that are negative or close to zero,

85
00:05:12,857 --> 00:05:18,386
and the bright parts represent values
that are positive and closer to one.

86
00:05:18,643 --> 00:05:23,643
Your noise is going to generate
values between minus one and plus one.

87
00:05:24,514 --> 00:05:27,999
By sampling a position
somewhere on the noise,

88
00:05:28,000 --> 00:05:30,614
we can get the value at that point,

89
00:05:30,686 --> 00:05:33,743
and it's going to be a value
between minus one and plus one.

90
00:05:33,957 --> 00:05:37,843
If we get two of these,
we almost have a direction vector.

91
00:05:37,844 --> 00:05:43,743
We just need to normalize it so we
don't get larger values in diagonals.

92
00:05:44,186 --> 00:05:48,800
The way we sample with
the time is like this.

93
00:05:48,871 --> 00:05:52,942
We use time values to
continuously move along a line,

94
00:05:53,142 --> 00:05:56,271
and that line is going to wrap
around the noise.

95
00:05:57,000 --> 00:06:02,443
Where you see the yellow ball
or the pink ball is going to be

96
00:06:02,529 --> 00:06:05,686
the values that we get
from the noise generator.

97
00:06:05,871 --> 00:06:09,457
You can see that there are
lots of bumps in the texture,

98
00:06:09,543 --> 00:06:11,757
and these bumps are going to
cause the shake

99
00:06:11,758 --> 00:06:14,786
because they are going to make
the camera move forward and backward,

100
00:06:14,929 --> 00:06:18,129
but in different ways
with different intensities.

101
00:06:18,743 --> 00:06:20,443
Right now, you have lots of bumps

102
00:06:20,444 --> 00:06:23,514
that would make the camera
shake very, very fast,

103
00:06:23,543 --> 00:06:27,171
but you can actually change that
directly on the noise.

104
00:06:28,029 --> 00:06:33,057
I have my noise as a texture here,
and inside of that texture,

105
00:06:33,171 --> 00:06:36,400
I have the actual noise that
we use for the camera shake.

106
00:06:36,757 --> 00:06:41,543
The thing we use to shake
the camera is this noise resource.

107
00:06:41,686 --> 00:06:44,386
You can see that it has
some properties in there,

108
00:06:44,557 --> 00:06:47,928
so you can change the period
to remove some bumps

109
00:06:47,929 --> 00:06:50,671
and make the camera shake more slowly.

110
00:06:50,843 --> 00:06:54,086
You can change the persistence
similarly to remove

111
00:06:54,087 --> 00:06:59,714
some visual noise inside the texture
and remove the high-frequency motions.

112
00:07:00,000 --> 00:07:06,514
Finally, the lacunarity is going to change
the scale of the high-frequency detail.

113
00:07:06,515 --> 00:07:07,986
You control the persistence.

114
00:07:08,186 --> 00:07:11,728
This is how we make the camera shake

115
00:07:11,729 --> 00:07:15,771
and why we use time
to sample the noise texture.

116
00:07:15,900 --> 00:07:17,671
This is a lot to take in right now,

117
00:07:17,715 --> 00:07:20,943
but you can find some more
information in the comments

118
00:07:20,944 --> 00:07:23,786
and you can change
the values that you see here

119
00:07:23,787 --> 00:07:27,857
to try to get a more intuitive sense
for how all of this work.

120
00:07:28,371 --> 00:07:31,629
The last thing I want to point out
is how we get the time.

121
00:07:32,929 --> 00:07:36,414
This function,
OS.get ticks millisecond,

122
00:07:36,500 --> 00:07:40,514
is going to return the number
of milliseconds elapsed

123
00:07:40,515 --> 00:07:45,014
since the start of the game,
since the time you pressed the F6 key.

124
00:07:46,543 --> 00:07:50,486
This gives you a value
that continuously goes up.

125
00:07:51,514 --> 00:07:56,229
This is very handy for anything
that's time-dependent in your game.

126
00:07:56,686 --> 00:08:00,271
We divide the value
because those are milliseconds,

127
00:08:00,371 --> 00:08:04,743
meaning that the number
increases by 1,000 per second,

128
00:08:04,829 --> 00:08:08,857
and dividing the value
makes it go a bit more slowly,

129
00:08:08,929 --> 00:08:12,443
which works a bit better with
our noise sampling.

130
00:08:12,743 --> 00:08:15,071
Once we calculated our random direction,

131
00:08:15,072 --> 00:08:18,257
we multiply it by some
maximum amplitude in pixel,

132
00:08:18,258 --> 00:08:23,070
the maximum distance the camera
can shake and by our shake intensity,

133
00:08:23,071 --> 00:08:24,186
That moves the camera.

134
00:08:24,571 --> 00:08:27,243
That's how the camera shake works.