Let's create the game over UI.
So I'm gonna move over to my project tab, then assets and then UI folder.
I have the GUI.
As you can see, I will have a link in the resources.
So you can check this out as well.
So let's select the sprite sheet first.
Then go over to Inspector.
Click on Open Sprite Editor and we can see we we have more than one.
So we're gonna uh we're gonna choose multiple in sprite mode multiple in inspector and make this pixel
per unit something around 16in order to make it bigger in size.
And then scroll down and choose this filter mode to point to filter to just get rid of blurry.
And after doing all of these things, just click on this, apply in the bottom and then click on this
slice in the top left sprite editor.
Leave it to automatic and click on that slice, and then click on this apply button in order to slice
individually.
And I'm gonna select my game view once again over here.
And let's go to that sprite sheet.
And then click on this arrow.
And we can see the individual sprites by now, so I'm going to select this one this way.
But before we do, let's head over to this project tab and let's move over to this canvas.
I'm going to select this canvas, and I'm gonna drag it on top of my hierarchy so I can see all the
time.
So I'm going to make a game over UI.
And we're gonna make a empty parent game object first to just keep it clean way.
So that is the thing.
So we're going to select our canvas.
First let's right click on it.
Then create an empty game object.
And we're going to name this call a name.
We're gonna name the we're gonna name this game object something like Game Over UI.
So let's call it Game Over UI.
And make sure you just go to Inspector Recttransform.
Click over here and hold down alt on your keyboard and select this bottom right one.
As soon as we have chosen we can see this game over.
UI now gets as the size of our canvas game object.
Basically, it gets resized as the size of our canvas game object.
So make sure you just do that and we're gonna select our game over UI.
Now let's right click on it.
Then go to UI and then choose this panel over here in the top you can see.
So we're going to choose this panel.
So let's click there and let's select the move tool from this in view.
And we're going to hold down alt to resize it from center.
As you can see.
And I want to replace of this panel with something else.
So what we can do we can go over to Inspector Image component and over there.
So source image we can see background.
So we're going to replace this with something else.
So I'm going to choose this one I have it over here as you can see.
So I'm going to select that sprite and let's drag it over to this slot says Source Image.
And what we're going to do now we're going to click on this color in the A.
You can see it's set to 100.
So we're going to drag all the way to the right.
Or we're going to make it to 55.
And we don't want to be transparent.
So that's why a which is the bottom we need to drag all the way to the right.
Or you can simply put Two, five, five.
And just to get rid of the transparency.
And now what we're gonna do, we're gonna create some buttons.
We're gonna have a retry button and one, we're gonna have a menu button.
So if we just click there, we will go over to menu.
And once we click on that retry button then we just want to load up the game scene.
Uh game scene.
Or we just want to play our game one more time.
So we're gonna select our panel.
Let's right click on it.
Let's go to UI and then legacy in the bottom.
And then click on this button or choose the button.
And we can see the button now and I'm gonna name this button to something like retry.
So what I will do I will move over to Inspector and I'm going to name it over here.
So I'm going to call it retry button.
And also we need to scale up our button.
So let's select the button first.
And we're gonna hold down alt on our keyboard to resize it from center.
As you can see.
And I also want to change the a change.
You can simply say this button sprite with something else or we can just leave it like this.
It also seems too much fine, but I'm going to change with something.
So I have the sprite over here, as you can see.
So I'm going to select my retry button in the hierarchy.
Let's go to Inspector Image Component and we can see Source Image and it's set to UI sprite.
So I'm going to replace this with something else.
So I'm going to select this one I have it my UI folder.
So I'm going to select that one.
And let's drag it over to this slot.
As soon as we drag it now we can see our button.
And you can just hold down alt on your keyboard to resize it from center.
And the problem is that we're not able to see our text.
Basically the text or the font size is too small, so we need to make it a little bit bigger.
So let's click over here in order to see the child.
And we're going to select our text component underneath our retry button.
Let's go to text Component in the inspector.
And we're going to make the font size something around 100.
So let's make it 100.
And I also want to change color with something.
Something like this color.
You can go with any color that you like.
And I'm going to choose font style to bold.
And also I want to change the font of this button or this font.
I just want to change it so we can drag the font over here in this font slot.
Uh, or you can just click over here as well to the right to this right size.
And if you have a font then you can just choose that.
So I'm going to choose this one.
Or this one seems pretty much cool.
You can choose any font that you like.
I'm going to choose this one.
And what we're going to do now, uh, we're going to change uh, the button.
Instead of saying button, I'm going to say something like a retry.
So let's say retry.
Sorry, we need to select or we need to just go over to this text file.
And I'm going to change it to something like retry.
And this uh seems pretty much cool.
And we're going to increase our font size a little bit.
Something around 1 to 5.
And we're going to select our retry button.
Let's hold down alt.
And we're going to resize it from center like this.
And this seems fine but we're going to make our font size a little bit uh down uh something around uh
100.
Or we can put it 90 as well.
So let's go to text comp text, select the text, um, check underneath your button and then make this
font size something around 90.
But it's totally up to you how much you want.
I'm going to choose 95, and I want all of these letters to be capitalized.
So I'm going to say retry something like this.
And this seems pretty fine now.
And you can adjust as well the text.
And you can just select your button and you can hold down alt on your keyboard to resize it from center.
And let's suppose you just do you just want to resize it same proportional to the width as well as height.
Then you can just hold down or shift on your keyboard, so it will resize and resize in the in the height
and in the width with same uh, same or just it's gonna match up the ratio.
So you can just hold down shift key in order to do that.
Or you can simply press down hold down, or you can simply hold down on your keyboard or alt key to
resize it from center.
And I want this button from the top.
Something over here we want.
So if we go to Inspector Rect Transform, click over here and we're gonna hold down alt and we're gonna
choose this top anchor one.
And now we're going to drag it a little bit down something like this.
And if we try to scale down or scale up our screen size, we can see this panel just getting resized
as the size of our screen as well as the button inside this panel just resize resizing according to
our panel size.
So basically that is the thing.
And now we're going to duplicate this button in order to create the menu button.
Basically we're gonna have two buttons.
One will be retry.
So once we click on this retry button then we're gonna retry our level.
And once we click on that menu button then we're gonna load up our menu.
So let's select the retry button.
And let's press down Ctrl D in order to duplicate.
And I'm gonna move it down something like this much.
And I'm gonna call this button instead of retry button one I'm gonna call it menu button.
So let's call it my menu button.
I'm gonna call it menu button.
And this seems fine.
And also we need to change the text inside of this button as well.
Instead of saying retry we're going to say something like menu.
So let's select the text underneath our menu button.
And let's change the text in our text component as something like menu.
Now this seems pretty much cool.
And I'm going to drag my menu button a little bit down, something this much.
And let's select the retry button.
And I'm going to drag it a little bit down.
And I want it text right over here.
I said something like, game is over or defeat or we lose.
You lose something like that.
We're gonna say, so let's select the panel game object.
Don't select.
Uh, we're not gonna select our game over UI game object.
Instead, we're gonna select our panel because I want that text to be inside of this panel.
So that's why.
So we're gonna select our panel game object.
Let's right click on it.
Then go to UI legacy in the bottom.
And then choose this text.
And I'm gonna move this text somewhere over here.
So firstly we're going to move over to let's scale this first.
So we're going to hold down alt on our keyboard to resize it from center.
And I'm going to move it somewhere over here.
And let's increase the text font size of this text in order to see.
So I'm gonna set the font size something 100.
And I'm going to change the color with something else in order to make it visible visible.
And I want both of these alignment to center to be centered, as you can see.
And I want this text takes to fit in the top, uh, top corner or top side or top anchor, you can say
inside this panel.
So in order to do that, in order to just set it on that anchor, what we basically need to do, we
need to select the text and then go over to Inspector Rect Transform.
Click over here and we're going to hold down alt.
And we can see in the top right we have this anchor.
So we're going to choose that one.
So it will be always in the top side.
And it's just going to resize as the size of our uh this uh panel.
And I'm going to drag it a, I'm going to drag it a little bit down.
And uh, instead of saying new text, I'm going to say something like, you lose, uh, something like
you lose and you can choose a text as well, or sorry font that you want.
I'm going to choose this one.
This one seems pretty much fine to me, and I'm gonna choose font style to bold.
And this a much pretty much cool.
And now if we try to scale down or scale up.
We can see the text inside of this panel.
It's just staying in the top anchor and it just resizing itself or just increasing the size according
to our panel size.
So basically that is the thing of choosing that top anchor one as well as for this button.
So make sure you just do that.
And I'm gonna say this text to something like game over text or you lose.
So I'm gonna rename it to you lose something like that.
And this seems pretty much cool by now.
And also we're going to create a text right over here.
And it's just going to reference the high score something like that.
It's gonna reference the high score.
Uh, but uh, let's uh select the you lose you lose text.
And we're going to press down Ctrl D in order to make it duplicate.
And I'm gonna move it down.
And instead of saying you lose, I'm going to say something like high score.
So let's put high score.
High score.
Something like that.
And I'm going to make a colon.
And this seems pretty much fine.
And for this text I'm going to choose the to the left side.
It's just going to be from the left side.
So I'm going to go over to my Inspector Rec Transform.
Click over here and we're going to hold down alt.
And for this we can just leave it like this.
And we can just make it, or we can just drag it inside in order to just to be there.
And I guess you can just play around with this rec tool and you're going to get that, and I'm going
to decrease the size or the font size a little bit down as something around 80.
I guess 80 seems pretty much cool.
And I want this text to be start from the left side or left side somewhere in this left side.
So that's why we're going to move over to this alignment.
And we're going to choose the left one.
And now it's always going to start from the left.
And I'm going to move it a or drag it inside.
And we're going to duplicate this.
But before we duplicate I'm going to name this text to something like High Score text or let's go to
Inspector and I'm going to name it High Score text, high score text.
And let's duplicate this high score text, this high score text.
And we're going to move to the right side.
And that's going to reference how much score that we made so far.
So we're going to select our high score text.
And we're going to duplicate by Ctrl D.
And I'm going to move this over here.
And also I want this to be start from the left side.
So make sure you just go to alignment and then choose the left one.
And instead of saying high score I'm going to set to zero.
So it's just going to reference how much score that we made so far.
And I'm going to move it like to the like to the like to right side.
And now I guess this is much this is fine.
You can just play around and you're going to get that.
And I'm instead of saying high score text one, I'm going to say something like this one to be high
score.
Basically, it's just gonna be our high score or that we made so far.
So I'm gonna call it high score.
High score.
And I want to change the font of this high score with something else.
So let's select the text first, which is high score.
Let's go to Inspector Text component.
And we're going to choose the font.
Something else like this I guess this seems pretty much cool to me.
So I'm going to choose this one.
And I'm gonna increase the size or the font size a little bit up.
So let's go to font size.
And I'm gonna make it something around 125 and 125 seems pretty much fine.
And you can just adjust as well.
And you can just put over here in this text component, the number that you would like to go with by
default, something like 1000.
But I'm going to set by default to be zero.
And this app fine to me.
And now what we're going to do, we're going to make this game over UI game object a prefab.
So that's why we just created an empty game object inside this canvas game object first, and we just
made the size of that game over by game object as the size of our canvas, and we just place all of
the necessary things inside that game over UI game object, because we're gonna make that one prefab
so we don't need to work from scratch, make this text, and then create this button from scratch.
So we're gonna have the copy.
So that's why we just created an empty parent game object first.
And inside that game object we just have done all of these things.
Now we're going to select the parent game object or this game over key game object underneath canvas.
And let's drag it over to this prefabs folder that we made.
So I'm going to select my prefabs folder.
Let's select the Game Over UI GameObject from the hierarchy underneath our canvas.
And let's drag it over to this prefab folder in order to make it prefab or to in order to make that
one copy.
And if we just click on this play button in the top and try to click on this retry or this menu button,
you will see this button will do nothing currently.
Why?
Because we need to hook this button with some certain function.
Like once we click on this retry button, then we want to reload the game.
And once we click on this menu button, we just want to load up the menu scene or the menu.
So I'm gonna get out of play mode.
And also I don't want this game over UI to be active by default.
I just want to deactivate.
But once our, uh, deactivate by default and once our player game object loses all of his health,
basically player game object dies.
At that moment, we just gonna activate this game over UI.
So that's why we're going to select our game over UI game object first underneath our canvas.
And let's go to Inspector.
And you can just uncheck in order to deactivate and or you just setting it to false.
And if you just want to activate or you just want to set active to be true, then you can just go over
to Inspector and then check this and it's gonna be active.
I'm going to uncheck this.
Basically I want that game over UI game object to be deactivated by default.
But as soon as our player game object loses all of his health, then we're going to set this game over
UI to be activated through our C sharp script.
So basically that is the thing.
So I hope you get the idea that how you can make this game over UI, make sure you just create a empty
parent game object first, and then make that game object as the size of your canvas by going over to
Inspector Rect Transform and then clicking over here, and you have to hold down alt on your keyboard
and select this bottom right one.
So it's going to be resize as the size of your canvas game object.
And after that you can just do or just place all of the things that you need to do.
And after that, make that make sure you just make that one prefab.
So you're going to have the copy.
And now I'm going to press down Ctrl s on my keyboard to save my project.