1
00:00:03,710 --> 00:00:09,110
In this lecture, we're going to fix our game so that the player can no longer leave the edges of our

2
00:00:09,110 --> 00:00:09,860
screen.

3
00:00:10,160 --> 00:00:15,500
Before we do that, though, let's jump out of play mode very quickly and just tidy up our assets folder.

4
00:00:15,650 --> 00:00:18,350
So I'm going to create a couple of new folders in here.

5
00:00:18,350 --> 00:00:23,840
So right click create folder and this one is just going to be called the input system.

6
00:00:24,790 --> 00:00:28,840
And this is just going to tidy up our input actions and our input system.

7
00:00:29,560 --> 00:00:32,170
We're also going to need a folder for our scripts.

8
00:00:32,170 --> 00:00:38,740
So let's right click create folder and call this one, these scripts, and then we can drag our player

9
00:00:38,740 --> 00:00:42,040
script into that folder with everything all tidied up.

10
00:00:42,040 --> 00:00:46,900
Let's head into our scripts folder and open up our player script and look at how we might add these

11
00:00:46,900 --> 00:00:48,970
boundaries to the edge of the screen.

12
00:00:49,000 --> 00:00:53,650
Now, before we start doing any coding, we're actually going to have to learn a little bit about the

13
00:00:53,650 --> 00:00:55,690
viewport and world space.

14
00:00:55,810 --> 00:00:56,350
Okay.

15
00:00:56,350 --> 00:00:58,440
So what is the viewport?

16
00:00:58,450 --> 00:01:04,180
Well, viewport space represents a normalized position relative to our camera.

17
00:01:04,300 --> 00:01:07,270
That might seem like complete word salad to a lot of you.

18
00:01:07,270 --> 00:01:12,940
So let's bring in a picture of our game so we can relate it to something concrete in our game.

19
00:01:12,940 --> 00:01:19,120
We're already familiar with World Space, and these are the positions of our objects in the hierarchy.

20
00:01:19,330 --> 00:01:23,620
Viewport space, on the other hand, represents what the camera can see.

21
00:01:23,650 --> 00:01:28,180
Specifically, it's the normalized position relative to this camera.

22
00:01:28,270 --> 00:01:33,430
So down in the bottom left corner we start off at position zero zero.

23
00:01:33,430 --> 00:01:38,890
And then as we go around the edges in the bottom right corner, we have position one zero.

24
00:01:39,040 --> 00:01:42,070
In the top left we have position zero one.

25
00:01:42,070 --> 00:01:45,190
And in the top right we have position one one.

26
00:01:45,220 --> 00:01:48,460
And this is what it means by a normalized position.

27
00:01:48,580 --> 00:01:54,670
And to box in our player into what the camera can see, we're going to use a method called viewport

28
00:01:54,670 --> 00:01:55,960
two World Point.

29
00:01:55,960 --> 00:02:02,530
This method converts the normalized position on the screen to a 3D position in world space.

30
00:02:02,530 --> 00:02:08,620
So we can use this to find where the edges of the screen are relative to the player in the world.

31
00:02:08,620 --> 00:02:14,260
And when we go and do this in code, we're specifically going to be interested in the bottom left and

32
00:02:14,260 --> 00:02:18,910
top right corners of the screen, because this will encapsulate our entire viewport.

33
00:02:18,910 --> 00:02:23,440
So let's see how to use this method in code by jumping back to our player script.

34
00:02:23,440 --> 00:02:26,800
And we're going to need to vector two variables.

35
00:02:26,800 --> 00:02:32,740
The first one is going to be a vector two called the minimum bounce or the min bounce.

36
00:02:33,490 --> 00:02:38,620
And this is going to store that vector two for the bottom left of the viewport at zero zero.

37
00:02:39,190 --> 00:02:44,200
And then we're going to need another vector two for our maximum bounce, and that is going to store

38
00:02:44,230 --> 00:02:46,930
the value for the top right of that viewport.

39
00:02:47,470 --> 00:02:48,970
So initialize these two variables.

40
00:02:48,970 --> 00:02:54,790
Let's create a new method and we'll call this a void init bounce.

