1
00:00:00,000 --> 00:00:00,000
Hello, guys.

2
00:00:00,000 --> 00:00:03,000
In this section, we're going to make a menu for our game.

3
00:00:03,000 --> 00:00:04,000
It's going to be pretty simple task.

4
00:00:04,000 --> 00:00:09,000
And first, what I want to do is to get asset for the menu, because I want this menu to be pretty.

5
00:00:09,000 --> 00:00:14,000
And I guess it's better we get an asset rather than make it from scratch by ourself.

6
00:00:14,000 --> 00:00:20,000
And personally, me, If I'll do it, I'm sure it will be ugly because I'm no artist at all.

7
00:00:20,000 --> 00:00:24,000
So what we need to do here is to go to Window and click Asset Store.

8
00:00:24,000 --> 00:00:28,000
Probably yours will open in the window inside of unity.

9
00:00:28,000 --> 00:00:34,000
If you're using unity for the first time, then you can click a checkbox that says Open an browser and

10
00:00:34,000 --> 00:00:40,000
next time you click as a store from window over here, it's going to bring you to a new tab in browser

11
00:00:40,000 --> 00:00:42,000
with the asset store in it.

12
00:00:42,000 --> 00:00:45,000
All right, So next step would be just go to search field and type UI.

13
00:00:49,000 --> 00:00:54,000
We're going to go down and click free assets and then find this dark theme UI.

14
00:00:54,000 --> 00:01:00,000
If for some reason you cannot find it, I'll place link attached to this lecture so you can just go

15
00:01:00,000 --> 00:01:01,000
buy the link and get it.

16
00:01:01,000 --> 00:01:09,000
Now let's go inside and yours will probably say, add to my assets just something like this.

17
00:01:11,000 --> 00:01:12,000
Over here.

18
00:01:12,000 --> 00:01:15,000
So you need to click add to my assets and then you click open in Unity.

19
00:01:17,000 --> 00:01:19,000
All right, Now we have it here.

20
00:01:21,000 --> 00:01:23,000
First you need to click download.

21
00:01:23,000 --> 00:01:26,000
Once it's downloaded, you click import over here.

22
00:01:26,000 --> 00:01:30,000
Inside of this asset, we can uncheck this dark unity scene.

23
00:01:30,000 --> 00:01:31,000
We don't need them as scene.

24
00:01:31,000 --> 00:01:35,000
We know what we're going to do, but we're going to keep these three folders just in case.

25
00:01:39,000 --> 00:01:40,000
All right, that's good.

26
00:01:40,000 --> 00:01:41,000
Now, let's create a canvas.

27
00:01:41,000 --> 00:01:43,000
And that will be pretty simple.

28
00:01:43,000 --> 00:01:47,000
Let's just create UI canvas.

29
00:01:47,000 --> 00:01:48,000
Now we have a canvas in the game.

30
00:01:48,000 --> 00:01:50,000
If you click it twice, you can find it.

31
00:01:50,000 --> 00:01:51,000
This is the one.

32
00:01:52,000 --> 00:01:56,000
Now, let's go on the right over here and choose scale with the screen size.

33
00:01:57,000 --> 00:01:58,000
Because this is important.

34
00:01:58,000 --> 00:02:04,000
If you don't click scale with the screen size, size of your UI will stay constant no matter what type

35
00:02:04,000 --> 00:02:05,000
of screen you're using.

36
00:02:05,000 --> 00:02:10,000
And if it's a mobile phone, for example, the UI will be very big.

37
00:02:10,000 --> 00:02:12,000
So we need to do scale with the screen size.

38
00:02:14,000 --> 00:02:19,000
And we're going to do reference resolution 9 to 24 X and then 84 Y.

39
00:02:20,000 --> 00:02:25,000
Also, we're going to go here and choose full HD 910, 22, 10 to 80.

40
00:02:25,000 --> 00:02:30,000
This will be easier for us to navigate because this is the resolution that most of the people use.

41
00:02:30,000 --> 00:02:37,000
Now let's click Create Empty Under the Canvas and I'm going to name it as main menu UI.

42
00:02:38,000 --> 00:02:44,000
What I want to do here is to make it size of cannabis itself, just like this.

43
00:02:44,000 --> 00:02:45,000
Cool.

44
00:02:46,000 --> 00:02:48,000
Now let's think what we're going to have in the main menu.

45
00:02:48,000 --> 00:02:50,000
It's going to be settings for volume.

46
00:02:50,000 --> 00:02:55,000
It's going to be shop and it's going to be mute button and tap the start button so we can create all

47
00:02:55,000 --> 00:02:56,000
of those.

48
00:02:56,000 --> 00:02:59,000
Let's go to dark UI that we just downloaded.

