1
00:00:03,960 --> 00:00:10,530
‫Well, come back in the punk chapter and this video, we are going to start with the main menu for our

2
00:00:10,530 --> 00:00:14,250
‫game and therefore we simply need to create a new project.

3
00:00:14,250 --> 00:00:20,280
‫So open up unity, then press the new button and create a new project.

4
00:00:20,280 --> 00:00:28,200
‫We are going to call that one Pong clone and it's going to be a 2D game so we can choose 2D here as

5
00:00:28,200 --> 00:00:34,920
‫the organization, you can leave as is, and then we create the project that might take a couple of

6
00:00:34,920 --> 00:00:41,040
‫seconds, but then as soon as it's done, unity will restart with a new project.

7
00:00:43,260 --> 00:00:50,430
‫As soon as the project has opened up, we can see, as always, an untitled scene at the beginning because

8
00:00:50,430 --> 00:00:53,820
‫we have not saved the scene yet and we have the main camera.

9
00:00:54,300 --> 00:01:00,390
‫In my case, I have a layout which is, as you can see with the inspector on the right hand side.

10
00:01:00,390 --> 00:01:06,840
‫Then we have the hierarchy at the bottom, we have the project and the console tabs, and in the middle

11
00:01:06,840 --> 00:01:09,330
‫I have my game and my scene.

12
00:01:09,900 --> 00:01:12,180
‫In my scene I only see the camera.

13
00:01:12,180 --> 00:01:17,670
‫It doesn't have any background, as you can see in the game tab that the game actually has a background.

14
00:01:17,850 --> 00:01:21,630
‫So let's start off with changing our main camera.

15
00:01:21,630 --> 00:01:23,580
‫I want the background to be white.

16
00:01:23,580 --> 00:01:29,370
‫So I click on the main camera here on the right hand side and the inspector, you can see that there

17
00:01:29,370 --> 00:01:35,190
‫is a camera component and within that camera component there is a property called background.

18
00:01:35,190 --> 00:01:40,050
‫And there we can choose to change the background to being white, for example.

19
00:01:40,880 --> 00:01:42,620
‫So now I change it up to being white.

20
00:01:42,620 --> 00:01:46,520
‫And you can see our game has changed to being white.

21
00:01:47,000 --> 00:01:50,660
‫And what you also can see is that within the scene view, nothing has changed.

22
00:01:50,990 --> 00:01:59,750
‫And also, what is an important setting that we have made just by choosing 2D as our game settings is

23
00:01:59,750 --> 00:02:04,910
‫that this two D button here on the left hand side on the top is activated.

24
00:02:04,910 --> 00:02:10,400
‫You can activate it at any time just to see how things would look like in three D.

25
00:02:10,430 --> 00:02:15,320
‫That's where a camera is here and it looks just towards the end there.

26
00:02:15,320 --> 00:02:18,950
‫It has a transformed component with the position of Z minus ten.

27
00:02:18,950 --> 00:02:23,600
‫If I would choose zero, you can see it changes the value a little bit.

28
00:02:23,960 --> 00:02:27,230
‫So our camera moves towards this area.

29
00:02:27,650 --> 00:02:34,790
‫All right, so let's go back to DH, because that's what we are going to use and let's go ahead and

30
00:02:34,790 --> 00:02:37,400
‫create a quad within our main camera.

31
00:02:37,700 --> 00:02:44,060
‫So right click on the main camera on the right hand side and create a 3D object called Quad.

32
00:02:45,230 --> 00:02:53,960
‫By that you create a a square for now and we are going to rescale it.

33
00:02:53,960 --> 00:03:03,800
‫So I want to scale it up to being 1600 for my X value and 900 from a Y value because that's 16 to 9.

34
00:03:03,800 --> 00:03:07,040
‫I think that's a good scale, which is totally fine for us.

35
00:03:07,040 --> 00:03:10,430
‫It's a 62 nine scale which is used by most monitors.

36
00:03:10,850 --> 00:03:15,140
‫And then I rename the quad and I call it background.

37
00:03:16,940 --> 00:03:22,160
‫If we zoom out, we can see that our camera is pretty small in comparison to our quad.

38
00:03:22,190 --> 00:03:25,250
‫So what we need to do is to scale up our camera.