41
00:02:54,790 --> 00:03:01,450
So in it is just a shorthand for initialization here we're going to need reference to our main camera

42
00:03:01,600 --> 00:03:07,240
and rather than finding each time we need it, let's create a temporary variable of type camera and

43
00:03:07,240 --> 00:03:13,660
call it the main camera and we'll set this equal to camera dot main.

44
00:03:14,140 --> 00:03:19,870
So remember that camera dot main is the camera in the hierarchy that's tagged with that main camera

45
00:03:19,870 --> 00:03:23,680
flag with the camera found, let's set our minimum bounds.

46
00:03:23,680 --> 00:03:30,280
So say minimum bounds equals our main camera dot viewport to world point.

47
00:03:30,940 --> 00:03:36,400
This method expects a position to be passed into it, and rather than doing a vector three like it's

48
00:03:36,400 --> 00:03:40,750
asking us for, we're actually just going to pass in a vector too, because we don't really care about

49
00:03:40,750 --> 00:03:41,980
that Z component.

50
00:03:41,980 --> 00:03:46,810
And if we use a vector two instead, then that Z component will just automatically default to being

51
00:03:46,810 --> 00:03:47,410
zero.

52
00:03:47,410 --> 00:03:52,810
So let's pass in a new vector two at the coordinates of zero zero.

53
00:03:52,810 --> 00:03:55,360
So that bottom left corner of our viewport.

54
00:03:55,570 --> 00:03:59,410
Next, we need to follow a very similar process for our maximum bounce.

55
00:03:59,410 --> 00:04:02,620
So that is going to be the first of your challenges.

56
00:04:02,920 --> 00:04:06,010
I want you to set up the maximum bounce.

57
00:04:06,040 --> 00:04:11,170
It's going to be very similar to how we set up the minimum bounds, but we should be using the top right

58
00:04:11,170 --> 00:04:12,790
corner for our viewport.

59
00:04:12,790 --> 00:04:15,340
So pause the video and give that one a go.

60
00:04:20,560 --> 00:04:20,950
Okay.

61
00:04:20,950 --> 00:04:21,720
Welcome back.

62
00:04:21,730 --> 00:04:23,790
So hopefully that wasn't too hard.

63
00:04:23,800 --> 00:04:26,560
And in fact, it's so similar to our minimum balance.

64
00:04:26,560 --> 00:04:32,230
I'm just going to copy and paste and then going to rename our variable to maximum balance because that's

65
00:04:32,230 --> 00:04:33,430
the one we're setting.

66
00:04:33,430 --> 00:04:39,370
And rather than passing in the bottom left corner of the screen to our viewport to world point method,

67
00:04:39,370 --> 00:04:44,290
I'm going to change this from zero 0 to 1 one to be our top right corner.

68
00:04:44,680 --> 00:04:49,780
Next, we need to cool this in it, bounce from somewhere and we really only need to do it once for

69
00:04:49,780 --> 00:04:50,110
now.

70
00:04:50,110 --> 00:04:57,850
So I know we deleted it in the last lecture, but let's bring back our start method and in here we'll

71
00:04:57,850 --> 00:04:59,770
call this init bounce method.

72
00:05:00,490 --> 00:05:06,820
Next we need to go ahead and amend our move method to account for these boundaries that we're setting

73
00:05:06,820 --> 00:05:07,900
for the player movement.

74
00:05:08,170 --> 00:05:13,600
And we're going to do this again with another temporary vector, two variable called new position or

75
00:05:13,600 --> 00:05:19,360
new pose and start with let's just initialize that as a brand new vector too.

76
00:05:19,930 --> 00:05:26,230
This will allow us to then edit the X and the Y component of this new vector and then apply the changes

77
00:05:26,230 --> 00:05:28,390
back to the transform dot position.

78
00:05:28,390 --> 00:05:36,040
So let's start by clamping the X position of our player so we can say that the new dot x and to clamp

79
00:05:36,040 --> 00:05:41,470
this variable, we're going to use a method from the math f class called math f clamp.