49
00:02:59,000 --> 00:03:02,000
And in the free folder there are lots of icons that we can use.

50
00:03:06,000 --> 00:03:14,000
First on the create UI button text merge pro under main menu UI and we got pop up window that says we

51
00:03:14,000 --> 00:03:15,000
need to install text Nash Pro.

52
00:03:15,000 --> 00:03:19,000
If you don't have it, then you have to install it and let's do it together.

53
00:03:19,000 --> 00:03:21,000
Might take some time, but usually it's fast.

54
00:03:21,000 --> 00:03:25,000
Now let's close it and now we have text message pro button.

55
00:03:25,000 --> 00:03:32,000
I'm going to rename this one to settings and I'm going to just put three letters that says BTN like

56
00:03:32,000 --> 00:03:33,000
four button.

57
00:03:33,000 --> 00:03:37,000
Now let's go to this folder and find the icon that represents settings.

58
00:03:37,000 --> 00:03:39,000
And I think this one is pretty much what we need.

59
00:03:39,000 --> 00:03:41,000
Let's just drag it over here.

60
00:03:42,000 --> 00:03:44,000
And click set native size.

61
00:03:45,000 --> 00:03:46,000
Now, this is pretty.

62
00:03:46,000 --> 00:03:47,000
This is what we need.

63
00:03:47,000 --> 00:03:53,000
We can go inside and delete text for this because this is pretty self-explanatory and we do need text

64
00:03:53,000 --> 00:03:54,000
for this button.

65
00:03:54,000 --> 00:03:55,000
I think we can make it a bit prettier.

66
00:03:55,000 --> 00:03:58,000
So what we should do here is to find this.

67
00:04:00,000 --> 00:04:01,000
I can never hear.

68
00:04:01,000 --> 00:04:02,000
I saw before.

69
00:04:03,000 --> 00:04:03,000
Yeah.

70
00:04:03,000 --> 00:04:04,000
This 132.

71
00:04:04,000 --> 00:04:08,000
Let's drag it here and make it black.

72
00:04:08,000 --> 00:04:10,000
And just be transparent.

73
00:04:12,000 --> 00:04:13,000
Something, something transparent.

74
00:04:13,000 --> 00:04:14,000
So 150 is okay.

75
00:04:14,000 --> 00:04:21,000
And then we're going to create another image under this UI image that I'm going to call icon.

76
00:04:23,000 --> 00:04:25,000
And here I'm going to drag my icon.

77
00:04:27,000 --> 00:04:29,000
And this looks a bit better.

78
00:04:30,000 --> 00:04:35,000
Let's set native size and maybe decrease it just by a bit.

79
00:04:37,000 --> 00:04:38,000
Or you know what?

80
00:04:38,000 --> 00:04:41,000
Let's make the entire button bigger because we're going to press it with our finger.

81
00:04:41,000 --> 00:04:42,000
Right.

82
00:04:42,000 --> 00:04:43,000
Let's try this.

83
00:04:45,000 --> 00:04:48,000
Let's set size 150 by 150.

84
00:04:49,000 --> 00:04:55,000
And maybe just change this size of the icon by a bit to something like 120 to 120.

85
00:04:55,000 --> 00:04:56,000
Yeah, I like it more.

86
00:04:56,000 --> 00:04:57,000
Cool.

87
00:04:57,000 --> 00:04:59,000
Now, let's take this button.

88
00:05:01,000 --> 00:05:08,000
Go over here and here we can set position and pivot point for elements of UI, and we're going to choose

89
00:05:08,000 --> 00:05:10,000
top right corner over here.

90
00:05:10,000 --> 00:05:17,000
And after we do that, let's just press W and move it a little bit down a little bit to the left.

91
00:05:17,000 --> 00:05:20,000
So it's not completely in the corner, you know?

92
00:05:20,000 --> 00:05:21,000
Cool, right?

93
00:05:22,000 --> 00:05:23,000
Some job is done.

94
00:05:23,000 --> 00:05:29,000
Let's continue, let's duplicate this button, move it to the left over here, and this time I'm going

95
00:05:29,000 --> 00:05:33,000
to rename it to shop, Button Shop.

96
00:05:34,000 --> 00:05:35,000
Button.

97
00:05:35,000 --> 00:05:39,000
We're going to open it, find the icon and change image to something that we want.

98
00:05:39,000 --> 00:05:42,000
For example, this one looks nice.

99
00:05:42,000 --> 00:05:45,000
Okay, now one more to go.

100
00:05:45,000 --> 00:05:46,000
Let's duplicate this one.

101
00:05:46,000 --> 00:05:49,000
Press just.