39
00:03:25,910 --> 00:03:28,040
‫Within the camera component.

40
00:03:28,040 --> 00:03:32,840
‫You can see that there is a size of five and we can scale it up to 450.

41
00:03:33,380 --> 00:03:39,590
‫So let's enter 450 and that's pretty much the whole size that our background takes as well.

42
00:03:40,160 --> 00:03:47,450
‫Now the background is white and that's the background of our colour, of our camera, but our background

43
00:03:47,450 --> 00:03:49,820
‫itself doesn't have any color yet.

44
00:03:49,910 --> 00:03:55,550
‫As you can see here, there is a component called default material which is empty, it's grayed out

45
00:03:55,550 --> 00:03:57,770
‫and it has a gray default material.

46
00:03:57,770 --> 00:03:59,300
‫So there is no default.

47
00:03:59,330 --> 00:04:00,980
‫So there's no material at all.

48
00:04:01,380 --> 00:04:08,240
‫If you want to change that, we can simply create a new material and I'm going to call that one black.

49
00:04:08,930 --> 00:04:16,400
‫And now in the inspector, after I have chosen the black material here, you can see on the right hand

50
00:04:16,400 --> 00:04:22,220
‫side, the inspector says that the main maps albedo is set to white.

51
00:04:22,340 --> 00:04:30,770
‫If I change that to black, then it gets this black ish color and if I activate emissions, I can make

52
00:04:30,770 --> 00:04:31,970
‫it super black.

53
00:04:32,000 --> 00:04:36,440
‫If you don't activate emissions in this case with the black, it doesn't make that much of a difference.

54
00:04:36,440 --> 00:04:39,200
‫But in other colors it might make a difference.

55
00:04:39,200 --> 00:04:44,000
‫So you can see here with the emission, you can change the black color a little bit.

56
00:04:44,000 --> 00:04:52,760
‫Even so, I'm just going to choose black here and now I can drag that black into my background.

57
00:04:53,180 --> 00:04:55,700
‫As you can see now my background is black.

58
00:04:56,660 --> 00:04:57,980
‫But that's only in the scene.

59
00:04:57,980 --> 00:04:59,960
‫Why is it not in the game and the game mode?

60
00:04:59,960 --> 00:05:01,150
‫It's still white.

61
00:05:01,160 --> 00:05:06,950
‫And that has to do with the Z value of our main camera in comparison to our background.

62
00:05:08,420 --> 00:05:12,620
‫In order to change that, we need to change the Z value of our background.

63
00:05:12,650 --> 00:05:19,790
‫As soon as it's higher, then let's say two, for example, it's already black, so we're going to put

64
00:05:19,790 --> 00:05:22,880
‫it at the same spot as our main camera for now.

65
00:05:22,880 --> 00:05:24,470
‫So let's put it at ten.

66
00:05:24,800 --> 00:05:30,860
‫Now you see, we have this black background and we could change the background any time if we change

67
00:05:30,860 --> 00:05:31,730
‫the material.

68
00:05:31,730 --> 00:05:35,780
‫So if we add another material to our background, if we move it in.

69
00:05:36,080 --> 00:05:41,810
‫So you can see here now the material has been chosen and it's completely black as this scene is going

70
00:05:41,810 --> 00:05:43,220
‫to be our main menu.

71
00:05:43,250 --> 00:05:45,080
‫We should also save it as that.

72
00:05:45,080 --> 00:05:52,370
‫So let's go ahead and save our scene as save scenes as and we call it main menu.

73
00:05:53,780 --> 00:05:54,710
‫Let's save it.

74
00:05:54,740 --> 00:05:59,900
‫Now you see at the bottom left, we have our scene prepared already and it's saved.

75
00:05:59,900 --> 00:06:04,940
‫Here you can consider scenes as in, for example, the theater.

76
00:06:05,120 --> 00:06:10,670
‫So one scene is, for example, an action scene where multiple people fight each other.

77
00:06:10,670 --> 00:06:16,460
‫And in the next scene you have a very chill out scene where people are just having a conversation.

78
00:06:16,460 --> 00:06:22,520
‫And those different scenes you could also see in Unity, for example, one scene is the main menu where

