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.