1
00:00:04,030 --> 00:00:09,700
With our core gameplay now pretty much finished, it's time to start thinking about the other menus

2
00:00:09,700 --> 00:00:11,440
that we're going to add to our game.

3
00:00:11,530 --> 00:00:16,270
And if you remember, way back when we were designing this game, we said we were going to want two

4
00:00:16,270 --> 00:00:17,170
other scenes.

5
00:00:17,170 --> 00:00:22,170
We wanted a main menu at the start of the game and a game over screen at the end.

6
00:00:22,180 --> 00:00:26,380
So this is what we're going to start building in this lecture, and we're going to mainly be focusing

7
00:00:26,380 --> 00:00:27,610
on the UI for now.

8
00:00:27,610 --> 00:00:30,910
But in the next lecture we're going to start hooking all of these up.

9
00:00:30,920 --> 00:00:35,260
So let's have a quick look through the flow now so we know what we're working towards.

10
00:00:35,470 --> 00:00:40,510
When the game starts, the player is going to be presented with the main menu screen, so it's got the

11
00:00:40,510 --> 00:00:42,760
game title and a couple of buttons.

12
00:00:42,790 --> 00:00:48,520
If they hit the quit button, then the game should just exit nicely and if they hit the start button,

13
00:00:48,520 --> 00:00:51,250
then it's going to transition into our core game.

14
00:00:51,280 --> 00:00:56,020
Our core game will then proceed as we rack up some score and deplete our health.

15
00:00:56,170 --> 00:01:01,060
And when the health reaches zero, we then want to transition into the game over screen.

16
00:01:01,060 --> 00:01:05,920
This game over screen looks very similar to our main menu and that's partly by design.

17
00:01:05,920 --> 00:01:10,480
But the big difference with this screen is it's also going to show the player their final score.

18
00:01:10,480 --> 00:01:15,790
So we are going to need a way to bring our score from our game over into this screen.

19
00:01:15,910 --> 00:01:20,860
And then for our buttons we've got a play again button which will launch us back into the game.

20
00:01:20,860 --> 00:01:24,970
So we get a nice loop here between our game and our game over screen.

21
00:01:24,970 --> 00:01:30,370
And finally we have a main menu button which will take the player back to the main menu screen where

22
00:01:30,370 --> 00:01:35,890
they can either start the game again and go the long way round our loop or quit out of the game entirely.

23
00:01:35,890 --> 00:01:37,930
So that's roughly what we're looking to build.

24
00:01:37,930 --> 00:01:41,560
So let's jump into unity and start work on our new UI.

25
00:01:41,920 --> 00:01:46,690
And for these two menus, we're actually going to be placing them in new scenes in our game.

26
00:01:46,840 --> 00:01:49,540
So let's jump over into our scenes folder.

27
00:01:49,630 --> 00:01:54,130
And we've currently got our sample scene because we never bothered to rename it when we started our

28
00:01:54,130 --> 00:01:54,760
project.

29
00:01:54,760 --> 00:01:58,960
So before we do anything, let's rename that to something a bit more descriptive.

30
00:01:58,960 --> 00:02:03,520
We might go with, say level one or I'm just going to go with game.

31
00:02:03,700 --> 00:02:09,820
And before we create a new scene and move over to that, let's also think about what's useful in this

32
00:02:09,820 --> 00:02:12,670
scene that we might want to reuse for the others.

33
00:02:12,700 --> 00:02:18,220
So let's jump into our prefabs folder and all of our prefabs at the moment are mostly useless for our

34
00:02:18,220 --> 00:02:24,010
menu systems, but if we look through our hierarchy then the background is probably going to be useful.

35
00:02:24,010 --> 00:02:25,780
So let's drag that down.

36
00:02:25,780 --> 00:02:30,850
We also have an audio player in here and we're probably going to want music in our other menus, so

37
00:02:30,850 --> 00:02:32,380
let's drag that in as well.

38
00:02:32,470 --> 00:02:37,960
And finally, we did say that we wanted to bring our score from our game into our end screen.

39
00:02:37,960 --> 00:02:41,680
And whilst our scorekeeper doesn't do that yet, it will do later on.

40
00:02:41,680 --> 00:02:45,340
So let's prefab our scorekeeper as well with our prefabs.

