Our game over UI.
To do that, we will head over to our hierarchy than canvas.
Let's create an empty parent game object.
First, let's right click on this canvas.
Let's create an empty game object, and let's call this game object to something like Game over UI.
So let's call it Game Over UI and make sure you go to Inspector Rect Transform.
Click here and hold down alt on your keyboard and select this bottom right one.
And as soon as we have chosen that, we can see the this game over here, just get the size of our canvas.
And now we are ready to create our panel or the BG background.
Basically the panel we're going to create first.
So let's select our game Over UI.
Let's right click on it.
Then go to and select this panel.
And we're going to hold down alt.
So basically select the rect tool in the scene view.
And we're going to hold down alt key on our keyboard to resize from center as you can notice.
So we can see it's just uh, we can resize it uh, uh, by holding down alt key from the center.
And now we're gonna replace this, uh, panel image with something else.
Uh, before we call it panel, let's call it BG or background.
Simply let's go over to image Component.
And we need to drag the sprite right over here.
Uh, with, with uh which one we just want to change with.
Uh, so we're going to select all of this sprite.
So I'm going to head over to my project tab assets and then sprite folder.
Then I will head over to my UI folder.
And I'm gonna select all of this sprite by holding down shift.
Then go over to Inspector and Pixel per unit.
We're going to make something like 16 to make it bigger and filter mode.
We're going to choose point no filter to get rid of blurry.
And let's click on this apply button in the bottom right.
And now what I'm going to do I'm going to select my page underneath my game over here by game object,
uh, underneath our canvas in the hierarchy.
And let's go over to image component.
And now we need to drag the sprite right over here.
So I'm going to select the first one.
Basically this one.
Let's drag it over to this slot.
And as soon as we drag it now we can see it.
But it seems transparent to get rid of that.
What we have to do, we need to move over to this color.
So just click on it.
In the bottom you can see a and it's set it to 100.
So we're gonna drag all the way to the right all the way to the right side.
Or we can simply make it 255 like this.
As you can see, now it's gone.
And I'm gonna hold down alt key on my keyboard to resize it from center.
And I want a a header, something over here, something like says, uh, game over.
So I'm going to do that.
Uh, to do that, uh, what we're going to do, we're going to select uh select and we're going to select
an sprite for it.
So I'm gonna choose any of them.
So basically let's select this one.
Let's go over to Inspector.
Let's click on this open Sprite editor.
So we can see we have multiples of it multiples of it.
But I guess uh for now let's leave that when I select this sprite right over here.
So let's select the BG.
Let's right click on right click on it.
Don't select this game over UI because the header we want inside this BG.
Basically this panel.
Uh so that's why we're gonna select our BG.
Let's right click on it.
Let's go to view UI.
And we're gonna select this image component.
So let's go to UI.
In the top we can see image.
So let's click on it.
And we're gonna replace this image with this one.
But before we do let's call it something like header.
So let's call this one header.
And make sure you go to Rect read transform.
Click over here and we're going to hold down alt on your keyboard.
And we're going to select this top right one.
As you can see, as soon as we have chosen now as we can notice and we're going to replace this image
with something else.
So as you can see inside our image component source image and it says none.
So we're going to select this one.
Let's drag it over to that fill.
And as soon as we drag it now we can see and we can hold down alt on our keyboard to resize it from
center, as you can notice.
And we're going to say something over here.
Let's move it in the middle like this I guess.
Okay.
So this seems pretty much fine.
And you can hold down shift to resize it perfectly in the Y as well as in the width.
You can simply say so now this seems pretty much cool and we want it takes inside of this.
Something like this game is over or you lost lo lost something like that.
So we're going to select our header.
Let's right click on it because I want the text inside this header.
So we're going to select our header.
Let's right click on it.
Let's go to UI and we're going to move over to Bottom Legacy.
And then we're going to choose this text.
And we're going to call this text to something like game over text.
Or we can simply call it txt for text.
And we want to fit inside this header or basically this sprite or this icon.
So we're going to select our text.
Let's go over to Inspector Rect Transform.
Let's click over here and we're going to hold down alt.
And we're going to select this bottom right one.
And I want this text to start from the middle.
Basically I want alignment to middle.
To do that we're going to move over to text component.
Then go over to alignment.
And we're going to choose both of these center both of this center.
And we need to increase our text basically the font size so we can able to notice it.
So let's move over to text component and font size.
We're going to make it something around 80.
Or let's make it something like 80.
Let's go with 80 and font style.
I'm gonna choose bold.
And instead of saying a new text we're going to say something like, you lost something like that,
you lost, you lost, and I'm gonna change the color of this text, or we can just leave it like this
as well.
So I'm going to leave it like that.
And font, I'm gonna choose another.
So let's click over here.
Or you can just simply move over to your project app assets and then fonts folder.
And you can select any font and you can drag it over to this slot.
Or you can simply click right over here if you have any font.
Of course I will have in the resources all of this font.
So you can just download that and I'm going to select the first one.
So now this seems pretty much cool as you can notice, and we can just recite it from center.
Sorry.
We can hold down alt to resize it from center like this.
So I guess you get the idea.
And I'm gonna increase a bit up something like that.
And I see I.
Let's do it 80.
Let's leave it with 80.
And it seems it seems fine.
And I'm going to get rid of this.
And this is cool.
Pretty much cool.
And what we want now we want two buttons.
One will be retry button and one will be the menu button.
And we're gonna do inside this BG I want the buttons inside this panel or inside this background.
So that's why we're gonna select that background instead of the header underneath our game over UI game
object.
Let's right click on it.
Let's go to UI legacy in the bottom.
And then we're gonna choose a button.
And we can call this button to something like let's call it menu button or let's call it retry button.
Let's call this retry button and.
Button.
And we're going to increase the size of this button.
So we're going to hold down alt on our keyboard to resize it from center.
As you can notice I want to change the change the sprite of this button.
Basically we need to change the source image in our image component.
As you can notice in the inspector.
So for that I'm going to head over to my project tab assets and then sprites folder.
Then I will move over to my UI folder.
And as you can notice I have uh many buttons.
So I'm going to select any of this.
Sorry I'm going to select this one.
So as you can see we have multiple buttons.
So we're going to select that sprite and go over to Inspector.
So we have multiple buttons.
So that's why sprite mode we're going to choose multiple.
And we already done it.
Filter mode to point filter and pixel per unit to 16.
So we're going to click on this apply button in the bottom right.
And now if we click on this arrow into that spreadsheet we can see the individual buttons.
So I'm going to select any of them.
But before we do let's select the retry button in the hierarchy.
And let's select any of these.
So I'm going to select this one.
Let's select that and drag it over to this image component or inside this source image basically.
So we're going to select that and let's drag it over to the source image.
And as soon as we drag it as you can notice we can able to notice our button.
And we can just hold down alt key on our keyboard to resize it from center.
But the problem is that we build it's like a vanishing.
It's basically seeing transparent kind of bit weird.
Or you can say it's not fitting the theme.
So we're going to choose another button for that.
So we're gonna.
We have to find the sprite first.
So I guess this sprite right over here seems pretty much cool.
So we're going to select any of them.
Uh, let's select this one yellow one.
We're going to choose.
So let's select this sprite.
Let's go over to Inspector and single sprite mode single to multiple.
We're going to choose why because we can notice we have multiple sprites.
So that's why.
And pixel per unit 16 filter mode 2.0 filter.
And let's click on this apply button.
And we're going to click on this arrow in order to see the individuals button.
So now we can notice that and we have this button but still this not just filling up okay.
So what we have to do we need to select a perfect button for this.
We can select this button as well.
So let's select this one instead.
So we're going to select this one.
And let's select the retry button underneath our GameObject in the hierarchy tab, and we're going to
drag the sprite right over here.
Now as you can notice, this seems pretty much cooler than other sprites, and we can hold down Alt
and Alt on our keyboard to resize it from center, and you can hold down shift on your keyboard to resize
it from in the X and in the Y with same aspect ratio.
And we have the text inside of the of this button, but we're not able to notice it because the text,
the font size of that, uh, of that text is too much low.
So we're going to click over here.
Let's select the text.
Let's go over to Inspector.
Uh Inspector, we're going to uh go over to this text component and color.
I'm going to change with something white to make it visible.
And let's make the font size something around 80.
And instead of saying button we're gonna say something like retry, retry, write, let's say retry.
And I want to change the font of it.
So I'm going to choose this monogram.
And I'm going to increase it a little bit up something like 100 and font style I'm going to choose bold.
And I want this to be try takes a little bit up.
So I'm going to choose this.
Make sure you select the text inside this retry button.
And make sure you just move it up like this.
So we have it retry.
And now we need to create one more button that will be our home button.
Or you can simply call it a menu sorry a menu button.
And I want to I want this button to start from the bottom side.
So that's why we're going to select our retry button.
Let's go over to Inspector Rick Transform and then click over here.
And we're going to hold down.
And we're going to select this bottom one right over here.
And now we're going to select our button.
Let's drag it over here.
And if we try to.
try to scale down our screen, we can see the button.
It just resizing itself according to our PG as well as according to our canvas.
So now let's duplicate this button in order to create our menu button.
Sorry.
So we're going to select our button.
Let's Ctrl D for duplicating it.
And let's move it down.
And instead of calling retry button one we're going to call it something like menu button.
So let's go over to Inspector and let's call this one menu button sorry menu button.
And we also need to change the text inside of this button.
Instead of saying retry we're going to say something like menu.
So let's click over here.
And we're going to choose the text inside of this button.
And let's go over to Inspector then text Component.
And let's say something like menu.
And I guess this seems pretty much cool by now I'm going to drag it a little bit down and I'm going
to choose my retry button and let's move it a little bit up or something like in center.
And we can say something right over here, uh, like whatever you just want to say.
You can just do that.
And now we're going to make this game over by a prefab.
So now we're going to have the copy of it and we can just, uh, basically, uh, we don't need to work
from scratch like we have done adding this button, adding this text, and making this panel.
So, so that's why we just created an empty game object, which is game over UI.
And to just keep all of the things in an organized way and to make a prefab so we don't need to work
from scratch.
So we're going to select our game over here by underneath our canvas in the hierarchy.
And let's drag it over to this prefabs folder in order to turn it into a prefab.
So we're going to turn it into a prefab.
And if we select our game over here by occupy underneath our canvas in the hierarchy tab and then delete
it.
As you can see, it's gone.
But we do know that we have the copy of it, basically the prefab.
So we can select the prefab from that folder.
And we can just drag it on top of this canvas GameObject.
And as soon as we drag it, we can see by now we have it.
So that's why we just turn it into a prefab.
And we just created this empty parent game object to just keep all of the things inside of it, and
we don't need to work from scratch.
Basically, that is the purpose.
So that's why we have done it.
And now we're going to press Ctrl s on our keyboard to save our project or any you also make sure you
select your game over UI.
Then go over to Inspector Overrides and then apply all.
If you change anything inside this game over UI game object and this button will do nothing currently.
So we need to hook this button with some certain function.
So I hope you get the idea that how you can do this.