79
00:06:22,520 --> 00:06:27,380
‫you can just chill and choose and then you have the game scene where you actually play the game.

80
00:06:27,380 --> 00:06:32,660
‫And then you could have a game over scene where you, for example, just see your score or you could

81
00:06:32,660 --> 00:06:34,670
‫see who won those kind of things.

82
00:06:34,820 --> 00:06:37,700
‫And that's how we're going to use scenes in general.

83
00:06:37,700 --> 00:06:43,340
‫So for example, multiple different levels in a video game could be different scenes, so each level

84
00:06:43,340 --> 00:06:48,170
‫could be a different scene depending on how you set things up.

85
00:06:48,440 --> 00:06:48,890
‫All right.

86
00:06:48,890 --> 00:06:52,130
‫So now let's add some UI elements to our game.

87
00:06:52,130 --> 00:06:59,030
‫What I want, like would like to add is a text, for example, with the name or the title of the game.

88
00:06:59,030 --> 00:07:06,320
‫So I add the text and as you can see here, it automatically created a canvas and an event system within

89
00:07:06,320 --> 00:07:07,070
‫the canvas.

90
00:07:07,070 --> 00:07:08,150
‫That's what you can see here.

91
00:07:08,150 --> 00:07:14,600
‫On the left hand side, we have an additional layer, so it's layer on top of our game in general.

92
00:07:14,690 --> 00:07:21,320
‫So that means that our canvas has nothing to do with the game objects inside of the game.

93
00:07:21,320 --> 00:07:29,390
‫It really only takes care of UI elements such as text or buttons or images.

94
00:07:29,660 --> 00:07:35,510
‫So this is what you could can all handle in the canvas, as the canvas is not the perfect name for what

95
00:07:35,510 --> 00:07:36,350
‫I want to have.

96
00:07:36,350 --> 00:07:40,610
‫I will change that to being main menu because that's what it is.

97
00:07:40,610 --> 00:07:43,610
‫So the text you can see here at the bottom left is new text.

98
00:07:43,610 --> 00:07:50,000
‫Now it's just grayed out or it's pretty grey and we can change it very easily by changing the color

99
00:07:50,030 --> 00:07:52,400
‫of our text to white.

100
00:07:52,400 --> 00:07:55,910
‫So now we have the new text on the left hand side being white.

101
00:07:57,930 --> 00:08:03,510
‫Now you might wonder, why is the canvas so small in comparison to the whole game?

102
00:08:03,780 --> 00:08:05,650
‫That is because I made the game pretty big.

103
00:08:05,670 --> 00:08:06,600
‫That's one reason.

104
00:08:06,600 --> 00:08:12,060
‫Usually you have the game in a very small area and then you have the canvas being on as a big, big,

105
00:08:12,060 --> 00:08:14,460
‫different layer on a completely different scale.

106
00:08:14,490 --> 00:08:21,000
‫But in my case, I would like it to be exactly the same size as my background and my main camera have

107
00:08:21,330 --> 00:08:25,370
‫the means that I need to change the values of my main menu.

108
00:08:25,380 --> 00:08:26,970
‫So I click on main menu.

109
00:08:27,120 --> 00:08:35,690
‫I go to the canvas component and there I change it to screen space camera and a drag in my main camera.

110
00:08:37,000 --> 00:08:40,780
‫And now I change the scale.

111
00:08:40,930 --> 00:08:45,370
‫Can we scaler to scale with screen?

112
00:08:46,580 --> 00:08:55,010
‫So if I wanted to scale with the screen size, I take here the reference resolution of 1600 times 900.

113
00:08:56,180 --> 00:09:00,290
‫And the screen match mode should be expand this way.

114
00:09:00,530 --> 00:09:06,680
‫Our screen mode will always expand based on how big the screen is and how the screen changes.

115
00:09:07,070 --> 00:09:08,270
‫Now let's find the text.

116
00:09:08,270 --> 00:09:11,210
‫If we look at the text, it's pretty small.

117
00:09:11,210 --> 00:09:14,330
‫We can't see it and it has a different position.

118
00:09:14,900 --> 00:09:17,900
‫So now let's scale it up a little bit for the width.

119
00:09:17,900 --> 00:09:20,660
‫I take 500, for the height I take 200.