102
00:05:49,000 --> 00:05:51,000
Yep, just left top left corner.

103
00:05:51,000 --> 00:05:55,000
Move it a bit lower and maybe to the right.

104
00:05:56,000 --> 00:06:00,000
Then find the icon and find the image we want.

105
00:06:00,000 --> 00:06:02,000
And this is for mute button.

106
00:06:02,000 --> 00:06:04,000
So I think this could work.

107
00:06:06,000 --> 00:06:07,000
But I guess there is a.

108
00:06:08,000 --> 00:06:09,000
Not musical.

109
00:06:09,000 --> 00:06:11,000
Not I somewhere.

110
00:06:11,000 --> 00:06:12,000
Yeah, this one.

111
00:06:12,000 --> 00:06:13,000
I want to use this one.

112
00:06:14,000 --> 00:06:15,000
Okay.

113
00:06:17,000 --> 00:06:21,000
And I want to make this one exactly a bit smaller, just my personal preference.

114
00:06:21,000 --> 00:06:23,000
But if you want, keep it as it is.

115
00:06:23,000 --> 00:06:26,000
I'll try to put something like 100 by 100.

116
00:06:27,000 --> 00:06:29,000
And place it somewhere here.

117
00:06:29,000 --> 00:06:30,000
This is good enough.

118
00:06:30,000 --> 00:06:35,000
What else we need in the main menu is big tap to start button.

119
00:06:38,000 --> 00:06:42,000
We need to rename this one so it should be mute.

120
00:06:43,000 --> 00:06:46,000
Button, and now we can create new button.

121
00:06:46,000 --> 00:06:47,000
Let's.

122
00:06:48,000 --> 00:06:55,000
Let's not duplicate this one but create UI button, text, match pro and this one going to be really

123
00:06:55,000 --> 00:06:56,000
big.

124
00:06:56,000 --> 00:06:59,000
I'm going to make it this much big.

125
00:07:02,000 --> 00:07:02,000
Yeah.

126
00:07:02,000 --> 00:07:03,000
This much big.

127
00:07:03,000 --> 00:07:07,000
We're going to make it transparent, completely transparent.

128
00:07:08,000 --> 00:07:10,000
Then I'm going to go to the text.

129
00:07:10,000 --> 00:07:12,000
Want to make it bigger?

130
00:07:12,000 --> 00:07:15,000
The font size should be really big.

131
00:07:17,000 --> 00:07:19,000
Change color to white.

132
00:07:21,000 --> 00:07:21,000
Let's tap.

133
00:07:22,000 --> 00:07:24,000
Tap to start.

134
00:07:25,000 --> 00:07:28,000
Let's see if we can change fun to something different.

135
00:07:29,000 --> 00:07:31,000
But if all the only have two fonts.

136
00:07:35,000 --> 00:07:36,000
Yeah, this looks okay.

137
00:07:36,000 --> 00:07:40,000
So font size can be so we can round up size to 100.

138
00:07:41,000 --> 00:07:43,000
And now let's make an animation for this one.

139
00:07:43,000 --> 00:07:45,000
And it's going to be pretty easy actually.

140
00:07:45,000 --> 00:07:49,000
Let's go to animations create folder for UI.

141
00:07:50,000 --> 00:07:51,000
UI.

142
00:07:51,000 --> 00:07:57,000
Inside I'm going to create animator controller that says tap to start AC.

143
00:07:59,000 --> 00:08:01,000
That is just drag it to these text match pro.

144
00:08:03,000 --> 00:08:04,000
Like this.

145
00:08:04,000 --> 00:08:08,000
Now it has an animator we can go to, animations create.

146
00:08:09,000 --> 00:08:12,000
Going to do a tap to start.

147
00:08:13,000 --> 00:08:14,000
And just up to start.

148
00:08:14,000 --> 00:08:15,000
It's okay.

149
00:08:15,000 --> 00:08:19,000
And now we need to find this text Match pro.

150
00:08:20,000 --> 00:08:23,000
Click record button.

151
00:08:25,000 --> 00:08:30,000
Make it transparent, then go a bit further by somewhat amount.

152
00:08:30,000 --> 00:08:31,000
Let's say five.

153
00:08:32,000 --> 00:08:40,000
Go here again, make it not transparent, then move again by somewhat amount like five and make it transparent.

154
00:08:41,000 --> 00:08:41,000
Cool.

155
00:08:41,000 --> 00:08:44,000
Now let's click this record and see how it looks.

156
00:08:45,000 --> 00:08:46,000
That is too fast.

157
00:08:46,000 --> 00:08:52,000
So what we can do is to move this one up to a minute and this one up to 30 seconds.

158
00:08:52,000 --> 00:08:53,000
Let's see now.

