Hello guys.
Welcome to the video.
In this one I want to show you how to make a simple button.
That's just what we need to start the game.
And that's the only thing we want to do in this video.
But we need a font so we can make this button pretty.
Because of that, we're going to import the font I attached to this lecture.
It is pixelated font.
It is named as Minecraft.
Let's just go to assets.
Drag it here.
I'm just going to.
Go ahead click.
Actually we need to go to Window Text Mesh Pro Font Asset Creator because this is just a font.
But we cannot use it inside of unity to make it work.
Inside of unity we need to create assets with this font.
Let's click import tmp essentials.
Okay, good.
Now let's close this, and let's take this font over here and drag it to the source font.
Now we want to just click Generate Font Atlas.
Ah, it keep popping up, I hate it.
Let's click save.
And here I want to go to graphics or actually we have TM Pro folder.
Here we have okay let's go inside of this folder once and we're going to save it here.
Nice.
Now let's take this to oh man I'm just going to close it.
Let's go and drag this to the Text Mesh Pro like that.
And here I'm going to drag it to the fonts folder like that.
Now it is nice and pretty over here and we can use it.
Now let's make a button.
To make a button.
First you need to make canvas.
I'm going to make.
Uh, UI.
Canvas and canvas is what is used to, you know, set up UI for an entire game.
Either you want to have buttons, health bar, everything done under the canvas.
Also, this event system over here is very important.
Do not delete this object.
Okay, now let's go to canvas and first thing we want to do is to change UI scale mode to scale with
the screen size.
To explain why, I'm going to quickly make UI button text Mesh Pro and I'm going to explain how buttons
are working.
This is just for explaining the scale of a canvas.
Now let's just click here by holding Alt and Shift, and let's make this button big like 500 by 500.
Now because this canvas is not scaled with the screen size.
If you change resolution, for example, to 4K, this button going to be smaller.
If you change resolution to something lower or three aspect and drag it like so, you can see button
is not changing itself and that is the problem.
But if you go ahead and choose UI scale, mode, scale with the screen size.
Now this button will always be, uh, fit.
Let me just make it smaller.
It's real big.
Like 120 by 120.
Okay.
So now, no matter what size of a screen you have, it's a big monitor.
It's a mobile phone, anything like that.
The button will always stay at the same size.
And that is what we need, right?
You can see I'm changing resolution and button is the same to an opposite of what was when we had.
Uh, constant or what was that constant pixel size?
Now you can see but on smaller bigger.
But if we change it to scale with the screen size it will stay the same.
Nice.
Also, let's set reference resolution to 1920 by 1080 and we don't need to do anything else for now.
This is just good.
Now I'm going to delete the button.
I'm going to scale out a bit.
I'll wait.
How it was.
It was like that right I forgot.
Yeah.
And now we need to create a button.
We're going to focus on canvas because this is the entire canvas you have.
And this is the center of it.
Over here.
You only have corner of the canvas and it's not representing what you see in the game.
This canvas represents what you see in the game.
Now let's go ahead and just.
Click create button.
UI button text Mesh Pro.
Now we have a button.
And over here, first thing I want to do is to attach it to the center of the screen.
You can do that by clicking here and setting pivot point and also setting position to the center of
the screen.
You can do that by holding shift alt and click in the center.
Now this button will be always in the center.
Even if you change something, it will be attached to the center.
Later on we're going to attach things to left and right, but as of now, let's just keep it in the
middle.
Also, I want to increase this button in size.
We can focus on the button and click T.
To stretch the button.
I think it should be something like this.
Should do.
Yeah, this is fine.
Now let's go ahead to the Text Mesh Pro over here.
And let's change font asset to Minecraft Asdf.
Now font is pixelated and next step would be to make it white.
Let's make it white.
Now we cannot see it because of the background.
And we can go to the button itself.
Go to image and change color to something bluish.
Wait a second.
Something like.
This.
And let's just.
Make it transparent.
Just so we have some background, but it's not that important.
We can even, like, remove it.
Totally.
It's fine.
Now let's go back to text.
We can see the text, but we can see this kind of small.
One of the options would be to check auto size.
And then it will take the shape of the button and it will adjust the font size.
So text will be fit into the uh size of the button.
For example, this is going to say new game.
And also it's a bit difficult to read now.
So what I want to do here is to go all the way down.
And add this dilate to the face of the text.
Let's make it one.
Now it is a bit difficult to read, but it's okay because we're going to go to outline and change thickness
to one.
And now it is crispy, nice.
It is easy to read and still it looks pixelated.
I kind of like it.
If you wanted to have differently, just play with the variables over here.
Try to adjust to what you want to have and maybe even use different font.
That's fine.
Now I can see my text is not entirely in the middle, even though I did align things over here.
So I'm going to select Text Mesh Pro.
And here I can define the size of a text box, not the button itself but text box.
And I'm just going to reduce it slightly from the top.
But I want this to be always in the center of the object.
So I'm going to go ahead over here.
Oh it's stretched okay.
It's fine.
We're going to use this more during the creation of UI.
So no worries.
There is no doubt you will understand.
How does it work as of now.
Let's leave it at that.
I think this is good.
Let's rename this to New Game.
And now we can make this button work.
As of now, even just like that, it is clickable.
You can click on the button, you can see it's flashing a bit, but it does not do anything to make
it do something.
We need to use a script so we can go to scripts and let's make.
Script.
It's going to be UI.
Main menu.
Now let's take the canvas and drag the script on the game object.
And inside of this we need to do something.
We just need to make one simple method that will start the playable scene we have.
First of all, we want to have a public stream scene name is going to be the text that has name of the
scene we're going to use and we need using Unity Engine scene management here.
Now we can make a public void new game.
And this method will do this.
Scene manager load scene with a name of a scene name.
Just like that.
Now let's go back to unity.
You can see it has seen name over here.
We can go to asset scenes.
Take the name of a scene.
I'm just going to copy it.
Go to canvas and paste this in here.
Now we can go to New Game.
And here you can choose what will happen on click.
Let's just click plus drag canvas then go here.
Find the script you want to use.
Then find the method you want to use.
And this will be new game.
Now when we go to play mode.
You'll see there is nothing here except the button.
And if you click this button, you go to the main scene and you can play the game.
Yay!
Very good.
I like it a lot.
So that's the button.
That's how you create buttons.
Very simple thing to do.
Very easy one.
And let's go to next video.
We're going to develop more of like buttons and UI elements.
I'll see you there.