80
00:05:41,470 --> 00:05:47,410
And what this will do is just restrict any values that float outside of the minimum and maximum values

81
00:05:47,410 --> 00:05:48,370
that we set.

82
00:05:48,370 --> 00:05:50,860
So we can see here that it needs three parameters.

83
00:05:50,860 --> 00:05:56,050
It needs the value being checked and it needs the minimum and maximum values that it needs to be checked

84
00:05:56,050 --> 00:05:56,890
against.

85
00:05:56,890 --> 00:06:02,650
So the value being passed in is going to be our transform dot position dot x.

86
00:06:02,650 --> 00:06:09,940
So the current position of our player plus the Delta X, so the amount we're going to be moving and

87
00:06:09,940 --> 00:06:17,110
this needs to be kept between our minimum balance dot X and our maximum bounds dot x.

88
00:06:18,300 --> 00:06:22,110
Next we need to do a similar thing but clamping our y position.

89
00:06:22,110 --> 00:06:23,880
So this is incredibly similar.

90
00:06:23,880 --> 00:06:30,360
So again, I'm just going to copy and paste my code, but this time we're setting our new position Y

91
00:06:30,390 --> 00:06:38,490
and we're clamping our transform position y plus our delta y and we're clamping that between the minimum

92
00:06:38,490 --> 00:06:41,910
bounds Y and the maximum bounds dot y.

93
00:06:42,480 --> 00:06:47,340
Finally, we need to apply this new position, which now includes our Delta movement.

94
00:06:47,340 --> 00:06:53,250
So at the bottom we can change our transform position to equal our new position.

95
00:06:53,910 --> 00:06:58,410
And while we're here, we've got a vector three for our delta position and a vector two for our new

96
00:06:58,410 --> 00:06:59,130
position.

97
00:06:59,130 --> 00:07:01,890
And we're generally working with two DX vectors for now.

98
00:07:01,890 --> 00:07:06,360
So we can actually go ahead and just change that to a vector two because we don't really care about

99
00:07:06,360 --> 00:07:08,010
that Z component for now.

100
00:07:08,010 --> 00:07:13,050
So let's go ahead and save our script and jump back over into Unity to test this all out.

101
00:07:13,920 --> 00:07:14,970
To say was waiting around.

102
00:07:14,970 --> 00:07:18,630
I'm just going to bump up my move speed for my player just a bit.

103
00:07:20,370 --> 00:07:25,970
And now if we move around, we can see that we now get trapped along the edges of our screen so we can

104
00:07:25,970 --> 00:07:27,800
no longer leave the edges.

105
00:07:28,250 --> 00:07:32,060
So also just check the top and yep, that all seems to be working as well.

106
00:07:32,300 --> 00:07:37,730
But notice that when we hit the edge of the screen, half of our player is still leaving the edge of

107
00:07:37,730 --> 00:07:38,530
the screen.

108
00:07:38,540 --> 00:07:43,910
And that's because the position of our player is being tracked from its pivot point, which by default

109
00:07:43,910 --> 00:07:45,980
is in the middle of our sprite.

110
00:07:46,220 --> 00:07:48,920
So we're going to need a way of accounting for that.

111
00:07:48,920 --> 00:07:53,270
And the way I'm going to do it is to add some padding around the edge of the screen, similar to how

112
00:07:53,270 --> 00:07:56,090
we might add padding to our UI elements.

113
00:07:56,120 --> 00:08:02,300
So back over in our player script, let's create some new variables and these are all going to be serialized

114
00:08:02,300 --> 00:08:02,990
fields.

115
00:08:02,990 --> 00:08:07,100
So I'm going to need four in total and they're all going to be Float.

116
00:08:07,340 --> 00:08:10,670
The first one is going to be called padding left.

117
00:08:13,320 --> 00:08:16,050
The second is going to be called padding.

118
00:08:16,050 --> 00:08:17,010
Right.

119
00:08:18,180 --> 00:08:19,170
And save the typing.

120
00:08:19,170 --> 00:08:21,510
I'm just going to copy this another two times.

