Now we need to show up in the UI.
How many hearts we have, as well as how many apples we collected so far.
So if I select my player GameObject in the hierarchy, then go over to Inspector the Inspector tab,
then player Skip.
As you can notice, we have the player maxhealth underneath our player script, so we need to show up
in the UI as well.
And we do know that in the in order to show show in the UI, we need to create our canvas first.
To do that let's go to hierarchy.
Right click or hit this plus icon.
Then go to UI.
And in the bottom you can notice canvas.
So just click on it in order to select that.
And I'm going to select my canvas.
Let's drag it in the top so we can see all the time.
And let's select this canvas in the hierarchy.
And we're going to press down F in order to focus on it.
Uh so we need to do some settings.
So let's suppose you just want to fit your UI in any mobile screen or any screen size like that.
Then you need to do one settings.
That is, select your canvas first, then move over to Inspector.
Then scroll down to the bottom says Canvas Scaler component.
Basically move over to this canvas scaler component over there.
As you can notice UI scale mode and it says constant pixel size.
So from this constant pixel size to choose this scale with screen size and in the x or in the width,
we're going to put 1920 and in the height or in the Y, we're going to put 2080 since our game is landscape
mode.
So that's that's why.
And if your game in portrait mode then you can just swipe the value and it's okay.
So once we are done let's create an empty parent game object first.
And inside that parent game object we're gonna place all of the UI elements.
We just want to do that basically to keep our project clean or the simply the hierarchy.
So let's select our canvas first.
Let's right click on it and let's create an empty game object.
And I'm going to call this game object to something like UI.
And after doing that go over to Rect Transform in Inspector and then click over here.
And we're going to hold down alt.
And we will select this bottom right one.
And as soon as we selected that we can see this UI game object gets size at the size of our canvas.
And now we are ready to do our.
Just put the apple icon as the heart icon as well.
So to do that I'm going to select my UI.
Make sure you select the UI, not the canvas that we created this empty game object first.
So that's why to just keep our project clean or to because we're going to make this UI game object later
on prefab.
So we we will have the copy.
So we don't need to work from scratch.
So that's why now we're going to select our game object.
Let's right click on it.
And we're going to go to 2D object then sprites.
And then we're gonna choose this square, and we can call this square to something like Apple icon.
Sorry.
Apple.
Sorry Apple icon.
Let's call it apple icon and then select that.
Sorry we have done mistake.
Okay.
So the mistake is that we're gonna delete this.
Uh, let's select this, uh, UI game object underneath our canvas.
Let's right click on it, then UI.
And we're gonna select this image component in the top.
As you can notice select that and we're going to call it something like instead of calling image we're
gonna call it Apple icon Apple icon something like that.
And now we're gonna change this source image with our Apple icon.
So if we select our Apple icon underneath our UI game object, then move over to Inspector tab.
In Image Component we can see Source Image and it says none sprite.
So we need to drag our Apple sprite right over here.
or the Apple icon.
To do that, we're gonna move over to our project app assets, and then we will head over to our sprites
folder, then Coins and hearts hearts folder.
And from here, uh, sorry, not here.
We have the Fruitful Fruits folder first.
So I'm gonna move over to my fruits folder, which I have it.
Uh, let's find it first.
Uh, over here, as you can see.
And we have the apple in the first.
So we're gonna select that sprite sheet.
Let's click on this arrow in order to see the individual ones.
And we can select our Apple icon underneath our UI GameObject in the hierarchy.
Then select the first Apple sprite or any of them, and then drag it over to this image component and
replace this source image with this apple.
So basically drag your Apple sprite inside this, uh, source image slot.
And after doing that make sure you click on this set native size in the bottom, and as soon as we have
done, we can see now our Apple icon.
And I want this apple icon always to the left side, top left side.
So for that what we're going to do we're going to select our Apple icon.
Then go over to Inspector Rig Transform.
Click here.
And we're going to hold down alt.
And we're going to select this top left corner top left corner.
So I want this Apple icon to be somewhere around here.
And we can duplicate this in order to create our heart.
So I'm gonna duplicate this.
Firstly I'm going to move it over here and we're gonna duplicate this.
To do that we're going to select our Apple icon.
Let's press down Ctrl D to duplicate.
And let's move it up somewhere around here.
And we're going to call this one something like this will be our heart icon.
So let's call it heart icon like that.
And we also need to change the sprite with our heart.
To do that, I'm going to head over to my project tab one more time.
Then assets and then sprites folder, and we're going to move over to Coins and Hearts folder.
And I have it over here.
So let's click on this arrow.
So I'm going to select the first icon or first sorry not icon.
Or you can simply call it icon.
Or you can simply call it sprite as well.
So I'm going to select the first one.
Let's drag it over to this slot in our image component.
And it's kind of it seems weird to just go to just get it back.
Just scroll down to the image component and then click on this set native site.
And as soon as we click on it, we can see by now this is pretty much fine.
And we're going to move it somewhere over here.
And let's move this up here.
And I want this icons to be a little bit small.
So I'm going to select both of them.
Then go over to Inspector.
And you can play around with this scale.
So I'm gonna put a point eight in the X and point eight in the Y.
Something like that.
And now this seems pretty much cool.
And I'm going to select my heart icon.
And I'm going to drag it somewhere over here.
And we're going to select our Apple icon.
Let's drag it somewhere here something like that.
And if we try to scale down or scale up our screen size in the game view, we can notice this apple
icon and this fruit are sorry heart icon just getting resized as the size of our screen.
And it just always, uh, always just getting resized in the top left side.
So that's why we need to choose this.
Basically we need to go over to Rect Transform.
And you can choose any corner by holding down alt on your keyboard.
And now we're going to put the text means how many health and how many fruits we have.
So to do that we're going to select our game object.
Let's right click on it.
Let's create uh, basically let's go over to UI and then legacy in the bottom and then choose this text.
And we can call this text to something like Apple uh Apple current Apple text.
So let's call it current uh current Apple Apple text something like that.
And we're gonna select that.
Let's press down F in order to focus on it as you can see.
And we can hold down alt to resize it from center.
Uh, but the problem is that we're not able to notice since it's too much small.
So to make it bigger, let's go over to Inspector Text component.
And we're going to make the font size something around uh 80 and alignment both of them I'm gonna choose
center.
And I'm going to change the color with something else like this.
And if you do have any font then you can drag it over here.
So I'm going to choose this one.
And I want this to be in the top left side.
So what we need to do for that, we're going to move over to Inspector, then Rake Transform and then
click over here.
And we're going to hold down Alt Keyboard on our.
We're gonna hold down alt key in our keyboard.
And let's select this top left one.
And now I'm gonna move it somewhere around here and font style I'm gonna choose bold in Inspector.
And I want to start this text always from the left side.
So alignment.
Uh, this the first one.
We're going to choose this left one, not the middle or the right one.
So the text always just going to start from the left side.
So we're going to put zero something like that.
And we're gonna increase our font size a little bit up.
To do that let's move over to text Component.
Basically select your current Apple text.
Then go over to Inspector Text Component and then font size.
We're going to make it something like 1 to 5 something like that.
And if you're not able to notice then you need to scale this up a little bit so you can hold down alt
on your keyboard to scale it from center like this.
And we're going to duplicate this one to create for our, this, uh, fruit, uh, apple.
Uh, so what we're gonna do now, we're going to duplicate this.
Sorry, something like this.
I guess this would be pretty much fine.
So let's press down Ctrl D to duplicate, and we're gonna move it down something over here.
And instead of calling current Apple Text, we're going to call it.
Sorry.
Uh, this will be hard.
Uh, I really apologize.
This one will be the heart, uh, text.
And this one, bottom one will be current Apple text.
I really apologize for that.
So I'm gonna select my, uh, current Apple text text game object.
Let's go over to Inspector, and we're going to call it heart current heart text.
So let's call it current heart or let's simply call it heart.
Text.
Let's call it heart.
Text.
And the bottom one.
I'm gonna leave it just current Apple text and I'm going to remove this.
And inside this one basically that those brackets and then one.
And now as you can notice this seems pretty much cool.
And I really apologize.
I just started misspelling or just, uh, messing around like that.
So what we're going to do now, we're going to put a X like that over here, uh, to denote how many,
uh, fruits we have or the apple.
So we're going to select any of this text.
Let's uh, select the heart text or this current Apple text.
We're going to press down Ctrl D to duplicate.
And we're going to move it something over here.
And we want this uh to be to be in the middle one.
Basically the alignment to do that go over to inspector then text component and alignment.
We're going to choose both of these center.
And I want the font size a little bit small, something like 80.
And instead of saying zero we're gonna put X something like that.
And we're going to increase it up a little bit.
Basically the font size.
And now we're going to move it in between this zero and this heart icon.
And we're going to do the same thing.
Uh, basically we're going to move this uh, bit between our Apple and this text, and I'm going to
select my heart X and let's move it somewhere over here.
And instead of calling our text one, we're going to call it X something like that.
Uh so multiplication basically and we're going to duplicate this one.
So to duplicate that let's press down Ctrl D and let's move it down somewhere around here.
I guess this should be pretty much fine.
And we're going to select our current Apple Text.
And let's move it here.
And now this seems pretty much cool.
And instead of calling x one Let's call it x two, something like that.
And after doing all of these things, make sure you select your UI game object and turn it into a prefab.
So you're going to have the copy of it.
So I hope you get the idea that that why we created this parent basically empty parent game object,
because we just want to place all of the things inside in that game object and we can make that one
prefab.
So we're going to have the copy copy and we don't need to work from scratch.
So that's why we have done it.
We just created an empty parent game object first.
And inside that game object we just place all of the things that we need.
And now we're going to select our UI game object underneath our canvas in the hierarchy.
And let's turn it into prefab.
So we will have the copy of it and we turn it into a prefab.
And this is this seems pretty much cool.
And now we need to just link up this text with our basically heart and this fruit.
So if I just go ahead and then click on this play button in the top and try to try to collecting our
apple.
You will not able to notice inside you why it's are not going to increase at all.
Why?
Because we need to skip that in order to.
Basically we need to link that up.
So if I try to collect my heart and this apple, as you can see, as soon as we collect it, it disappeared.
But the problem is that it's not updating in the UI.
So we need to link that up with an script.
So if I select my player gameobject in the hierarchy, then go over to Inspector, then uh, player
collectible scripts in the bottom.
As you can notice, current apples is one, so we need to show up in this in the UI as well.
So basically we need a reference of this text and we can do that.
So I'm going to get out of play mode.
And I hope you get the idea that how you can do it.
And I'm going to press down control S on my keyboard in order to save my project.