‫Well, come back in the punk chapter and this video, we are going to start with the main menu for our
‫game and therefore we simply need to create a new project.
‫So open up unity, then press the new button and create a new project.
‫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
‫the organization, you can leave as is, and then we create the project that might take a couple of
‫seconds, but then as soon as it's done, unity will restart with a new project.
‫As soon as the project has opened up, we can see, as always, an untitled scene at the beginning because
‫we have not saved the scene yet and we have the main camera.
‫In my case, I have a layout which is, as you can see with the inspector on the right hand side.
‫Then we have the hierarchy at the bottom, we have the project and the console tabs, and in the middle
‫I have my game and my scene.
‫In my scene I only see the camera.
‫It doesn't have any background, as you can see in the game tab that the game actually has a background.
‫So let's start off with changing our main camera.
‫I want the background to be white.
‫So I click on the main camera here on the right hand side and the inspector, you can see that there
‫is a camera component and within that camera component there is a property called background.
‫And there we can choose to change the background to being white, for example.
‫So now I change it up to being white.
‫And you can see our game has changed to being white.
‫And what you also can see is that within the scene view, nothing has changed.
‫And also, what is an important setting that we have made just by choosing 2D as our game settings is
‫that this two D button here on the left hand side on the top is activated.
‫You can activate it at any time just to see how things would look like in three D.
‫That's where a camera is here and it looks just towards the end there.
‫It has a transformed component with the position of Z minus ten.
‫If I would choose zero, you can see it changes the value a little bit.
‫So our camera moves towards this area.
‫All right, so let's go back to DH, because that's what we are going to use and let's go ahead and
‫create a quad within our main camera.
‫So right click on the main camera on the right hand side and create a 3D object called Quad.
‫By that you create a a square for now and we are going to rescale it.
‫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.
‫I think that's a good scale, which is totally fine for us.
‫It's a 62 nine scale which is used by most monitors.
‫And then I rename the quad and I call it background.
‫If we zoom out, we can see that our camera is pretty small in comparison to our quad.
‫So what we need to do is to scale up our camera.
‫Within the camera component.
‫You can see that there is a size of five and we can scale it up to 450.
‫So let's enter 450 and that's pretty much the whole size that our background takes as well.
‫Now the background is white and that's the background of our colour, of our camera, but our background
‫itself doesn't have any color yet.
‫As you can see here, there is a component called default material which is empty, it's grayed out
‫and it has a gray default material.
‫So there is no default.
‫So there's no material at all.
‫If you want to change that, we can simply create a new material and I'm going to call that one black.
‫And now in the inspector, after I have chosen the black material here, you can see on the right hand
‫side, the inspector says that the main maps albedo is set to white.
‫If I change that to black, then it gets this black ish color and if I activate emissions, I can make
‫it super black.
‫If you don't activate emissions in this case with the black, it doesn't make that much of a difference.
‫But in other colors it might make a difference.
‫So you can see here with the emission, you can change the black color a little bit.
‫Even so, I'm just going to choose black here and now I can drag that black into my background.
‫As you can see now my background is black.
‫But that's only in the scene.
‫Why is it not in the game and the game mode?
‫It's still white.
‫And that has to do with the Z value of our main camera in comparison to our background.
‫In order to change that, we need to change the Z value of our background.
‫As soon as it's higher, then let's say two, for example, it's already black, so we're going to put
‫it at the same spot as our main camera for now.
‫So let's put it at ten.
‫Now you see, we have this black background and we could change the background any time if we change
‫the material.
‫So if we add another material to our background, if we move it in.
‫So you can see here now the material has been chosen and it's completely black as this scene is going
‫to be our main menu.
‫We should also save it as that.
‫So let's go ahead and save our scene as save scenes as and we call it main menu.
‫Let's save it.
‫Now you see at the bottom left, we have our scene prepared already and it's saved.
‫Here you can consider scenes as in, for example, the theater.
‫So one scene is, for example, an action scene where multiple people fight each other.
‫And in the next scene you have a very chill out scene where people are just having a conversation.
‫And those different scenes you could also see in Unity, for example, one scene is the main menu where
‫you can just chill and choose and then you have the game scene where you actually play the game.
‫And then you could have a game over scene where you, for example, just see your score or you could
‫see who won those kind of things.
‫And that's how we're going to use scenes in general.
‫So for example, multiple different levels in a video game could be different scenes, so each level
‫could be a different scene depending on how you set things up.
‫All right.
‫So now let's add some UI elements to our game.
‫What I want, like would like to add is a text, for example, with the name or the title of the game.
‫So I add the text and as you can see here, it automatically created a canvas and an event system within
‫the canvas.
‫That's what you can see here.
‫On the left hand side, we have an additional layer, so it's layer on top of our game in general.
‫So that means that our canvas has nothing to do with the game objects inside of the game.
‫It really only takes care of UI elements such as text or buttons or images.
‫So this is what you could can all handle in the canvas, as the canvas is not the perfect name for what
‫I want to have.
‫I will change that to being main menu because that's what it is.
‫So the text you can see here at the bottom left is new text.
‫Now it's just grayed out or it's pretty grey and we can change it very easily by changing the color
‫of our text to white.
‫So now we have the new text on the left hand side being white.
‫Now you might wonder, why is the canvas so small in comparison to the whole game?
‫That is because I made the game pretty big.
‫That's one reason.
‫Usually you have the game in a very small area and then you have the canvas being on as a big, big,
‫different layer on a completely different scale.
‫But in my case, I would like it to be exactly the same size as my background and my main camera have
‫the means that I need to change the values of my main menu.
‫So I click on main menu.
‫I go to the canvas component and there I change it to screen space camera and a drag in my main camera.
‫And now I change the scale.
‫Can we scaler to scale with screen?
‫So if I wanted to scale with the screen size, I take here the reference resolution of 1600 times 900.
‫And the screen match mode should be expand this way.
‫Our screen mode will always expand based on how big the screen is and how the screen changes.
‫Now let's find the text.
‫If we look at the text, it's pretty small.
‫We can't see it and it has a different position.
‫So now let's scale it up a little bit for the width.
‫I take 500, for the height I take 200.
‫And as the font size, I would like to take 150.
‫Now we have the problem that we don't see the text.
‫Why is that?
‫That is because of the plane distance of our canvas.
‫So if we change that to one, then we can see our text here.
‫Let's change the name of the text because it's not the text that I want to have here.
‫I want it to be the title because it's not just some text, it's really the title.
‫And the text of the title should be Pong.
‫Now the position is not really nice.
‫I would like it to be centered, so I use the position x value of zero and then you can change the position
‫Y value to zero for example as well.
‫And then you have the pong just in the center.
‫If you want to move it up now, you can either do it here on the left hand side by choosing the right
‫tool for it and then just drag it up.
‫Now you can see it's moving to towards the top and I think a great value would be 300.
‫So now we have Pong in the center at the top with enough space at the top.
‫And then below that I would like to have the play button.
‫And in order to add the play button, we need to do a very similar thing to what we did with the title.
‫We go to our main menu and we do right click.
‫UI and then we choose button.
‫There you can see our button.
‫It's already there.
‫It's automatically there.
‫And I would like to change the size of the button to being 200 as it's width and 100 as its height.
‫So now we have our button and I don't think that this is a great interface.
‫How I would like to change it as follows I change the colour of the image.
‫I change it to black, for example, and now we don't see the text almost.
‫It's very, very small because it's inside of this property here and it has a very gray, dark gray
‫color you can see here at the left.
‫And I change it to being white.
‫Now, of course, we also need to change the font size, for example, to 120.
‫And if you do that, you see that suddenly it disappears.
‫So you can't see it anymore.
‫That's because our button just had the size of 100.
‫If I go to, for example, 130 and change the vertical overflow to, for example, overflow, you can
‫see that's how a button looks like now.
‫So it's way too big.
‫And this is something that you always need to test.
‫Sometimes you use a font size which doesn't fit with the size of the game object itself.
‫So in this case, the game object has only a height of 130, but button needs much more space.
‫So for example, if you scale it up now to 300, you can see that the button is still overflowing.
‫If we change it to 400, that's the size.
‫That's fine for our button.
‫And now we can drag our button down to, for example, -200.
‫I think that should be a good value.
‫And what I don't like is that Pong is not centered, so the text is not centered even though it's property
‫itself.
‫So it's game object title, its UI element is centered and we can change that by changing the alignment.
‫So if we change the alignment to be centered, the Pong text will be centered as well.
‫Now while that is okay in terms of size and and font size and the color and so on, we first of all
‫need, of course, the play text here and next.
‫What we do need is a better font because Orile is all right, but it's so, so standard.
‫It's not really a game kind of font.
‫So what we can do is we can Google for nice gaming fonts and one that I like is the Monroe font.
‫Monroe font.
‫And if I search for that, you can find it on ten at ten by 20 dot com.
‫So let's open that up.
‫And you can see it's free and you can freely use it for your games.
‫There you can see how it looks like in different fonts and different sizes and so on.
‫And I will download that font now and unpack it and then you will find these three files.
‫So the Monroe Monroe Narrow and the Monroe Small, you can drag them all in if you like, but I'm just
‫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
‫my.
‫Game easily by dragging the Monroe font in there, and you can see it looks much better.
‫I do the same thing with the title, so let's drag it in there.
‫And that dragging is one way.
‫One way to do it.
‫Another way to do it is simply press this little circle here on the right hand side, and then you can
‫see all the assets that are available.
‫And I can, for example, Chase, choose Monroe here and there we are.
‫So now we have our first part of our game, which is our main menu.
‫In the next video, we are going to add a play button functionality.
‫So far we have the interface if we start the game and maximize on play.
‫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.
‫And if you want, I would like to press it.
‫We need to create a script, so we need to do some coding and that's what we are going to do in the
‫next video.
‫So save the scene, make sure that you always save your scenes because otherwise the changes that you
‫have made will not be available.
‫And then go to the next video.
‫All right.
‫See you there.