121
00:08:22,290 --> 00:08:27,990
Call the third one padding top and the last one padding bottom.

122
00:08:29,340 --> 00:08:32,580
The next step is to figure out where we want to apply this padding.

123
00:08:32,610 --> 00:08:34,380
There are a couple of options.

124
00:08:34,380 --> 00:08:38,700
We could add it to our minimum and maximum bounds, but I'm actually going to add it to where we're

125
00:08:38,700 --> 00:08:40,830
calculating our new position.

126
00:08:41,039 --> 00:08:47,460
So when we're calculating our new X position and taking into account on minimum and maximum bounds,

127
00:08:47,460 --> 00:08:50,730
I'm also going to go ahead and add our padding in here.

128
00:08:50,760 --> 00:08:55,890
So in addition to our minimum bounds, we're going to want to add our left padding amount.

129
00:08:56,130 --> 00:09:03,540
And for our maximum balance, we're going to want to subtract our padding right amount with our X position

130
00:09:03,540 --> 00:09:04,110
set.

131
00:09:04,140 --> 00:09:06,450
Now let's do the same for our Y position.

132
00:09:06,450 --> 00:09:14,370
So again, in here, we're going to be adding our padding bottom and we're going to be subtracting our

133
00:09:14,370 --> 00:09:17,550
padding top from the maximum balance.

134
00:09:18,330 --> 00:09:22,890
With that set, let's save our script and jump back into the unity one more time.

135
00:09:23,400 --> 00:09:28,230
Now, I've changed our move speed here in the inspector, but I'm actually going to revert that for

136
00:09:28,230 --> 00:09:33,760
now and jump over into my player prefab and I need to set some values for our padding.

137
00:09:33,780 --> 00:09:40,650
If we look up in the transform, the scale of our player is one, one, one and we know with zero padding

138
00:09:40,650 --> 00:09:43,530
that half of our player goes off the screen.

139
00:09:43,530 --> 00:09:50,340
So if we want to keep our player fully in the screen, each of these values is going to have to be 0.5

140
00:09:50,340 --> 00:09:54,650
and I am going to set 0.5 to be my left and right padding for now.

141
00:09:54,660 --> 00:09:59,730
But for my top and bottom padding, I'm actually going to change things up a bit because we're going

142
00:09:59,730 --> 00:10:04,740
to want some extra padding at the bottom to account for the UI that we're going to add later on.

143
00:10:04,740 --> 00:10:09,870
And we need to make a design decision on whether we want the player to fully explore the top of the

144
00:10:09,870 --> 00:10:14,210
screen or do we want to constrict them to the lower portions?

145
00:10:14,220 --> 00:10:19,320
For now, I'm going to say that I don't want my player going right the way to the top of the screen.

146
00:10:19,320 --> 00:10:22,230
So I'm going to add a padding of around five.

147
00:10:22,230 --> 00:10:26,610
And for the bottom padding, I'm going to choose a value of around two.

148
00:10:26,640 --> 00:10:31,890
These definitely aren't set in stone, though, so let's come out of our prefab and hit play to test

149
00:10:31,890 --> 00:10:37,830
this out in our game so we can now see that we're nicely being constrained on the left side of the screen

150
00:10:38,280 --> 00:10:40,860
and nicely constrained on the right of the screen.

151
00:10:41,220 --> 00:10:46,200
If we go down, we've probably got just enough space for our UI, so we may want to bring that up a

152
00:10:46,200 --> 00:10:48,630
little bit later when we start implementing that.

153
00:10:49,260 --> 00:10:55,110
And if we go up, we're getting cut off just around three quarters of the way up the screen.

154
00:10:55,110 --> 00:11:00,660
Again, we may want to change that in the future and bring it down a little bit maybe to around here.

155
00:11:00,690 --> 00:11:06,450
But with our player now set up and able to move around, the next step is going to be to work on our

156
00:11:06,450 --> 00:11:09,330
enemies and getting those spawning into the level.

157
00:11:09,330 --> 00:11:11,880
We're going to start looking at that in the next lecture.

158
00:11:11,880 --> 00:11:13,050
So I'll see you there.