1
00:00:03,730 --> 00:00:09,010
In this lecture, we're going to learn all about the UI canvas and set up a background image for our

2
00:00:09,010 --> 00:00:09,580
game.

3
00:00:10,560 --> 00:00:10,950
Okay.

4
00:00:10,950 --> 00:00:13,800
So here we are in a brand new Unity 2D project.

5
00:00:13,800 --> 00:00:16,500
So if you haven't set that up just yet, go ahead and do that.

6
00:00:16,500 --> 00:00:24,300
Now, you can see in the top here that I've called mine Quizmaster and I'm using Unity 2020 1.1.7.

7
00:00:24,300 --> 00:00:31,470
I've also gone ahead and renamed my sample scene to game and I've imported the sprite pack that's attached

8
00:00:31,470 --> 00:00:33,240
to the resources for this lecture.

9
00:00:33,240 --> 00:00:35,700
So in here we have a background image for the game.

10
00:00:35,700 --> 00:00:42,300
We have a couple of different button images and we also have the pre visualization images that you saw

11
00:00:42,300 --> 00:00:44,640
in my game design document in the last lecture.

12
00:00:44,760 --> 00:00:50,640
So feel free to download those and import them into your own project or you can go ahead and create

13
00:00:50,640 --> 00:00:56,520
your own images and you can just use these provided ones for a rough idea of the size they need to be

14
00:00:56,520 --> 00:00:59,730
so that you can follow along without any weird scaling issues.

15
00:00:59,970 --> 00:01:05,880
Now, before we go ahead and add anything else to our project, let's actually discuss what UI is and

16
00:01:05,880 --> 00:01:07,290
how a canvas works.

17
00:01:07,860 --> 00:01:13,860
So whenever you hear the term UI in game development, this tends to mean user interface.

18
00:01:13,860 --> 00:01:20,190
And the user interface includes everything from text boxes, buttons, sliders, menus, mini maps and

19
00:01:20,190 --> 00:01:25,860
pretty much anything that the user can interact with that isn't part of the game world itself.

20
00:01:26,160 --> 00:01:31,560
Now, in Unity, the UI elements, as they're known, live on something called a canvas.

21
00:01:31,560 --> 00:01:38,490
Now this canvas generally exists in something called screen space and is mostly separated from the game

22
00:01:38,490 --> 00:01:45,000
world, which exists in world space because these canvas objects are objects in the hierarchy.

23
00:01:45,000 --> 00:01:50,730
We can also have multiple canvases in our game and this is going to come in really handy for our quiz

24
00:01:50,730 --> 00:01:55,740
game because we're going to be separating things like the quiz itself from the background elements so

25
00:01:55,740 --> 00:02:01,260
that we can flick between canvases without having to change everything every time we change screen.

26
00:02:01,650 --> 00:02:07,170
So if we jump back over into unity, let's actually have a look at the canvas in a bit more detail.

27
00:02:07,350 --> 00:02:10,740
As I mentioned, this is an object that exists in the hierarchy.

28
00:02:10,740 --> 00:02:17,880
So to add one, we can go over to our hierarchy area, right click, head down to UI and then click

29
00:02:17,880 --> 00:02:19,110
on canvas.

30
00:02:19,380 --> 00:02:24,600
Now the first thing you might notice is that we have a canvas being added, but we've also had an event

31
00:02:24,600 --> 00:02:25,620
system added.

32
00:02:25,620 --> 00:02:28,890
Now you don't really have to worry too much about the event system for now.

33
00:02:28,920 --> 00:02:33,600
Really, the only thing you need to know at this stage is not to delete it because we are going to be

34
00:02:33,600 --> 00:02:35,400
using the event system later on.

35
00:02:35,790 --> 00:02:40,500
Now, if we click on the canvas and take a look at the inspector, the first thing you'll notice in

36
00:02:40,500 --> 00:02:45,600
here is that it doesn't have a standard transform component like every other object you will have encountered

37
00:02:45,600 --> 00:02:46,320
so far.

38
00:02:46,650 --> 00:02:51,840
Instead, we have something called a rect transform, and this works fairly similar to the standard

39
00:02:51,840 --> 00:02:52,860
transform component.

40
00:02:52,860 --> 00:02:58,650
So it has a position, a rotation and a scale, but it also has some extra stuff in there as well.

41
00:02:58,650 --> 00:03:00,570
So we have things like the width and height.

42
00:03:00,690 --> 00:03:03,690
We have some anchor points and pivot point information.

43
00:03:04,200 --> 00:03:07,290
Now in time we'll also get familiar with these other components.

44
00:03:07,290 --> 00:03:10,980
So the canvas component, the canvas scalar and the graphics ray caster.

