To create that, we're going to move over to our project tab assets.
And then since folder let's right click there.
Or you can simply right click on these assets as well.
Then go to create in the top.
And then since right over here and then click on this scene I'm going to do inside my scenes folder.
So let's head over to that folder.
Let's right click create and we will go to scene.
And let's click on this scene.
And we have to name the scene what we want to name it.
So this will be our menu.
So we're going to call this one menu.
Let's call this menu and let's hit enter.
And we're going to double click on it in order to move over to that piano scene.
So we're going to double click on it.
And as you can notice if we move to hierarchy we only have the main camera.
And we don't have anything like that.
Uh so firstly we're going to drag our backgrounds.
So to do that I'm going to move over to my project tab assets and then prefabs folder.
And from here I'm going to select my background and let's drag it over to this hierarchy or into this
scene view.
I'm going to drag it over to my hierarchy.
As you can notice.
So this is our background.
And if you haven't made your background a prefab so make sure you just do that.
Basically move over to your scenes folder and then move over to sample scene or the level.
And we're going to click on this save.
So the changes we made inside this scene it's just going to be saved.
So I'm going to click on that save.
And as soon as we clicked on that save button we just move it over to level scene or the sample scene.
And from here basically select your background and turn it into a prefab.
So you're gonna have the copy and then move over to scene.
And then drag your background in the hierarchy or into the scene view.
And we need to create our canvas before we create our about menu play button and all of those things.
So we need to create our canvas first.
So let's go over to hierarchy.
Right click or hit this plus icon.
Let's go to UBI and canvass in the bottom.
And we're going to select our canvas.
And let's press down F on our keyboard in order to focus on it.
And we need to do some settings with this canvas.
So for that we will go to Inspector in the right.
In the top right and then canvas scaler.
And from here we're gonna choose UI scale mode to a constant pixel size to uh, you can simply say scale
with screen size.
So UI scale mode, we're gonna choose scale with screen size.
And in the X we're going to put 1920 and in the Y we're going to put 1080 like we have done inside that
sample scene or in the level that using.
So right now what we're going to do, we're going to create an empty parent game object first.
Then we're going to place all of the things inside of it like we have done inside our sample scene.
So we're going to approach the same way.
And for that, by creating that it's going to be a little more fine to keep our project clean, you
can simply say so select your canvas.
Let's right click on it.
Let's create an empty game object.
And I'm going to name this game object to something like main menu.
And make sure you go over to Inspect Inspector Break Transform and then click here.
And then hold down alt on your keyboard and select this bottom right one.
And as soon as we have chosen, we can see by now this game object gets.
Basically this main menu just gets as the size of our canvas.
And now we are ready to create our button.
So we're going to select our band panel not the canvas.
So make sure you select your main menu.
Let's right click on it.
And let's go to UI UI and then legacy.
And we're going to choose this button.
So basically select your main menu game object.
Right click on it.
Then go to UI legacy in the bottom.
And then choose this button.
And we're going to select this button.
And let's call this button to something like play button.
So this will be our play button.
And we need to increase the size of it.
So we're gonna hold down alt on our keyboard to resize it from center.
And I want to replace the sprite of this button.
To do so we basically need to move over to Inspector Image component.
And over here we need to drag the sprite that we want to change with.
But we have done a mistake.
Basically I want to create a panel first.
And inside that panel I just want to have this play button and all of those button.
So firstly what we're going to do we're going to select our play button.
Let's delete that.
And we're gonna select our main menu.
Let's create a panel first.
So we're gonna select our main menu.
Let's right click on it.
Let's go to UI and select this panel in the top you can notice.
And now we're going to select our rake tool from this end view.
And we're going to hold down.
So it's going to resize from center.
And we want to replace this image with something else.
But before we do, let's call it something like BG or background.
So let's go over to Inspector.
Instead of saying panel, we're going to say something like BG and we want to change with something
else basically the sprite.
To do so we're going to move over to our project tab assets and then sprites folder.
And over here we're going to move over to our UI folder.
And we can choose this one.
Or you can select any of them.
Basically it's up to you.
So I'm going to select my BG in the hierarchy underneath my main menu underneath my canvas.
And then main menu in the hierarchy.
And let's select this sprite and let's drag it over to this image component in the Inspector.
As you can notice, it seems transparent.
To get rid of that, go to go over to Image Component and then click on this color.
And in the bottom you can see a.
Just drag it all the way to the right side, or set it to 255 in order to get rid of transparency.
And inside this page we basically want to place our buttons.
But before we do, we're going to put a header or BG right over here in the top bar.
And we're going to say something like main banner to do so.
Uh for that we can choose this I guess uh let's, let's choose this.
So I'm going to select this sprite sheet.
Let's go over to Inspector.
Let's click on this open Sprite editor.
So we can notice we have multiple sprites.
So we need to slice individually.
Or we can select any other I guess we're gonna select any other.
Or we can select simply this one as well.
So let's do that.
So now we're gonna select our BG not the main menu because we want that inside this BG.
So that's why.
So let's select this BG.
Let's right click on it.
Let's go to UI.
And we're going to choose this image in the top we can notice.
So let's click on it.
And we want to be in the top bar all the time.
So we're going to move over to Inspector and then go over to Rig Transform.
Click over here and hold down alt on your keyboard and select this top right one.
And as soon as we have chosen, we can see by now and we're going to hold down.
So it's going to resize from center.
And we want to replace this image with uh, basically uh with this sprite.
So I'm gonna firstly rename this to something like header.
A header or let's call it uh let's call it title as well.
It's basically up to you what you want to call it.
So I'm going to call it header something like that header.
And this seems pretty much fine.
And I want to replace the image of it.
To do so we're going to select that sprite sprite and drag it over to this image component source image
field.
So as soon as we drag it by now we can notice and I'm going to select the game view in uh right over
here.
And we want to put a text right over here something like says main menu.
So we're going to hold down alt on our keyboard.
Something like this let's call it uh, basically we want to put a text inside this header and we're
going to say something like menu or main menu.
So let's do that.
So we're going to select our header because we want the text inside this header.
So that's why we're going to select our header.
Let's right click on it.
Let's go to UI and legacy in the bottom.
And we're going to choose this text.
And make sure you go over to Inspector Recttransform.
Click over here and we're going to hold down alt.
Let's select this bottom right one.
So it's going to resize as the size of our header.
And we're gonna we barely able to notice our text to increase the size of it.
Let's go over to Inspector Text component and then font size.
We're going to make something around 80.
And font style I'm going to choose Bold and alignment.
I'm going to choose both of these center.
And we want to change the text inside of it instead of saying new text, we're going to say something
like Manu.
So let's say Manu.
And also I want to change the font font of it to do.
So I'm going to drag a font right over here.
Or we can simply click over here in this font slot.
And we can choose the font right away.
And I'm going to increase the size of it.
Now as you can notice it seems pretty much cool.
So I hope you get the idea.
And let's call it text short for text.
So let's call it text.
And now we want the buttons.
We're gonna have play button.
We're gonna have about button.
We're gonna have volume button and we're gonna have exit button.
So we have many buttons and we want those button inside this BG.
So that's why we're going to select our BG.
Let's right click on it.
Let's go to UI legacy in the bottom and then choose this button.
And now we're going to call this button to something like play button.
So let's call it play button.
Play button.
And we need to increase the size of it.
So let's hold down alt on our keyboard.
So it's gonna resize from center.
And we want to replace the sprite of this play button with something else to do.
So we need to move over to Inspector then image component.
And we need to drag the sprite right over here.
So I'm going to select this one.
Let's drag it over here uh by basically selecting that sprite and drag it over to the source image field
in this image component.
And we also want to uh, uh, we're not able to notice the text inside of this button.
So we're gonna choose our text inside of this play button.
Let's go over to Inspector Text component.
And I'm just gonna change the color of this text in order to make it visible.
So I'm gonna move over to my color field and let's make it something like this.
Or you can choose any color that you like.
Basically, you should match and match up the thing, uh, theme.
That's it.
And font style.
I'm gonna choose bold, bold.
And we need to increase the font size of this button.
So let's do it 80.
And instead of calling a button, we're going to call it something like play uh play something like
that.
And also I want to change the fonts font of this, uh, text.
So I'm going to click over here and I'm going to choose this monogram something like that.
And let's choose that.
I'm going to drag it up.
And we can simply hold down alt on our keyboard to resize it from center like this, as you can notice.
So I hope you get the idea.
And we're going to increase the size of this font.
To do so, let's select our text.
Let's go over to Inspector Text Component and Font size.
We're going to make it something around 100.
Now this seems pretty much cool.
And we can duplicate this button in order to create our button.
So let's do that.
But before we do let's select our play button.
Let's go over to Inspector, then Recttransform click over here and we're going to hold down alt on
our keyboard.
And we're going to select this bottom one.
And because I want this button to start from the bottom side.
So that's why.
And now we're going to select our play button.
Let's drag it up over here.
And if we try to scale down our game view or scale up as you can notice this button and this PG, all
of the all of the things just getting resized itself according to our screen size.
So basically that is the thing.
So before you do make sure you select your canvas.
Then go over to Inspector Canvas Scaler component and a UI scale mode to choose scale with Screen Size.
Else it's not gonna work.
So that's why.
And now we're going to select our play button.
And let's press down Ctrl D to duplicate it.
So we're going to press down Ctrl D and let's move it down.
And this will be our abort button.
So instead of calling play button one we're going to call it about button.
So let's call this one about A button and we also need to change that.
Change the text inside of this button.
Instead of saying play, we're going to say something like a pout.
So let's click over here and let's choose the text.
Let's go over to Inspector Text Component.
And we're going to say something like about.
And now we're gonna select our about button.
And let's duplicate one more time in order to create our.
You can simply say the exit button or the quit button.
So let's select our about button.
Let's press down Ctrl D to duplicate.
And let's move it down somewhere around here.
And this will be our exit button or the quit button.
So let's call it exit exit button.
And also we need to change the text inside of this button.
So let's click over here underneath our PG inside this exit button.
And let's choose the text inside of this.
Basically let's choose the text inside of the basically the exit button text.
Let's go over to Inspector Text component and this will be our exit or the quit button.
So instead of calling a part we're going to say something like exit.
And now this seems pretty much cool.
And we can select we can select the buttons and let's precisely measure.
Basically let's place them perfectly.
And that's going to be perfect I guess right over here.
So make sure you just maintain the gap between these buttons.
And that's going to be fine.
I'm going to select my exit button.
Let's drag it a little bit up.
And I'm going to select my about button.
Let's drag it up.
Uh something over here.
And we're going to choose our play button.
Let's drag it up something over here.
And now this seems pretty much cool.
And if we just go ahead and then click on this play button in the top.
And then try to click on this play button about button or this exit button.
This button will do nothing currently, so we need to hook this button with some certain function in
order to do some something else.
Like if we click the play button, we just want to play our game.
And if we click on this button, we just want to load our about panel.
And if we click on this button that we want to quit our game or we want to exit our game.
So let's get out of play mode.
But before you do that, make sure you select your main menu and then make that one prefab.
So you're gonna have the copy and you don't need to work from scratch.
So that's why we just created an empty parent game object first.
And then we just place it.
All of these things like this button header and this BG.
So that is the reason or the logic for it.
And now we're gonna select our main menu and let's turn it into a prefab.
So we will have the copy of it.
So I'm going to select my main menu underneath my canvas in the hierarchy.
And let's drag it over to this prefabs folder, and let's drag it over to this prefabs folder in order
to turn it into a prefab.
And now what we're gonna do, we're gonna move over to our prefabs folder, and let's create a separate
folder for our UI elements.
To do so let's right click on this prefab folder.
Let's click.
Let's go to create in the top and then folder.
And let's call this folder to something like UI prefabs.
Or we can simply call it UI as well.
And let's hit enter.
And we're going to select the UI elements.
Basically this UI factory UI and this main menu because these elements are UI elements or UI game objects.
So that's why we're going to select them.
And we're going to drag it inside this UI prefabs folder or this UI folder to keep our project clean.
So I hope you get the idea that how you can do it and you can do the same thing with about uh, about
menu as we have done inside.
Basically with this main menu, basically go over to your prefabs folder and select your main menu and
then duplicate that, like as we have done with vector UI and that game over UI.
Uh, so basically do the same thing and it's gonna be okay.
So we have the game over UI right over here.
So this one also a UI game object.
So we're gonna select that and let's drag it inside this UI folder to just keep our project clean.
And you can do the same thing.
So it's gonna be a little bit assignment for you to do that.
But I'm gonna cover this, uh, in the next lecture.
So I hope you get the idea that how you can do it and make sure you press Ctrl s to save your project
in unity editor.
And this is gonna be a little bit task for you to create the about menu.
About menu.
As like we have done with Game over UI and the UI.
So you can just follow the same process in order to achieve this.
And I'm gonna explain this in the next lecture.