120
00:09:20,660 --> 00:09:24,530
‫And as the font size, I would like to take 150.

121
00:09:24,560 --> 00:09:26,830
‫Now we have the problem that we don't see the text.

122
00:09:26,840 --> 00:09:27,740
‫Why is that?

123
00:09:27,770 --> 00:09:32,450
‫That is because of the plane distance of our canvas.

124
00:09:32,450 --> 00:09:36,110
‫So if we change that to one, then we can see our text here.

125
00:09:36,590 --> 00:09:41,000
‫Let's change the name of the text because it's not the text that I want to have here.

126
00:09:41,000 --> 00:09:46,310
‫I want it to be the title because it's not just some text, it's really the title.

127
00:09:46,310 --> 00:09:49,100
‫And the text of the title should be Pong.

128
00:09:50,060 --> 00:09:52,820
‫Now the position is not really nice.

129
00:09:52,820 --> 00:10:00,650
‫I would like it to be centered, so I use the position x value of zero and then you can change the position

130
00:10:00,650 --> 00:10:03,620
‫Y value to zero for example as well.

131
00:10:03,710 --> 00:10:07,400
‫And then you have the pong just in the center.

132
00:10:07,490 --> 00:10:12,200
‫If you want to move it up now, you can either do it here on the left hand side by choosing the right

133
00:10:12,200 --> 00:10:14,600
‫tool for it and then just drag it up.

134
00:10:15,400 --> 00:10:22,160
‫Now you can see it's moving to towards the top and I think a great value would be 300.

135
00:10:22,180 --> 00:10:27,130
‫So now we have Pong in the center at the top with enough space at the top.

136
00:10:27,130 --> 00:10:29,860
‫And then below that I would like to have the play button.

137
00:10:30,430 --> 00:10:37,510
‫And in order to add the play button, we need to do a very similar thing to what we did with the title.

138
00:10:37,510 --> 00:10:40,720
‫We go to our main menu and we do right click.

139
00:10:41,350 --> 00:10:44,200
‫UI and then we choose button.

140
00:10:45,470 --> 00:10:46,690
‫There you can see our button.

141
00:10:46,690 --> 00:10:47,680
‫It's already there.

142
00:10:47,680 --> 00:10:49,090
‫It's automatically there.

143
00:10:49,090 --> 00:10:57,910
‫And I would like to change the size of the button to being 200 as it's width and 100 as its height.

144
00:10:58,540 --> 00:11:03,610
‫So now we have our button and I don't think that this is a great interface.

145
00:11:03,610 --> 00:11:09,940
‫How I would like to change it as follows I change the colour of the image.

146
00:11:10,870 --> 00:11:15,250
‫I change it to black, for example, and now we don't see the text almost.

147
00:11:15,250 --> 00:11:22,390
‫It's very, very small because it's inside of this property here and it has a very gray, dark gray

148
00:11:22,390 --> 00:11:24,220
‫color you can see here at the left.

149
00:11:24,430 --> 00:11:26,320
‫And I change it to being white.

150
00:11:26,350 --> 00:11:31,450
‫Now, of course, we also need to change the font size, for example, to 120.

151
00:11:31,450 --> 00:11:34,780
‫And if you do that, you see that suddenly it disappears.

152
00:11:34,780 --> 00:11:36,390
‫So you can't see it anymore.

153
00:11:36,400 --> 00:11:40,120
‫That's because our button just had the size of 100.

154
00:11:40,150 --> 00:11:46,900
‫If I go to, for example, 130 and change the vertical overflow to, for example, overflow, you can

155
00:11:46,900 --> 00:11:49,510
‫see that's how a button looks like now.

156
00:11:49,840 --> 00:11:51,280
‫So it's way too big.

157
00:11:51,280 --> 00:11:53,920
‫And this is something that you always need to test.

158
00:11:53,920 --> 00:11:59,940
‫Sometimes you use a font size which doesn't fit with the size of the game object itself.

159
00:11:59,950 --> 00:12:05,770
‫So in this case, the game object has only a height of 130, but button needs much more space.

160
00:12:05,770 --> 00:12:11,250
‫So for example, if you scale it up now to 300, you can see that the button is still overflowing.

