1
00:00:03,710 --> 00:00:07,610
In this lecture, we're going to start looking at building the UI for our game.

2
00:00:08,320 --> 00:00:13,420
Now, before we just jump into unity and start adding things to a canvas, let's have a little think

3
00:00:13,420 --> 00:00:17,580
about what we're going to need to appear on this UI and where we're going to place it all.

4
00:00:17,590 --> 00:00:22,330
So let's bring up a screenshot of our current game so we can visualize what we're doing.

5
00:00:22,330 --> 00:00:27,570
And the first thing we're almost certainly going to want is to indicate the player's current health.

6
00:00:27,580 --> 00:00:33,490
Now, there are many ways to do this in a game such as this, we could go with a simple slider somewhere.

7
00:00:33,490 --> 00:00:36,970
We could potentially use something akin to heart containers.

8
00:00:37,210 --> 00:00:42,130
We could go with a simple text option to display the percentage of health or something like that.

9
00:00:42,370 --> 00:00:47,560
Or we could do something a bit more diegetic and potentially play around with the player's sprite.

10
00:00:47,560 --> 00:00:52,650
So we might have showed icons or damage that gets applied to the Sprite itself.

11
00:00:52,660 --> 00:00:56,950
That last one is probably a little bit out of scope for the UI we're going to be working with.

12
00:00:56,950 --> 00:01:02,080
So for me, I'm just going to use a simple slider because we've seen those before and it'll be good

13
00:01:02,080 --> 00:01:04,780
practice to use them in a different context.

14
00:01:05,110 --> 00:01:05,890
After health.

15
00:01:05,890 --> 00:01:10,540
I think the second most important thing to display to the player is going to be their current score.

16
00:01:10,570 --> 00:01:16,270
And when it comes to displaying score in a game, there really is only one option and that is text.

17
00:01:16,510 --> 00:01:21,370
Now for my game, I'm just going to stick with these two things, health and score.

18
00:01:21,400 --> 00:01:26,890
But if you want to expand your UI, then here's a couple of other things you might want to think about.

19
00:01:27,160 --> 00:01:32,170
You may want to add some information on the current wave or even potentially future waves.

20
00:01:32,350 --> 00:01:37,000
You may want to indicate whether the player has any power ups they can use or whether power ups have

21
00:01:37,000 --> 00:01:38,170
been activated.

22
00:01:38,170 --> 00:01:42,520
And if you're going with an endless runner style game, then you may want to add something like the

23
00:01:42,520 --> 00:01:43,570
playtime.

24
00:01:43,570 --> 00:01:49,180
So with thoughts on what UI we're going to include now, let's think about where we're going to place

25
00:01:49,180 --> 00:01:49,630
it all.

26
00:01:49,840 --> 00:01:54,820
And the trick with UI is it should be easily accessible but non intrusive.

27
00:01:54,820 --> 00:01:59,950
So first of all, let's think about where the player's eye is generally going to be focused when playing

28
00:01:59,950 --> 00:02:00,700
our game.

29
00:02:00,700 --> 00:02:05,200
Well, I think it's probably going to be most focused around the area where our enemies are going to

30
00:02:05,200 --> 00:02:07,150
be, so around the center of the screen.

31
00:02:07,330 --> 00:02:12,550
But we do also have our player ship and the player is going to be looking at that quite a lot.

32
00:02:12,550 --> 00:02:18,100
So with this general idea of where the eye is going to be tracking, it would make sense in this case

33
00:02:18,100 --> 00:02:21,400
to probably have our UI at the bottom of the screen.

34
00:02:21,400 --> 00:02:27,310
So with a general game plan in hand, let's jump over to Unity and start implementing this.

35
00:02:27,610 --> 00:02:30,970
So to add our UI, we're going to need a canvas.

36
00:02:30,970 --> 00:02:36,370
So let's right click on our hierarchy, go down to UI and then add our canvas.

37
00:02:36,370 --> 00:02:40,180
When we add this canvas, we also get the event system for free.

38
00:02:40,180 --> 00:02:45,400
But if we click on our event system in our current project, we're currently getting a warning message.

39
00:02:45,400 --> 00:02:51,820
And this is because we're using the new unity input system and it's by default set up for the old system.

40
00:02:51,820 --> 00:02:57,880
This isn't going to be relevant for this particular scene because our UI isn't intractable, but because

41
00:02:57,880 --> 00:02:59,560
we will be using it later on.

42
00:02:59,560 --> 00:03:04,510
Let's just go ahead and click on this replace with Unity Input System button here.

43
00:03:04,540 --> 00:03:09,280
This will set up a bunch of stuff behind the scenes that we really don't need to worry about, but it

44
00:03:09,280 --> 00:03:13,990
will now allow all of our UI to be interacted with via the new input system.

45
00:03:14,140 --> 00:03:18,820
So with that set up, the next step is let's click on our canvas.

46
00:03:18,820 --> 00:03:23,290
And the last time we used the canvas, we pretty much ignored most of the stuff that was going on in

47
00:03:23,290 --> 00:03:23,740
here.

48
00:03:23,770 --> 00:03:30,130
But because we're not working with a fixed pixel size now, we're working with an aspect ratio, things

