Hello, guys.
In this section, we're going to make a menu for our game.
It's going to be pretty simple task.
And first, what I want to do is to get asset for the menu, because I want this menu to be pretty.
And I guess it's better we get an asset rather than make it from scratch by ourself.
And personally, me, If I'll do it, I'm sure it will be ugly because I'm no artist at all.
So what we need to do here is to go to Window and click Asset Store.
Probably yours will open in the window inside of unity.
If you're using unity for the first time, then you can click a checkbox that says Open an browser and
next time you click as a store from window over here, it's going to bring you to a new tab in browser
with the asset store in it.
All right, So next step would be just go to search field and type UI.
We're going to go down and click free assets and then find this dark theme UI.
If for some reason you cannot find it, I'll place link attached to this lecture so you can just go
buy the link and get it.
Now let's go inside and yours will probably say, add to my assets just something like this.
Over here.
So you need to click add to my assets and then you click open in Unity.
All right, Now we have it here.
First you need to click download.
Once it's downloaded, you click import over here.
Inside of this asset, we can uncheck this dark unity scene.
We don't need them as scene.
We know what we're going to do, but we're going to keep these three folders just in case.
All right, that's good.
Now, let's create a canvas.
And that will be pretty simple.
Let's just create UI canvas.
Now we have a canvas in the game.
If you click it twice, you can find it.
This is the one.
Now, let's go on the right over here and choose scale with the screen size.
Because this is important.
If you don't click scale with the screen size, size of your UI will stay constant no matter what type
of screen you're using.
And if it's a mobile phone, for example, the UI will be very big.
So we need to do scale with the screen size.
And we're going to do reference resolution 9 to 24 X and then 84 Y.
Also, we're going to go here and choose full HD 910, 22, 10 to 80.
This will be easier for us to navigate because this is the resolution that most of the people use.
Now let's click Create Empty Under the Canvas and I'm going to name it as main menu UI.
What I want to do here is to make it size of cannabis itself, just like this.
Cool.
Now let's think what we're going to have in the main menu.
It's going to be settings for volume.
It's going to be shop and it's going to be mute button and tap the start button so we can create all
of those.
Let's go to dark UI that we just downloaded.
And in the free folder there are lots of icons that we can use.
First on the create UI button text merge pro under main menu UI and we got pop up window that says we
need to install text Nash Pro.
If you don't have it, then you have to install it and let's do it together.
Might take some time, but usually it's fast.
Now let's close it and now we have text message pro button.
I'm going to rename this one to settings and I'm going to just put three letters that says BTN like
four button.
Now let's go to this folder and find the icon that represents settings.
And I think this one is pretty much what we need.
Let's just drag it over here.
And click set native size.
Now, this is pretty.
This is what we need.
We can go inside and delete text for this because this is pretty self-explanatory and we do need text
for this button.
I think we can make it a bit prettier.
So what we should do here is to find this.
I can never hear.
I saw before.
Yeah.
This 132.
Let's drag it here and make it black.
And just be transparent.
Something, something transparent.
So 150 is okay.
And then we're going to create another image under this UI image that I'm going to call icon.
And here I'm going to drag my icon.
And this looks a bit better.
Let's set native size and maybe decrease it just by a bit.
Or you know what?
Let's make the entire button bigger because we're going to press it with our finger.
Right.
Let's try this.
Let's set size 150 by 150.
And maybe just change this size of the icon by a bit to something like 120 to 120.
Yeah, I like it more.
Cool.
Now, let's take this button.
Go over here and here we can set position and pivot point for elements of UI, and we're going to choose
top right corner over here.
And after we do that, let's just press W and move it a little bit down a little bit to the left.
So it's not completely in the corner, you know?
Cool, right?
Some job is done.
Let's continue, let's duplicate this button, move it to the left over here, and this time I'm going
to rename it to shop, Button Shop.
Button.
We're going to open it, find the icon and change image to something that we want.
For example, this one looks nice.
Okay, now one more to go.
Let's duplicate this one.
Press just.
Yep, just left top left corner.
Move it a bit lower and maybe to the right.
Then find the icon and find the image we want.
And this is for mute button.
So I think this could work.
But I guess there is a.
Not musical.
Not I somewhere.
Yeah, this one.
I want to use this one.
Okay.
And I want to make this one exactly a bit smaller, just my personal preference.
But if you want, keep it as it is.
I'll try to put something like 100 by 100.
And place it somewhere here.
This is good enough.
What else we need in the main menu is big tap to start button.
We need to rename this one so it should be mute.
Button, and now we can create new button.
Let's.
Let's not duplicate this one but create UI button, text, match pro and this one going to be really
big.
I'm going to make it this much big.
Yeah.
This much big.
We're going to make it transparent, completely transparent.
Then I'm going to go to the text.
Want to make it bigger?
The font size should be really big.
Change color to white.
Let's tap.
Tap to start.
Let's see if we can change fun to something different.
But if all the only have two fonts.
Yeah, this looks okay.
So font size can be so we can round up size to 100.
And now let's make an animation for this one.
And it's going to be pretty easy actually.
Let's go to animations create folder for UI.
UI.
Inside I'm going to create animator controller that says tap to start AC.
That is just drag it to these text match pro.
Like this.
Now it has an animator we can go to, animations create.
Going to do a tap to start.
And just up to start.
It's okay.
And now we need to find this text Match pro.
Click record button.
Make it transparent, then go a bit further by somewhat amount.
Let's say five.
Go here again, make it not transparent, then move again by somewhat amount like five and make it transparent.
Cool.
Now let's click this record and see how it looks.
That is too fast.
So what we can do is to move this one up to a minute and this one up to 30 seconds.
Let's see now.
This is almost everything we need.
What I want to do next in the main menu is to add info about how many coins we have and our last score
and our best score how we can do this.
We can create UI image.
It's going to be named as, let's say, just general info and then we're going to go to dark UI three
and find some panel for this.
I think this one would be nice.
Or maybe this one want something more squared.
This one is.
Okay.
Let's drag it over here.
See how it looks.
I think we can increase it to something like this and place it in the bottom central point.
Don't forget to hold out and shift when you do this.
All right.
Somewhere here is okay.
Now we can create a couple of elements.
Under this element it's going to be UI, text, match pro last score, another one duplicate.
Rename this to best score and duplicate rename to points and just coins is key under this coin.
So when I create UI image and for this one we need to go to our graphics folder, find a coin and drag
it here.
Okay, this is good.
Now let's move this coin to the right.
And maybe let's make it smaller.
Let's try 60 by 60 this.
Okay.
And let's take this coins.
Move it here.
Actually, it's better to move away our two scores info over here so we can set up coin in.
All right, so this is kind of OC.
I guess it's better to do alignment on the right over here.
On the right.
Move it to the right and then take the image and move it to the left bit so we can align them next to
each other.
And just like this, then let's take our last score and type some text over here so we can visualize
how it's going to look.
Last score.
Let's say 4567.
What with above.
So we need to make it longer.
We can do this by dragging this box over here.
Just like this next one, best score.
And it's going to be 1100.
506.
Drop the box further.
And let's drag the box further for this one as well, and let's move with below.
It's kind of not fit in, but I guess we could make the size of the font smaller.
So let's select the both of them and change font size to something smaller.
25 looks okay.
We are basically done with the main menu.
If something comes up, we can fix it later on the Polish stage.
I think this is okay.
For now, let's go to next video and lay out ingame menu.
See you there.