159
00:08:57,000 --> 00:08:59,000
This is almost everything we need.

160
00:08:59,000 --> 00:09:06,000
What I want to do next in the main menu is to add info about how many coins we have and our last score

161
00:09:06,000 --> 00:09:09,000
and our best score how we can do this.

162
00:09:09,000 --> 00:09:12,000
We can create UI image.

163
00:09:12,000 --> 00:09:21,000
It's going to be named as, let's say, just general info and then we're going to go to dark UI three

164
00:09:21,000 --> 00:09:23,000
and find some panel for this.

165
00:09:23,000 --> 00:09:25,000
I think this one would be nice.

166
00:09:26,000 --> 00:09:30,000
Or maybe this one want something more squared.

167
00:09:32,000 --> 00:09:33,000
This one is.

168
00:09:33,000 --> 00:09:33,000
Okay.

169
00:09:33,000 --> 00:09:35,000
Let's drag it over here.

170
00:09:36,000 --> 00:09:37,000
See how it looks.

171
00:09:39,000 --> 00:09:45,000
I think we can increase it to something like this and place it in the bottom central point.

172
00:09:45,000 --> 00:09:48,000
Don't forget to hold out and shift when you do this.

173
00:09:48,000 --> 00:09:49,000
All right.

174
00:09:51,000 --> 00:09:52,000
Somewhere here is okay.

175
00:09:52,000 --> 00:09:55,000
Now we can create a couple of elements.

176
00:09:55,000 --> 00:10:03,000
Under this element it's going to be UI, text, match pro last score, another one duplicate.

177
00:10:04,000 --> 00:10:16,000
Rename this to best score and duplicate rename to points and just coins is key under this coin.

178
00:10:16,000 --> 00:10:23,000
So when I create UI image and for this one we need to go to our graphics folder, find a coin and drag

179
00:10:23,000 --> 00:10:24,000
it here.

180
00:10:25,000 --> 00:10:26,000
Okay, this is good.

181
00:10:26,000 --> 00:10:28,000
Now let's move this coin to the right.

182
00:10:29,000 --> 00:10:31,000
And maybe let's make it smaller.

183
00:10:31,000 --> 00:10:33,000
Let's try 60 by 60 this.

184
00:10:33,000 --> 00:10:34,000
Okay.

185
00:10:34,000 --> 00:10:36,000
And let's take this coins.

186
00:10:37,000 --> 00:10:37,000
Move it here.

187
00:10:41,000 --> 00:10:45,000
Actually, it's better to move away our two scores info over here so we can set up coin in.

188
00:10:46,000 --> 00:10:48,000
All right, so this is kind of OC.

189
00:10:52,000 --> 00:10:55,000
I guess it's better to do alignment on the right over here.

190
00:10:56,000 --> 00:10:57,000
On the right.

191
00:10:57,000 --> 00:11:01,000
Move it to the right and then take the image and move it to the left bit so we can align them next to

192
00:11:01,000 --> 00:11:02,000
each other.

193
00:11:04,000 --> 00:11:09,000
And just like this, then let's take our last score and type some text over here so we can visualize

194
00:11:09,000 --> 00:11:10,000
how it's going to look.

195
00:11:11,000 --> 00:11:13,000
Last score.

196
00:11:13,000 --> 00:11:18,000
Let's say 4567.

197
00:11:20,000 --> 00:11:21,000
What with above.

198
00:11:21,000 --> 00:11:23,000
So we need to make it longer.

199
00:11:23,000 --> 00:11:26,000
We can do this by dragging this box over here.

200
00:11:28,000 --> 00:11:34,000
Just like this next one, best score.

201
00:11:35,000 --> 00:11:39,000
And it's going to be 1100.

202
00:11:40,000 --> 00:11:41,000
506.

203
00:11:43,000 --> 00:11:44,000
Drop the box further.

204
00:11:45,000 --> 00:11:50,000
And let's drag the box further for this one as well, and let's move with below.

205
00:11:50,000 --> 00:11:55,000
It's kind of not fit in, but I guess we could make the size of the font smaller.

206
00:11:55,000 --> 00:11:58,000
So let's select the both of them and change font size to something smaller.

207
00:12:02,000 --> 00:12:04,000
25 looks okay.

208
00:12:07,000 --> 00:12:09,000
We are basically done with the main menu.

209
00:12:09,000 --> 00:12:12,000
If something comes up, we can fix it later on the Polish stage.

210
00:12:12,000 --> 00:12:13,000
I think this is okay.

211
00:12:13,000 --> 00:12:17,000
For now, let's go to next video and lay out ingame menu.

212
00:12:17,000 --> 00:12:17,000
See you there.