49
00:03:30,130 --> 00:03:34,210
are going to change based on how big or small our screen is.

50
00:03:34,210 --> 00:03:39,540
So the first step to making this function nicely is to change our canvas scalar.

51
00:03:39,550 --> 00:03:44,080
We can see that it's currently got a UI scale mode of constant pixel size.

52
00:03:44,080 --> 00:03:45,550
This isn't what we want though.

53
00:03:45,550 --> 00:03:51,130
We want things to grow and shrink based on the amount of screen real estate they're taking up.

54
00:03:51,250 --> 00:03:54,790
So let's change this to scale with screen size.

55
00:03:55,090 --> 00:03:58,030
This will then ask us for a reference resolution.

56
00:03:58,030 --> 00:04:05,080
So let's pick something that's in the nine by 16 range and I think maybe 1080 by 1920.

57
00:04:05,080 --> 00:04:12,190
So HD resolution but on its side with that set now let's start adding some elements to our UI and my

58
00:04:12,190 --> 00:04:14,320
UI is going to have three things.

59
00:04:14,320 --> 00:04:17,980
First of all, it's going to have a UI panel.

60
00:04:18,160 --> 00:04:22,270
And remember, this comes in absolutely giant in comparison to our game world.

61
00:04:22,270 --> 00:04:25,210
So let's double click on our canvas so we can see it all.

62
00:04:25,450 --> 00:04:31,690
And by default, this is already set to stretch regardless of what size our screen is.

63
00:04:31,690 --> 00:04:34,870
But we don't want this panel taking up the entire screen.

64
00:04:34,870 --> 00:04:37,390
So let's change this size a little bit.

65
00:04:37,570 --> 00:04:41,260
First of all, we're going to move the anchors and there's a few ways to do this.

66
00:04:41,260 --> 00:04:45,250
We could change them with our anchor presets if we wanted to.

67
00:04:45,370 --> 00:04:50,230
We could change them manually by typing in the numbers we want or in the scene view.

68
00:04:50,260 --> 00:04:53,680
We can click on the handles and start dragging them around.

69
00:04:54,040 --> 00:05:01,510
So I'm going to drag them down to be about 0.07, so about 7% of the total height of our screen.

70
00:05:01,600 --> 00:05:07,630
And then to fit the image inside of those anchors, we're just going to change the rect transform and

71
00:05:07,630 --> 00:05:07,720
we.

72
00:05:07,750 --> 00:05:11,160
You can see the top alignment is -1700.

73
00:05:11,170 --> 00:05:12,730
So let's change that to zero.

74
00:05:12,790 --> 00:05:15,550
And now it fits nicely at the bottom of our screen.

75
00:05:15,670 --> 00:05:21,820
And if we go ahead and resize our game view, we'll see that our panel always occupies the same percentage

76
00:05:21,820 --> 00:05:22,770
of the screen.

77
00:05:22,780 --> 00:05:28,480
So anchors are really important and very useful for making sure elements stay where they're supposed

78
00:05:28,480 --> 00:05:29,020
to be.

79
00:05:29,260 --> 00:05:32,390
Now, inside of our panel, we're going to need two things.

80
00:05:32,410 --> 00:05:36,520
First of all, we're going to need a UI slider for our health.

81
00:05:36,520 --> 00:05:38,650
So let's call this the health slider.

82
00:05:39,190 --> 00:05:45,910
To set this into position, I'm going to break our anchors apart so that it fills the total height of

83
00:05:45,910 --> 00:05:49,360
our panel, but it only extends around halfway.

84
00:05:49,390 --> 00:05:52,060
Then let's reset the rect transform.

85
00:05:52,740 --> 00:05:57,060
And rather than allowing it to go right to the edges, let's add some padding.

86
00:05:57,060 --> 00:06:03,870
So I'm going to add a left padding of maybe around 25 and a right padding of around 25.

87
00:06:04,080 --> 00:06:06,260
This positioning looks about right to me.

88
00:06:06,270 --> 00:06:09,420
So then down in the slider, let's turn off interactive.

89
00:06:09,600 --> 00:06:13,050
Because we don't want the player to be dragging that slider around.

90
00:06:13,170 --> 00:06:18,810
We're not going to need any transitions so we can set that to none and to make it easier to see our

91
00:06:18,810 --> 00:06:20,760
colors that we're going to be adding later.

92
00:06:20,790 --> 00:06:23,700
Let's just set the value around 0.5.

93
00:06:23,790 --> 00:06:28,830
Finally, because our slider isn't going to be intractable, we're not going to need the handle.

94
00:06:28,860 --> 00:06:32,430
So you can go ahead and either disable that or delete it entirely.

95
00:06:33,060 --> 00:06:35,550
Finally, for our UI, we want some score text.

96
00:06:35,550 --> 00:06:41,980
So let's again right click on our panel, go down to UI and then up to text, text mesh pro.

97
00:06:42,030 --> 00:06:46,410
If we haven't already imported our TMP essentials, let's go ahead and do that.

98
00:06:46,410 --> 00:06:51,660
Now, if you can't see this pop up window, then just make sure that it isn't hidden behind another