41
00:02:45,340 --> 00:02:46,060
All set.

42
00:02:46,060 --> 00:02:52,180
Let's go down back into our scenes folder and to create a new scene for our project, let's right click,

43
00:02:52,210 --> 00:02:55,120
go up to create and then down to sing.

44
00:02:55,480 --> 00:02:57,010
Let's give our scene a name.

45
00:02:57,010 --> 00:03:02,140
So let's start with the main menu and now we can go ahead and open that up.

46
00:03:02,290 --> 00:03:06,010
We're getting a warning message because we didn't save our game before changing.

47
00:03:06,010 --> 00:03:09,820
So let's save our current game and then move over into our main menu.

48
00:03:09,820 --> 00:03:13,960
And this presents us with the ever so dreadful blank unity canvas.

49
00:03:13,960 --> 00:03:17,740
So to make it pretty right off the bat, let's jump into our prefabs.

50
00:03:17,770 --> 00:03:21,400
Let's drag over our background and our audio player.

51
00:03:21,700 --> 00:03:25,840
We don't want the audio player interfering with what we're doing though, so let's switch our music

52
00:03:25,840 --> 00:03:30,280
off for now and then let's go ahead and create our new canvas.

53
00:03:30,280 --> 00:03:35,050
So let's right click in the hierarchy, go down to UI and then add a canvas.

54
00:03:35,050 --> 00:03:37,660
This brings in our event system for free.

55
00:03:37,660 --> 00:03:42,970
But remember, we do have to change our standalone input module so that it works with the new unity

56
00:03:42,970 --> 00:03:43,930
input system.

57
00:03:43,930 --> 00:03:45,520
So let's replace that.

58
00:03:45,640 --> 00:03:51,250
And because we've seen UI quite a bit now this again is going to be a challenge for you to design and

59
00:03:51,250 --> 00:03:52,660
create our UI.

60
00:03:52,690 --> 00:03:57,670
But before we go ahead and do that, there is a couple of things I'm going to be doing with my UI that

61
00:03:57,670 --> 00:04:00,850
I want to show you so that you have the option to do it as well.

62
00:04:01,030 --> 00:04:03,520
And the big changes come with our buttons.

63
00:04:03,520 --> 00:04:08,470
So let's right click on our canvas, go down to UI and add a button.

64
00:04:09,100 --> 00:04:15,010
And if we scroll down to our button component, this time, we are going to leave our transition as

65
00:04:15,010 --> 00:04:16,180
a colored tint.

66
00:04:16,180 --> 00:04:19,899
So let me explain what all of these color options are going to do for us.

67
00:04:19,899 --> 00:04:24,670
Let's start by going to our image component and changing the base color for our button.

68
00:04:24,670 --> 00:04:27,250
So let's create a kind of dusty red color.

69
00:04:27,670 --> 00:04:32,980
And now if we go ahead and hit play so we can see all of these in runtime, first of all, we have the

70
00:04:32,980 --> 00:04:38,590
normal color, and if the normal color is set to white, then the image color will take precedence.

71
00:04:38,590 --> 00:04:44,860
But we can also blend these colors by opening up our color picker so we can see if we pick a minty green

72
00:04:44,860 --> 00:04:50,140
color for our normal color, then we get this muddy ready green kind of color for our button.

73
00:04:50,530 --> 00:04:56,020
Next up, we have the highlight color and this effect, what happens when the button is hovered over.

74
00:04:56,020 --> 00:04:59,440
So let's create a nice, bright orange color.

75
00:05:00,540 --> 00:05:05,910
And now if we hover over our button, it will make a blend between this yellow and red we've got.

76
00:05:06,390 --> 00:05:09,610
But now we've got an idea of how this colour blending thing works.

77
00:05:09,630 --> 00:05:15,630
Let's actually set our image colour back to pure white so we can see our colours in our button component

78
00:05:15,630 --> 00:05:17,130
unhindered, as it were.

79
00:05:17,280 --> 00:05:22,440
We can see that this has changed our button to our normal colour of this minty green colour.

80
00:05:22,770 --> 00:05:29,070
If we hover over our button, it goes to our yellow and our pressed colour does exactly what you think.

