We need to show up how much health this player GameObject currently have.
We're showing a underneath our player script.
As you can see in the Inspector, we have max health paths, but the player cannot.
Who just gonna play the game will not gonna gonna keep track of how much this player game object are
gonna have.
So we're gonna show up in the UI that so player can just know how much health we have.
So let's do that.
So we need to create the canvas first before we just play create the tags and then button icons.
Basically we need to create the canvas first.
And into that canvas.
We need to place all of the UI elements.
It can be icons buttons, menu something like that.
So we need to create the canvas first.
Then we need to do that.
So let's go to hierarchy in order to create the canvas.
Let's go to hierarchy.
Right click or hit this plus icon.
Then go to UI.
And in the bottom you can see legacy.
Sorry, not in the top too much bottom.
Basically select this canvas in the bottom you can see.
And now I'm gonna select my canvas in the hierarchy and let's drag it in the top of hierarchy so I can
see all the time.
And I'm going to select my canvas.
And let's press down F in order to focus on that.
So you need to change some settings.
In order to do that go to Inspector.
Scroll down move over to this canvas scaler component.
And over there, as you can see it says constant pixel size.
From this constant pixel size, choose this scale with screen size and put in the x, something like
1920.
So we're going to put 1920 and in the Y we're going to put 1080.
But if your game in portrait mode then you can just swipe this value.
And the X, you can simply just pass 1080.
And in the Y you can simply put 1920.
If your game is in portrait mode, then you can just go with that.
And if your game in landscape mode then you can just leave with this.
Now we are ready to create our UI.
So before we create, let's create an empty game object underneath this canvas, and we're going to
make the game object size as the size of our canvas.
So we're going to place all of the things in there into that game object, basically to separate all
of the logic or to just keep our project clean, you can simply say, so let's select the canvas, let's
right click on it, then create an empty game object.
And we can call this game object to something like UI.
Let's call it UI and go to Inspector.
Then 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 now the UI game object is the gates as the size of our canvas game
object, and we are ready to populate our, uh, those UI things or icons hard icon.
So let's select the UI game object underneath our canvas in the hierarchy.
Let's right click on it, then go to UI.
And the top you're going to see image.
And I'm going to call this image through something like Heart icon.
So I'm going to call it heart.
I con, let's call it heart icon and I want to replace the image with our heart icon.
So if we move to Inspector then image component we can see source image and it says none sprite.
So you can drag the sprite with which sprite you just want to replace with.
So I'm going to choose an heart sprite for it.
And I have it in my assets folder as you can see.
So I'm going to select my sprite first which is the heart one.
So let's select that.
Go to Inspector and I'm going to make the pixel per unit something like 16.
And to get rid of blurry I'm going to choose this filter mode to point no filter.
And after doing that click on this apply button.
And now I'm going to choose my heart icon GameObject underneath canvas UI GameObject.
And let's select this Heart Eye sprite and let's drag it over to this source image field.
As soon as we drag it, we can see now the heart icon.
And I just want to move this in the top left corner.
So how you can do you can simply just drag it and then you can simply uh, you can use your mouse key
and mouse in order to move it, mouse cursor in order to move it left.
But instead of doing that, we have a pretty cool thing.
Basically, we're going to anchor this heart icon in the top left side.
So if we move to Inspector then Recttransform click over here.
And you you need to hold down alt on your keyboard and select this top left one.
If you just want to move to the left side.
And let's suppose you just want to move to the right side, then you can just click there, hold down
Alt Key on your keyboard and select this, uh, top right one or the top right anchor.
But I'm gonna go with the top left and I'm gonna move it a little bit down in the X, something like
I'm going to put 100 in the X as well as I'm going to put 100 in the uh sorry -100 or -50.
So let's do -50 in the Y.
And I'm going to do 50 in the X.
And I just want to increase the size of this heart icon.
So you can simply go over to this width and we can simply make it something like 150 and the width,
as well as we can make 150 in the height.
Now we can see it's a little bit bigger and I'm going to move it in the X, something like 100.
And in the Y I'm going to move -100.
Now it seems pretty much fine as you can see.
And let's create the text A in order to see that how much health we have.
So what we're going to do now, but before we do, let me explain why we have chosen that top left anchor
one.
If I just try to scale down my screen size, as you can see, the heart just resizing itself according
to our screen size as well as this heart just always laying on on the top left side even.
We just try to shrink down our screen as well as try to expand our screen.
We can see this heart icon just always staying to the top left corner, top left corner.
It's not depending uh, it's basically depending our screen size.
So that is the reason we have chosen the heart icon to the top left corner.
So in order to choose that basically you need to move over to this back transform in Inspector.
And then click over here and hold down Alt or Alt on your keyboard.
And you can select any anchor, uh, or any side that you want to go with.
But I'm gonna live with this top left, and let's create a text in order to see that how much health
we're gonna have so the player can just keep track of it.
So let's select the, uh, UI game object one more time.
Let's right click on it and let's go to UI legacy.
In the bottom you can see and then choose this text.
And I'm gonna call this text to something like health.
So I'm gonna call it let's call it health Text instead.
So I'm going to call it health text.
And I also want this to put it to the top left corner.
But before we do let's increase the size of it.
So I'm going to choose the arrow tool from Scene View.
And I'm going to scale this up.
So we're going to hold down alt on our keyboard to resize it from center, as you can see.
And I'm gonna increase the font size in order to be able to see or to notice that.
So let's go to text Component in Inspector and Font size.
I'm going to make something around 100 and font style.
I'm going to choose bold and I'm going to change the color with something else.
You can choose any color that you like.
And I'm gonna I'm gonna set the alignment to both of this center.
So it's gonna be center always.
Or we can choose this alignment to the left side.
So it's gonna start always from the left side.
And also I want to change the font as well.
So if you have a font then you can just drag it over to this font slot from that assets folder.
So I have so I can just gonna move over to my fonts folder in project tab.
And I'm going to choose this one.
So let's select that and drag it over here.
As soon as we drag it.
Now the font just get changed.
And I'm going to move this one to the left corner.
I'm going to increase the font size a little bit.
Something like 1 to 5.
And let's go to Rect Transform.
Click over here and we're going to hold down alt.
And let's choose this top left corner.
And I'm going to move this text to something over here.
So it's gonna be fine.
You can just play around with that value.
It's totally up to you.
And we can choose any color other color if we want.
Like, want to go with, uh, I think it's fine.
And let's, uh, instead of showing new text, I'm going to set to zero something like that.
And if you want to choose another font, you can just click over here if you have.
Or you can simply select any of them and drag it to this font slot.
And I'm going to choose a another one something.
This one seems pretty fine to me.
So I'm going to increase the font size.
Something around one five.
Sorry 150.
Sorry.
We need to choose over here 150.
And I'm going to set this to one back to one.
or if you just want to reset all of the settings, then you can just right click on that component and
then click on this reset in order to reset.
If you just mess around with that and I'm going to still, still I'm going to increase my size of this
takes a little bit.
So I'm going to choose 160.
I guess 160 is fine by now.
And I'm going to choose my heart icon.
I'm going to make it a little bit small.
So I'm going to choose in the width 1 to 5.
And in the height I'm going to choose 1 to 5.
So this one seems perfect now.
And I'm going to choose my text and let's move it a little bit up.
And I guess this is pretty fine.
And still I want to increase my font something 200 Sims 2 to 5, 2 to 5 seems pretty much fine.
So we can just play around with that value and it's pretty cool.
So what we're gonna do now we're going to select our UI game object.
So make sure you select the parent one.
So that's why we just created a empty game object first.
And we just recite it as the size of our canvas.
And then we just created this icon and the text to keep our project clean.
And now we're going to select our UI game object and we're going to make this one prefab.
So in order to create this empty GameObject, first is to Purpose bus our uh to make that one prefab.
So that's why and to keep our project clean.
So we're going to select our UI game object.
So basically the parent one.
And let's drag it over to this assets folder and then prefabs folder.
So if you have a prefab folder then you can just directly drag it there.
Or you can simply drag it over to this assets as well.
So I have my prefabs folder.
So I'm going to select my UI GameObject from that UI, this game object underneath my canvas in the
hierarchy.
And let's drag it over to this prefabs folder to make it prefab so we can have the copy.
So now if I select my UI GameObject underneath my canvas and then delete it.
As you can see, it's gone.
But we do know we have the prefab basically means the copy.
So we can simply select that that one from that folder.
And we can simply drag it over to this canvas game object at top of this canvas game object in order
to restore that directly.
As we can see now we have the UI.
So basically that is the thing or the, uh, to create a empty game object.
The purpose was to make our game make this one prefab.
So we're going to have the copy.
So we don't need to work from scratch basically adjusting this heart icon then creating the text.
So we don't need to work from scratch.
So that's why we just created an empty game object first.
And then we just created this heart icon and the text.
I hope you get the idea that how you can do it.
And let's make our project a little bit clean.
So I'm going to separate all of these prefabs.
So I'm going to create an character prefabs folder.
So I'm going to drag all of the character like this.
Enemy one.
Enemy two, and the player into that folder to keep our project more clean.
So let's right click on this prefab folder.
Let's create a sub folder.
And I'm going to call this folder to something like Character Prefabs.
So I'm going to call it character simply let's call it character instead.
And I'm going to select my enemy one, enemy two and this player.
And let's drag it over to this folder to keep that in separate folder.
And let's create another folder for this ground prefab.
So let's right click on this prefab folder.
Let's create another sub folder.
And I'm going to call this folder to something like ground tiles or ground tiles prefab.
So I'm going to select all of the ground from here to here.
And I'm going to select all of them.
And let's drag it over to that folder.
And let's create another folder for our object.
And also we're going to create a UI folder.
But before we do let's create a object folder.
So let's right click there create folder.
And I'm going to call this folder to something like objects.
And I'm going to select all of this game object like this camera check and this floating, then this,
uh, I guess camera pattern and this UI.
And I'm going to drag it over to this, uh, over to that sub folder.
Now we can see our project is much more clean, and we can simply press down Ctrl S to save our project.
And it seemed to much clean.
And we can make the hierarchy as well, a little more clean by clicking, uh, by basically creating
an empty parent game object.
And we can just select all of this game object and we can just make it parent, and then we can just
click over here to just collapse at once.
So we can make our hierarchy a lot more clean.
But you can just do that.
I'm not gonna do that.
Uh, you can just go and, uh, if you just want to do that so you can go ahead and do it.
But I'm not gonna do.
I just want in this way.
So we're going to take a look in the next lecture, how we can just link up this UI with our player
health.
So basically that is the thing.