45
00:03:10,980 --> 00:03:15,150
But for now we can just leave all of that alone and we'll just come to look at these when we actually

46
00:03:15,150 --> 00:03:17,040
need to change things in the future.

47
00:03:17,550 --> 00:03:22,800
Now, adding just a canvas on its own to our project isn't particularly exciting, and to really see

48
00:03:22,800 --> 00:03:25,920
all of it in action, we need to add something to that canvas.

49
00:03:25,920 --> 00:03:31,860
So we're going to start off with a simple image and whenever we add stuff to the UI, it has to be a

50
00:03:31,860 --> 00:03:34,140
child of the canvas itself.

51
00:03:34,260 --> 00:03:39,960
So if we go ahead and right click on the canvas rather than in the general hierarchy area, head down

52
00:03:39,960 --> 00:03:42,630
to UI and then click on image.

53
00:03:42,990 --> 00:03:45,270
We'll add an image to our canvas.

54
00:03:45,420 --> 00:03:51,300
Now if we look closely, we can't actually see anything in our camera view here, but if we change over

55
00:03:51,300 --> 00:03:55,440
to the game view, then lo and behold, here is our nice big sprite.

56
00:03:55,740 --> 00:03:58,710
So why isn't it showing up in our same view?

57
00:03:58,920 --> 00:04:02,910
Well, if we flick back over to the same view, this is the camera view.

58
00:04:02,910 --> 00:04:06,060
So this is looking at the world space of our game.

59
00:04:06,060 --> 00:04:12,270
But as I mentioned in the earlier slides, the canvas exists in screen space and you may be able to

60
00:04:12,270 --> 00:04:14,940
see this kind of white outline on the edge here.

61
00:04:14,940 --> 00:04:17,730
And that's actually the corner of our canvas.

62
00:04:18,000 --> 00:04:23,850
So let's double click on our canvas to center it and you'll notice we zoom all the way out and down

63
00:04:23,850 --> 00:04:25,200
in the bottom left corner.

64
00:04:25,200 --> 00:04:28,830
You might still just about be able to see where the camera view is.

65
00:04:29,190 --> 00:04:34,140
We can also see that our sprite has now shown up in the center of our canvas area.

66
00:04:34,290 --> 00:04:40,620
But even though the canvas is significantly bigger in scene view, in game view, everything comes together

67
00:04:40,620 --> 00:04:46,500
with world space behind the camera and then the screen space being overlaid on top.

68
00:04:46,890 --> 00:04:53,400
And to demonstrate this a little bit better, let's also go ahead and add a sprite from our 2D objects

69
00:04:53,400 --> 00:04:56,280
and we'll just add a circle so we can tell the difference.

70
00:04:56,730 --> 00:05:03,210
We'll set the position to be, say, five on the X axis and zero on the Y axis, and we can see our

71
00:05:03,210 --> 00:05:04,170
circle here.

72
00:05:04,770 --> 00:05:09,480
And then if we click on the canvas image so we can see the difference in position.

73
00:05:09,940 --> 00:05:12,040
Opposition here is at zero zero.

74
00:05:12,040 --> 00:05:18,520
But if we change the x axis to be five so it's the same as the circle, we notice the square only moves

75
00:05:18,520 --> 00:05:19,800
ever so slightly.

76
00:05:19,810 --> 00:05:25,600
So this can be a little bit confusing when you first encounter the world space and screen space working

77
00:05:25,630 --> 00:05:26,320
together.

78
00:05:26,440 --> 00:05:30,640
But with a little bit of time and a little bit of practice, then all of this should hopefully become

79
00:05:30,640 --> 00:05:32,920
fairly intuitive as we move forward.

80
00:05:33,190 --> 00:05:38,500
For now, let's just go ahead and delete our Circle Sprite because we don't really need it for our game

81
00:05:38,500 --> 00:05:40,870
because we're working purely within the UI.

82
00:05:40,870 --> 00:05:45,070
So for this project, we're not actually going to have to worry about that kind of difference between

83
00:05:45,070 --> 00:05:46,720
screen space and world space.

84
00:05:46,720 --> 00:05:49,840
It's just something that I wanted to point out so that you are aware of it.

85
00:05:50,530 --> 00:05:56,170
Now if we head back into same view so we can work on things a little bit easier and click back on our

86
00:05:56,170 --> 00:05:56,980
image.

87
00:05:57,010 --> 00:06:00,310
If we scroll in a little bit so we can see what we're doing a bit clearer.

88
00:06:00,610 --> 00:06:06,220
And if we head back over to the inspector, we can see that our rect transform now has all of the options

89
00:06:06,220 --> 00:06:08,230
open for us to be able to change.