81
00:05:29,070 --> 00:05:31,740
When we press the button it will change to this colour.

82
00:05:31,740 --> 00:05:34,380
So let's pick a nice, vibrant blue for this.

83
00:05:34,380 --> 00:05:37,020
And now we can hover over our button to get our yellow.

84
00:05:37,050 --> 00:05:39,570
We can press our button and it will turn blue.

85
00:05:39,600 --> 00:05:42,000
This is where our selected colour comes in.

86
00:05:42,000 --> 00:05:45,420
So let's change our selected colour to a purple.

87
00:05:45,990 --> 00:05:51,810
And now if we click back into our same view, we have our normal colour highlight in orange, click

88
00:05:51,810 --> 00:05:52,530
in blue.

89
00:05:52,530 --> 00:05:57,240
And now if we move away from our button to get rid of that highlight colour, we can see the button

90
00:05:57,240 --> 00:05:59,850
is currently selected in a very bright purple.

91
00:05:59,880 --> 00:06:02,760
Finally in our list we have the disabled colour.

92
00:06:02,790 --> 00:06:07,710
This is currently set to a mid transparent grey and this is the colour that gets selected when we turn

93
00:06:07,710 --> 00:06:09,720
our interactive flag off.

94
00:06:09,720 --> 00:06:14,910
So setting up these colour tint options can be very important because it will allow the player to know

95
00:06:14,910 --> 00:06:19,950
what they've hovered over, what they've currently clicked on, and if things in the game are working

96
00:06:19,950 --> 00:06:21,030
as expected.

97
00:06:21,030 --> 00:06:25,740
So let's come out of play mode and I'm going to delete the button that I've completely ruined.

98
00:06:25,740 --> 00:06:28,320
And now I think it's time for your challenge.

99
00:06:28,680 --> 00:06:34,830
I want you to go ahead and create a new menu scene if you haven't already, and then design the UI for

100
00:06:34,830 --> 00:06:35,970
our main menu.

101
00:06:36,300 --> 00:06:41,070
And then once you've got everything looking exactly how you want, I then want you to go ahead and create

102
00:06:41,070 --> 00:06:46,170
a new game over scene and again design the UI for the game over menu.

103
00:06:46,200 --> 00:06:51,840
Now as a couple of hints, you may want to create some new font assets so that you can have different

104
00:06:51,840 --> 00:06:53,850
styles of text in your game.

105
00:06:53,850 --> 00:06:59,130
So if you want to differentiate between a title and subtitle, for instance, these will require two

106
00:06:59,130 --> 00:07:03,390
font assets, but they can of course use the same font underneath.

107
00:07:03,390 --> 00:07:10,290
And because our main menu and game over are so similar, don't be afraid to duplicate one scene to start

108
00:07:10,290 --> 00:07:11,670
working on the next.

109
00:07:11,670 --> 00:07:14,520
So pause the video now and give that a go.

110
00:07:19,880 --> 00:07:20,360
Okay.

111
00:07:20,360 --> 00:07:21,300
Welcome back.

112
00:07:21,320 --> 00:07:24,620
So hopefully you now have two beautiful looking menus.

113
00:07:24,770 --> 00:07:25,520
Here's mine.

114
00:07:25,520 --> 00:07:26,420
All finished up.

115
00:07:26,420 --> 00:07:29,270
So let me walk you through what I've done to create this.

116
00:07:29,510 --> 00:07:33,790
First of all, you'll notice that the stars are moving a lot slower in the background.

117
00:07:33,800 --> 00:07:39,440
So all I did to change this was go into the background in the hierarchy, and then under each of our

118
00:07:39,440 --> 00:07:43,700
layers, I've just gone down to our sprite scroller and slowed these down.

119
00:07:43,790 --> 00:07:49,010
And I did this because at the default speed, they were just a little bit too quick and quite disorientating

120
00:07:49,010 --> 00:07:50,330
for a menu system.

121
00:07:50,540 --> 00:07:56,630
Then over on the canvas, I've set up my canvas scaler to scale with the screen size and given that

122
00:07:56,630 --> 00:07:58,340
a nice reference resolution.

123
00:07:58,820 --> 00:08:05,120
And then inside of this we've got the title text where I've created a brand new font asset using the

