Let's create the jump button and the attack button to do so.
We're going to move over to our hierarchy tab, then canvas.
And let's go to this UI GameObject.
So inside this UI we have the Apple icon as you can notice and all of the text.
So let's select this UI.
Let's right click on it.
Let's go to UI legacy in the bottom.
And then we're going to choose this button.
And we can call this button to something like jump button.
So let's call it jump button and jump button.
And I want this button uh to the uh to the right side in the bottom to do so, to basically move, uh,
to move this in the right side, we can select that button and we can simply drag it, but in a different
screen it's gonna be different, uh, sizes.
So that's why we need to move over to we need to move over to this rect transform.
Then click over here.
And we're going to hold down Alt and Alt on our keyboard.
And then we're going to choose this, uh, bottom right anchor.
So this button always going to be in the right side.
In the bottom in the bottom right side.
And let's now we're going to select our button.
Let's drag it over here something like that.
And let's scale this button.
So we're going to hold down alt.
So it's going to resize from center.
So we're going to make it something like uh 215in the width.
So let's go to Rick Transform then width.
We're going to choose something like two uh 225.
Sorry not 225 in the x or basically width and in the height we're going to make 2 to 5 basically same.
Or you can simply say in square type like that.
So now what we need to do we need to we're going to drag our square.
We're going to replace this sprite with our square.
To do so I'm going to move over to my project tab, then assets and then a sprites folder, and then
I'm going to head over to my UI folder.
As you can notice, if I scroll down, I have an up arrow, up arrow and a square.
So let's select our jump button first, then go over to Inspector, then Image component.
So we need to drag the sprite right over here.
So I'm going to select my square.
Let's drag it here.
And as soon as we drag it we can see by now it's pretty much fine.
But the problem is that we can see the text inside of this button and we don't want the text.
Instead we want the icon.
So we're going to select our text inside this jump button.
And let's select that and let's delete it.
Instead we're gonna we want a icon basically the up arrow icon.
As you can notice in my UI folder.
And we want that icon inside this square or inside this sprite.
So that's why we're gonna select our jump button.
Or this squares you can simply call it.
then right click on it, then go to UI and then image in the top.
Select it and we're going to replace this image with our up arrow.
But before we do it let's call it icon instead of image.
To do so let's go over to Inspector.
Then we're going to call it icon.
So let's call it icon.
And we want to replace the icon with our this up sprite.
So we're going to select our icon.
Then select this up arrow basically this sprite.
And let's drag it over to the source image field.
And as soon as we drag it we can see by now and make sure you just go over to drag transform.
And then click over here and we're gonna hold down alt.
And we're going to select this bottom right one.
So it's gonna resize as the size of our square square.
Or you can simply say with this button it's gonna resize itself, this icon or this up arrow.
And we want a little bit small this up arrow icon, so we can simply choose the rake tool in the scene
view or rake tool in the scene view.
And we're gonna resize and we can hold down alt on our keyboard to resize it from center like this.
So I'm gonna choose 45 from the left side and from the right side.
I'm going to choose 45 to do so.
Let's select the icon.
Let's go over to Rake Transform and let's do 45 or to the right side sorry left side and 45 to the right
side.
And from the top I'm going to choose 35.
And from the bottom I'm going to choose 35.
As you can notice, this seems pretty much cool.
And make sure you just simply move over to your GUI, game object and UI game object and then go over
to Inspector Overrides and then apply all.
But before I do, I'm gonna simply copy this jump button.
So I'm going to press Ctrl D on my keyboard.
And I'm going to call the duplicate one attack button.
So let's go over to.
Inspector.
Let's rename this to attack button.
So let's call this attack button.
And what we're going to do now we're going to drag it in the up direction.
Something like this as you can notice.
And we're going to replace the icon with our attack icon or the sword.
As you can notice I have inside my folder.
So you will find all of these in the resources.
So you make you basically have to download them.
And now I'm going to select the icon inside this attack button.
So let's choose that.
Let's go over to Inspector Image Component.
And we're going to select this sword.
And let's drag it over to this source image field.
And as soon as we drag it we can see by now.
But the problem is that it's kind of bit weird.
Basically, if I select this sword, a UI, basically the sprite, and then click on this arrow, we
can see individual parts.
So since this is a single sprite.
So what we basically need to do we need to select that sprite.
Then go over to Inspector Sprite mode to choose single because this is the single sprite we have.
So that's why.
And after doing that, make sure you scroll down to the bottom and then click on this apply button.
And as soon as we click on apply it's kind of it gets weird.
So basically we need to choose the icon inside this attack button one more time.
And now you can select your sort a sprite and then drag it over to this source image in the uh in the
inside this slot as you can notice.
So as soon as we drag it by now, by now we can notice it seems pretty much cool.
But it's kind of it's, it's stretched or basically rectangular type.
And this source sprite is not rectangular type, it's basically square type.
So basically what we need to do from the top we're going to do 45 and from the bottom we're going to
do 45.
Basically, make sure you just make that one and make that one square type.
Or you can simply select your icon, then go over to your scene view.
Select this break tool and you can hold down alt and you can just resize it.
So since this is square uh sprite.
So that's why from the bottom from the right, from the top, we just uh, all of them, we have chosen
45 as you can notice.
So this seems pretty much cool by now.
And now what we can do, we can simply move over to parent game object and then Inspector then overrides.
And then we're going to click on this apply all button.
So the changes we made inside this UI just gonna be saved into this UI GameObject prefab as well.
And if we just go ahead and then click on this play button and try to click this jump button and this
attack button, you will see nothing just gonna happen.
Why?
Because we need to hook this button with some certain function in order to do something.
So just.
So let me show you first, and you're gonna.
You're gonna understand.
So now if we just go ahead and then click on this attack button, as you can notice, this attack button
doing nothing.
And also this, uh, basically it's playing the attack animation clip because we do know that if we
click the left mouse button, we just triggering that attack parameter which is playing the attack animation.
So if I just go ahead, click on this jump button.
We're not able to see our player to jump.
So we need to hook this button with some certain function in order to do something.
So basically once we're gonna click on this jump sorry jump button.
We want our player game object to jump.
Basically we need to call the jump function as we have done inside our player skip.
So I hope you get the idea.
But the problem is that we can see the buttons are.