90
00:06:08,230 --> 00:06:13,090
So in addition to us being able to change things like the position, the rotation and the scale, we

91
00:06:13,090 --> 00:06:15,670
can also play around with some of these other options.

92
00:06:15,670 --> 00:06:22,090
As you might expect, if we change the width of our square, then the width will increase and the same

93
00:06:22,090 --> 00:06:23,680
goes for the height.

94
00:06:23,920 --> 00:06:28,270
But notice as well that the x and y position are also changing.

95
00:06:28,270 --> 00:06:34,840
So let's reset that back to zero and we can see that the Sprite gets represented back on the center

96
00:06:34,840 --> 00:06:35,710
of the screen.

97
00:06:35,710 --> 00:06:40,000
And that's because this is viewing the center of the screen as the zero position.

98
00:06:40,420 --> 00:06:46,090
This isn't necessarily fixed in stone, though, and we can change it based on the anchors for our image.

99
00:06:46,090 --> 00:06:50,020
And we can see here that we've got options to set the different anchor points.

100
00:06:50,200 --> 00:06:55,810
However, rather than amending the anchors and pivot manually for now, let's actually click on this

101
00:06:55,810 --> 00:07:00,160
icon in the top left of the rect transform this little square with the Red Cross in it.

102
00:07:00,610 --> 00:07:05,020
If we click on this, this will give us some anchor presets that we can use.

103
00:07:05,020 --> 00:07:11,200
So if we click on, say, the top left, this will anchor our image to the top left of the screen.

104
00:07:11,440 --> 00:07:16,240
And I don't know if you can see this, but we've got this icon here that was previously in the center

105
00:07:16,240 --> 00:07:19,330
of our square but is now locked to the top corner.

106
00:07:19,750 --> 00:07:25,240
Our image hasn't actually moved, but if we look at the rect transform behind this window, we can see

107
00:07:25,240 --> 00:07:31,030
that our position has changed from zero 0 to 5, seven, seven and negative to 60.

108
00:07:31,600 --> 00:07:36,550
If we set these back to zero, then the center of our image goes to the top left corner.

109
00:07:36,670 --> 00:07:39,070
And this brings us onto the pivot point.

110
00:07:39,070 --> 00:07:44,560
So our pivot point of our image is currently the center of our sprite, but we can also change this

111
00:07:44,560 --> 00:07:50,560
and we again have some options here that we can play around with or we can use the anchor preset option

112
00:07:50,560 --> 00:07:51,100
again.

113
00:07:51,100 --> 00:07:54,850
And this time let's hold shift to also set the pivot.

114
00:07:54,910 --> 00:08:01,750
So holding shift we notice the icons all change to add this little blue pivot icon and if we again click

115
00:08:01,750 --> 00:08:07,480
on the top left corner, we'll notice again that our position has been changed and if we set this back

116
00:08:07,480 --> 00:08:12,550
to zero, the pivot point is now the top left of our image and so is the anchor.

117
00:08:12,550 --> 00:08:16,000
So it's now anchored the sprite to the top corner of the screen.

118
00:08:16,600 --> 00:08:22,660
One final thing we can do in this anchor preset is also set the position by holding down the alt key.

119
00:08:22,660 --> 00:08:27,460
If we hold down the alt key will notice again that the image is changed to represent the image being

120
00:08:27,460 --> 00:08:33,340
moved and we can actually do both of these things together so we can set the position and the pivot

121
00:08:33,340 --> 00:08:37,000
point by holding shift and alt and let's pick a different option.

122
00:08:37,000 --> 00:08:39,220
Let's move it to the top right instead.

123
00:08:39,490 --> 00:08:45,010
And if we do that, then notice that the anchor moves, the pivot moves as well, and so does the image.

124
00:08:45,340 --> 00:08:47,950
And now some other great options within these anchor presets.

125
00:08:47,950 --> 00:08:51,970
Are these options around the edge, which will allow us to stretch the image.

126
00:08:51,970 --> 00:08:57,700
So if we again hold shift alt and then click on this top one, we could say stretch the image across

127
00:08:57,700 --> 00:09:03,700
the entire top of the screen and notice how the anchor, which used to be a cross, is now been split

128
00:09:03,700 --> 00:09:04,660
down the middle.

129
00:09:04,660 --> 00:09:08,650
So we have two anchor points on this side and two anchor points on this side.

130
00:09:08,770 --> 00:09:13,660
An options like this that stretch across the top or bottom of the screen are great for things like menu

131
00:09:13,660 --> 00:09:15,040
bars and stuff like that.

132
00:09:15,040 --> 00:09:18,790
But for us, we're going to be adding a background image to our canvas.