99
00:06:51,660 --> 00:06:55,050
window or on another monitor if you've got a multi-monitor setup.

100
00:06:55,050 --> 00:07:00,420
And then once that's done, we can close our window in here, we're again going to want to break our

101
00:07:00,420 --> 00:07:01,260
anchors apart.

102
00:07:01,260 --> 00:07:03,540
So let's scroll in so we can see a little better.

103
00:07:04,320 --> 00:07:10,260
So again, this is going to take up the full height of our panel and around half of its width and place

104
00:07:10,260 --> 00:07:11,600
our text in the center.

105
00:07:11,610 --> 00:07:16,560
Let's change the left padding again to around 25 to bring in a touch.

106
00:07:16,830 --> 00:07:21,060
Let's set the top to zero, the right to 25 and the bottom to zero.

107
00:07:21,450 --> 00:07:25,740
Then to arrange our text, let's go into our text mesh element.

108
00:07:25,920 --> 00:07:30,150
And rather than giving a fixed font size, let's select auto size.

109
00:07:30,150 --> 00:07:36,570
Instead, if we take a look in the auto size options, then we can set a minimum and maximum font size.

110
00:07:36,570 --> 00:07:39,690
So I'm going to go with a minimum of around five and a maximum.

111
00:07:39,690 --> 00:07:46,710
I'll leave at 72 for now and for the alignment, I'm going to go with a right middle alignment.

112
00:07:46,950 --> 00:07:52,050
And then so we're not looking at new text, let's add some numbers into the box so we can see how they

113
00:07:52,050 --> 00:07:52,740
all look.

114
00:07:52,950 --> 00:07:58,290
To me, they do look a little bit rubbish at the moment because we are using the default liberacion

115
00:07:58,290 --> 00:08:03,480
sans font, but with our elements now in place, it's time for your challenge.

116
00:08:03,870 --> 00:08:07,650
I want you to go ahead and improve the look of your UI.

117
00:08:07,800 --> 00:08:13,680
So for this I want you to be thinking about the color scheme of your UI and I also want you to find

118
00:08:13,680 --> 00:08:16,110
a nicer font for our score text.

119
00:08:16,110 --> 00:08:20,280
So pause the video now and work on the design for your UI.

120
00:08:25,740 --> 00:08:26,220
Okay.

121
00:08:26,220 --> 00:08:27,120
Welcome back.

122
00:08:27,150 --> 00:08:32,220
So hopefully you had fun designing the UI for your game and picking a nice color scheme while you've

123
00:08:32,220 --> 00:08:32,720
been away.

124
00:08:32,730 --> 00:08:38,610
I've set up mine in this nice blue and purple scheme, so let me walk you through the changes that I've

125
00:08:38,610 --> 00:08:39,260
made.

126
00:08:39,270 --> 00:08:40,710
So on my panel.

127
00:08:40,710 --> 00:08:44,010
The only thing I've really changed here is the image color.

128
00:08:44,280 --> 00:08:48,690
So I've gone with this nice purply color over on our health slider.

129
00:08:48,690 --> 00:08:55,170
If we look at the background, I've reused that exact same color but at full opacity and for the fill

130
00:08:55,170 --> 00:08:58,350
under the fill area I've picked this nice blue color.

131
00:08:58,650 --> 00:09:03,090
Then over on the text side of things, I've gone ahead and found a nice font I liked.

132
00:09:03,090 --> 00:09:08,850
The look of this again is from Kenny and it's called Kenny Space because we're working with Text Mesh

133
00:09:08,860 --> 00:09:12,090
Pro, we need to turn that font into a font asset.

134
00:09:12,090 --> 00:09:13,530
So remember we can do that.

135
00:09:13,530 --> 00:09:21,240
If we select our font, we can go up to window down to text mesh pro and then click on font asset creator,

136
00:09:21,240 --> 00:09:25,470
select our font that we want to create and then generate our font atlas.

137
00:09:25,620 --> 00:09:26,610
With that set.

138
00:09:26,610 --> 00:09:32,850
We're then able to drag that into the font asset section and create this outline effect.

139
00:09:32,850 --> 00:09:38,460
What I've done is, rather than playing with the vertex color of the entire text, I've gone down to

140
00:09:38,460 --> 00:09:45,300
the bottom under extra settings in text mesh pro, and I've adjusted the face color to be that same

141
00:09:45,300 --> 00:09:47,790
blue color that we used for our health slider.

142
00:09:47,790 --> 00:09:53,040
But I've turned the opacity right the way down and then I've added the same blue again.

143
00:09:53,040 --> 00:10:00,570
But as an outline at full opacity, I've added a thickness of around 0.25 and then to really make it

144
00:10:00,570 --> 00:10:07,590
pop, I've also added some glow with our game UI now sorted, it's time to write some code to get all

145
00:10:07,590 --> 00:10:12,630
of this connected up, but to stop this lecture from becoming too long, we'll stop things there for

146
00:10:12,630 --> 00:10:16,260
now and work on hooking everything up in the next lecture.

147
00:10:16,260 --> 00:10:17,580
So I'll see you there.