161
00:12:11,260 --> 00:12:13,750
‫If we change it to 400, that's the size.

162
00:12:13,750 --> 00:12:15,880
‫That's fine for our button.

163
00:12:16,450 --> 00:12:22,120
‫And now we can drag our button down to, for example, -200.

164
00:12:22,150 --> 00:12:24,100
‫I think that should be a good value.

165
00:12:24,310 --> 00:12:31,960
‫And what I don't like is that Pong is not centered, so the text is not centered even though it's property

166
00:12:31,960 --> 00:12:32,530
‫itself.

167
00:12:32,530 --> 00:12:39,850
‫So it's game object title, its UI element is centered and we can change that by changing the alignment.

168
00:12:39,850 --> 00:12:44,650
‫So if we change the alignment to be centered, the Pong text will be centered as well.

169
00:12:45,820 --> 00:12:53,710
‫Now while that is okay in terms of size and and font size and the color and so on, we first of all

170
00:12:53,710 --> 00:12:56,800
‫need, of course, the play text here and next.

171
00:12:56,800 --> 00:13:04,480
‫What we do need is a better font because Orile is all right, but it's so, so standard.

172
00:13:04,480 --> 00:13:07,330
‫It's not really a game kind of font.

173
00:13:07,570 --> 00:13:16,270
‫So what we can do is we can Google for nice gaming fonts and one that I like is the Monroe font.

174
00:13:16,300 --> 00:13:17,740
‫Monroe font.

175
00:13:19,270 --> 00:13:24,220
‫And if I search for that, you can find it on ten at ten by 20 dot com.

176
00:13:24,520 --> 00:13:26,020
‫So let's open that up.

177
00:13:27,030 --> 00:13:32,790
‫And you can see it's free and you can freely use it for your games.

178
00:13:33,270 --> 00:13:37,380
‫There you can see how it looks like in different fonts and different sizes and so on.

179
00:13:37,380 --> 00:13:44,310
‫And I will download that font now and unpack it and then you will find these three files.

180
00:13:44,310 --> 00:13:50,070
‫So the Monroe Monroe Narrow and the Monroe Small, you can drag them all in if you like, but I'm just

181
00:13:50,070 --> 00:13:57,600
‫going to use moon row TBTF, so I drag it in there and now what I can do is I can change the font of

182
00:13:57,600 --> 00:13:58,200
‫my.

183
00:13:59,140 --> 00:14:03,880
‫Game easily by dragging the Monroe font in there, and you can see it looks much better.

184
00:14:03,910 --> 00:14:07,480
‫I do the same thing with the title, so let's drag it in there.

185
00:14:07,480 --> 00:14:09,550
‫And that dragging is one way.

186
00:14:09,580 --> 00:14:10,660
‫One way to do it.

187
00:14:10,660 --> 00:14:17,110
‫Another way to do it is simply press this little circle here on the right hand side, and then you can

188
00:14:17,110 --> 00:14:19,060
‫see all the assets that are available.

189
00:14:19,060 --> 00:14:23,810
‫And I can, for example, Chase, choose Monroe here and there we are.

190
00:14:23,830 --> 00:14:29,050
‫So now we have our first part of our game, which is our main menu.

191
00:14:30,130 --> 00:14:33,360
‫In the next video, we are going to add a play button functionality.

192
00:14:33,370 --> 00:14:37,240
‫So far we have the interface if we start the game and maximize on play.

193
00:14:38,440 --> 00:14:44,260
‫That's how it would look like so that we are pong and play and it is a button but we can't press it.

194
00:14:44,560 --> 00:14:46,380
‫And if you want, I would like to press it.

195
00:14:46,390 --> 00:14:51,580
‫We need to create a script, so we need to do some coding and that's what we are going to do in the

196
00:14:51,580 --> 00:14:52,450
‫next video.

197
00:14:52,450 --> 00:14:58,000
‫So save the scene, make sure that you always save your scenes because otherwise the changes that you

198
00:14:58,000 --> 00:14:59,740
‫have made will not be available.

199
00:15:00,010 --> 00:15:01,810
‫And then go to the next video.

200
00:15:01,840 --> 00:15:02,370
‫All right.

201
00:15:02,380 --> 00:15:03,100
‫See you there.