133
00:09:18,790 --> 00:09:22,240
So we're actually going to use this one in the bottom right corner.

134
00:09:22,240 --> 00:09:28,480
So if we hold Shift Alt and then click on this, it will break the anchors apart again and it will stretch

135
00:09:28,480 --> 00:09:30,850
the image across the entire canvas.

136
00:09:30,940 --> 00:09:36,100
And this will be the case regardless of the aspect ratio or resolution that your game is in.

137
00:09:36,100 --> 00:09:41,500
And while we're on the subject of resolutions, we could reasonably use these different anchors and

138
00:09:41,500 --> 00:09:47,950
pivots and setups to design a game that can work on multiple different resolutions and aspect ratios.

139
00:09:47,950 --> 00:09:53,770
But since this is our first foray into the UI and the rect transform, let's actually just design our

140
00:09:53,770 --> 00:09:56,650
game with one specific resolution in mind.

141
00:09:56,650 --> 00:10:00,550
And that's going to be the most common resolution, which is HD.

142
00:10:00,910 --> 00:10:08,500
So over in our game view, there's change from free aspect to full HD 1920 by 1080.

143
00:10:08,800 --> 00:10:13,630
And now whenever we look at our game view, we'll always have a good idea of our target resolution.

144
00:10:13,990 --> 00:10:18,520
Now let's jump back into our same view and actually do some work on our game.

145
00:10:18,670 --> 00:10:23,380
Now, rather than making this the background image for our game, I'm actually going to turn this into

146
00:10:23,380 --> 00:10:29,140
a pre visualization image which will help us to lay out elements of our game as we move forward.

147
00:10:29,320 --> 00:10:34,690
So down in our sprites folder, I'm going to take the first pre visualization image that I've got and

148
00:10:34,690 --> 00:10:36,610
drag it into the source image.

149
00:10:36,610 --> 00:10:41,950
And because I want this to appear on top of everything else and be slightly faded out so we can see

150
00:10:41,950 --> 00:10:48,520
behind it, I'm going to change the color and I'm just going to bring the alpha value down to say around

151
00:10:48,520 --> 00:10:49,690
0.25.

152
00:10:50,520 --> 00:10:57,210
And on the canvas itself, I'm going to change the canvas, sort order and just increase up to, say,

153
00:10:57,210 --> 00:10:58,200
100.

154
00:10:58,230 --> 00:11:03,840
All this really means is that it will appear on top of any other canvases that we add with a lower salt

155
00:11:03,840 --> 00:11:04,350
order.

156
00:11:04,770 --> 00:11:09,840
And finally, I'm going to rename my canvas to the pre visualization canvas.

157
00:11:10,640 --> 00:11:14,060
And that, I think, brings us nicely on to your challenge.

158
00:11:14,750 --> 00:11:18,980
I want you to add a second canvas to the hierarchy.

159
00:11:19,490 --> 00:11:24,200
And on this second canvas, I want you to add to the background image for your game so you can either

160
00:11:24,200 --> 00:11:28,160
use the one that came in the resources or find your own for your particular game.

161
00:11:28,160 --> 00:11:32,210
And I want you to make this image stretch to fill the entire screen.

162
00:11:32,240 --> 00:11:34,820
So pause the video now and give that a go.

163
00:11:40,200 --> 00:11:40,650
Okay.

164
00:11:40,650 --> 00:11:41,580
Welcome back.

165
00:11:41,730 --> 00:11:47,450
So to add a second canvas to our hierarchy, we're going to go over to our hierarchy area, right click,

166
00:11:47,460 --> 00:11:50,700
go down to UI and then select canvas.

167
00:11:51,030 --> 00:11:56,100
This allowed a second canvas and I'm going to rename this to the background canvas.

168
00:11:57,000 --> 00:11:59,700
Then we're going to right click on our canvas.

169
00:12:00,480 --> 00:12:04,140
Head down to UI again and go up to image.

170
00:12:04,410 --> 00:12:10,650
We can then make this stretch across the entire screen by going to our anchor presets, holding shift

171
00:12:10,650 --> 00:12:13,440
alt, and then selecting this bottom right option.

172
00:12:14,010 --> 00:12:19,740
And then finally we can take our background sprite image and drag that into the source image.

173
00:12:19,980 --> 00:12:25,050
If we want to see our background on Obscured, then we can just click on our pre visualization canvas

174
00:12:25,050 --> 00:12:30,270
and hide it and with our canvas all set up, that puts us in a great place for the next lecture where

175
00:12:30,270 --> 00:12:32,640
we're going to start adding some text to our canvas.

176
00:12:32,650 --> 00:12:34,020
So I'll see you there.