124
00:08:05,120 --> 00:08:07,190
same Kenny space font.

125
00:08:07,190 --> 00:08:13,010
But for this one, I've gone ahead and changed the vertex color and I've changed this to horizontal

126
00:08:13,010 --> 00:08:16,340
gradient to give me a nice two toned purple effect.

127
00:08:16,550 --> 00:08:22,190
And if we look down in the extra settings, then the face and outline are the same as default.

128
00:08:22,340 --> 00:08:28,100
But I've added some underlay with a negative y offset to give me this three dimensional look.

129
00:08:28,470 --> 00:08:34,340
I've also added a little bit of glow to make it pop, and if we enable and disable these two options,

130
00:08:34,340 --> 00:08:36,250
you'll see the effects that they have.

131
00:08:36,260 --> 00:08:42,919
So our underlay is giving us that three dimensional feel and the glow is just brightening up those colours

132
00:08:42,919 --> 00:08:43,490
a bit.

133
00:08:44,000 --> 00:08:46,640
Under my title I've added a subtitle.

134
00:08:46,790 --> 00:08:51,620
This one is reusing the same Kenny font from our game view for our score.

135
00:08:51,650 --> 00:08:58,040
All I've done is renamed it to Main Kenny to differentiate it from our title Kenny Font and I've stored

136
00:08:58,040 --> 00:09:02,090
both of these for reference in my asset pack under the Kenny Space font.

137
00:09:02,090 --> 00:09:04,820
So here you can see both of my font assets.

138
00:09:05,030 --> 00:09:10,880
Then for my buttons, I've placed these in a button group, so I've just created an empty game object

139
00:09:10,880 --> 00:09:14,150
and then added a vertical layout group for spacing.

140
00:09:14,150 --> 00:09:20,180
I've picked a spacing of around 25 and then rather than resizing the buttons manually, I've used this

141
00:09:20,180 --> 00:09:23,390
control child size option for the width and height.

142
00:09:23,630 --> 00:09:27,560
This will force the buttons to fill the space of this game object.

143
00:09:27,560 --> 00:09:33,290
So if we change the size of this box, then the buttons will always try and completely fill it.

144
00:09:33,560 --> 00:09:38,840
If we open up this group so we can see the buttons themselves, I've got a start button and a quick

145
00:09:38,840 --> 00:09:43,940
button and underneath these they have the text message pro elements for the text.

146
00:09:43,940 --> 00:09:48,680
This again is copying exactly the same main Kenny font that we've been using.

147
00:09:48,680 --> 00:09:54,380
But on the buttons themselves, if we look at the button component, then I've added some highlighting

148
00:09:54,380 --> 00:09:56,180
colours and some pressed colours.

149
00:09:56,180 --> 00:10:01,730
So when we highlight a button it will turn purple and when we press on a button it will go blue.

150
00:10:01,850 --> 00:10:04,220
So that's my main menu scene.

151
00:10:04,370 --> 00:10:10,700
And then for my end screen, once I'd finished this and saved everything in my scene, I went over to

152
00:10:10,700 --> 00:10:12,020
my scenes folder.

153
00:10:12,140 --> 00:10:19,940
I duplicated my main menu with Control D renamed that scene to game over and if we open it up, really

154
00:10:19,940 --> 00:10:26,150
all I've done is change the title text to game over and the subtitle text to Better Luck Next Time.

155
00:10:26,240 --> 00:10:29,690
And then I've moved this up slightly to make way for my score.

156
00:10:29,870 --> 00:10:34,490
So if we look under the canvas again, I've now got this score text as well.

157
00:10:34,490 --> 00:10:39,110
And again, this is just reusing our main Kenny space font assets.

158
00:10:39,110 --> 00:10:45,290
So if we play this scene, we can see the stars are still scrolling nice and slow and the buttons are

159
00:10:45,290 --> 00:10:46,640
highlighting nicely.

160
00:10:47,030 --> 00:10:51,140
So congratulations for making your main menu and your game over screen.

161
00:10:51,140 --> 00:10:56,390
And in the next lecture we're going to start looking at how to connect these buttons up and link scenes

162
00:10:56,390 --> 00:10:57,080
together.

163
00:10:57,080 --> 00:10:58,460
So I'll see you there.