Welcome back my fellow game developers to
a brand new video in which we learned all about sliders.
We'll learn about next mesh Pro and
we also create our own font.
How exciting is that?
So let's not waste any more time and let's get started.
Oh, case.
So time to add a bit more flavor to
the way our health gets deteriorated by the enemies.
So let's get started.
The first thing that we want to do
is make the scene a bit bigger.
And we are going to double-click on
the huge UI canvas that we have.
So we can see that we have the,
what happens in here, the
fading image that we've turned off.
And we're going to
move the weapons just a little bit to the right.
And we can see right here that
these images should be at the 0,
0, on the y and on the x.
Just so we have them in the middle of
the non-UI and let's move them down.
This is just a bit of adjusting,
and there you go.
So now I'm going to
set the weapon to the right because to
the left I'm going to be adding
something called a slider.
Before that, I'm going to create a game object in here,
which will represent the health.
Let's just call it health.
There we go.
And under the health I'm going to right-click go to
your and create something called the slider.
So let's add the slider.
So as you can see, we've created a small slider.
And the slider does a couple of things.
It moves from left to right.
It has a background.
If I open it up, it has a background,
it has a fill area and it has the handle slider.
If I click on the slider right here,
you can see that there is a game component
or components on the slider.
And you can see that there are a couple of things.
The normal color, the highlighted color,
all of that good stuff.
But the thing that we most want to focus on,
the minimum value, maximum value,
and the value right here.
You can see that while I increase
it at moves from left to right,
and this is what we are going to use
to represent the help that we have.
But obviously, having the slider move
left to right is pretty ugly.
So you never want to have
your health represented that way.
So we want to have some kind of bar to represent
the health just like we have in
the professional looking gains.
So I'm going to do first of
all is delete the handle slider.
So now we no longer have
this little or no what's called the,
some kind of, anyways,
this circle that was
moving around and now we only see the bar.
The next thing that I want to do is
I want to access the background.
And the background.
I'm going to click in here.
You know what?
Before we do that,
let's go ahead and add these sprites,
the UI elements that we are going to use.
So in the sprites,
that's open this folder up
and let's see what we have in here.
We'll right-click create a new folder
for the UI elements.
Double-click in here, and let's go into the resources.
As you can see, I've provided you with a couple of
bars and you can use whichever color you want.
You also have the buttons right here that
we'll be using later on and the font.
So I'm going to choose the font,
the red slider and the slider background.
And I'm going to drag them into the UI element.
Okay, Great.
Now let's go to the slider.
Let's call it the health slider.
And if we click on the background,
you can see that we can change the source image.
So the source image that I want to have this slider.
So when I add it in here, there you go.
You can see the slider right
now if I set it to native size,
it's kind of a huge.
Maybe we'll make it a bit smaller.
But the point is that we now have this background slider.
And I want to make sure that when I
click in here and hold down Alt,
that it fills the entire slider image,
not just on itself.
So we have the health slider element.
If we click on the rack tools,
you can see the edges of it.
And before we had that,
you can see that the edges are the edges.
There we go. These four points,
these were the edges of the health slider,
but the background was much bigger.
So when we click,
hold down Alt and click on the stretch,
we fill out the entire slider.
Next thing we have the Fill area.
Now currently when we want to fill the area,
you'll see that it's a very ugly white line.
So what we'll do is we'll access the fill.
And you can see we can also
change this bright and I'm going
to use the red slider.
So now we can click in here and you'll
see it's much prettier, right?
Not not so fast because we also want
to make sure that the fill area when we click in here,
hold down Alt, make it stretch
all the way around the field area.
And then the fill area should also
stretch and to the whole background.
But because we are working in the background.
And we want to see the background.
I mean, we are going to make it smaller
and so it fits exactly in this background.
That looks good enough.
So I'm going to move it just a little bit up.
And okay, so there we go.
We can see that we can select the health slider and we
can start from 0 and increase it until it becomes one.
Now, how are we going to be changing
the health based on our own health?
That will be a video for later on.
But for now, as you can see,
we have created everything that we
need for the health slider.
I'm going to zoom out a bit.
And maybe actually I'm going to make
the slider a little bit bigger.
So let's increase the size.
And as you can see,
because everything is anchored to those points,
they grow together smoothly.
Let's make it a bit thicker.
Obviously this will need a bit of changing.
And I'm going to move the health element down,
then zoom out, see how that looks.
So there we go,
around here I think is good.
Or maybe move it up a bit or no,
let's keep it down here.
To, down here is good.
Let's zoom in.
Maybe make it a little bit longer.
And by the way, all of,
all of the things that I'm doing depend on me.
So if you want to create something different,
please be my guest.
I recommend that you try to
create your own type of slider.
Let's fill it up just so we can
have the right dimensions.
And there we go,
On the left, on,
up and to the left.
Okay, so there we go.
This is our health and it looks really nice,
I think So if I maximize on play and play the game,
let's see how that looks.
Okay, so there we go. We have the health,
we have the rifle.
There is one more thing that is missing and that is,
we want to also represent the health using text.
First of all, this is what our zombie game,
and I think it looks really nice.
Second of all, it will be a good way to know how much
we are actually changing
and learn a couple of things more.
So let's go ahead and add a text in here.
But this time because we are going to add our own font,
we're going to add not just a text,
but we are going to add a text Mesh Pro.
So if I click in here,
you can see that you'll need to
import a couple of essentials.
Just click on the first one and wait for it to import.
If this takes too much time,
I'm going to magically reappear.
Okay, did that.
There we go. So now we have
something called the text Mesh Pro.
And I'm going to call this the health text.
Hit Enter. And let's move it a bit to the left.
So in here, let's make it bold.
And you can see that currently the font used on it
is the liberation sense or something.
But we want to use the font that
I've provided you in the resources,
downloaded it from the font.com.
Oh my God, that anyways,
how are we going to convert this into a font?
Well, if we go to somewhere in
here in the windows text Mesh Pro,
you can see that we have the option
for the font asset Creator.
Clicking here, it will ask you for the source font file.
Let's drag it here.
And it will just tell you to create fond Atlas.
Save.
And it will ask you where do you want to save it?
We will save it inside of the fonts right here.
Or in the UI element.
Save that.
Great.
So now if we go into UI elements,
you can see that we have the spot right here.
It has a bunch of properties that I'm not going
to even attempt to get into.
So health texts just drag the font into its position.
And there you go, We can see that we
have a different font right now.
Now, I recommend because as I've said multiple times,
I'm very bad at drawing things.
And I have a very bad taste when it
comes to colors and with it comes to text
and everything that's related
to making something look pretty.
So, I recommend that you
maybe try to find a better text than this.
But for now, let's try and create
the sort of health system and maybe make it auto size.
Auto size means that it will grow and
shrink with the size of this. Yep, there we go.
So I'm going to make it bigger, make it bold.
And the cool thing about having
text Mesh pro is that we can change
a lot of things so we can add lighting,
we can add underlay,
we can add some kind of
glow and you can play around with these.
We can also add an outline.
So if I add a bit of thickness,
you'll notice that we have the outline,
we can change the offset,
the tiling, the speed,
a lot, a lot of amazing things.
And I'm going to make a white outline
just so we can see everything more clearly.
Maybe.
There we go, one hundred and one hundred.
This is the help.
We can change a lot of things that the
color and so on and so forth.
And as long as we're here,
I'm going to go ahead and issue you a challenge.
So your challenge is to set up your own UI.
So do a bit of research and find
your own UI elements to use for your game.
Use those elements to set up your UI canvas for
the player and think of
other things you'd like to display on the screen.
So for example, you might want to have our ops.
You will, might want to have
countdown timers for the shotgun.
You might want just the shotgun for the weapon,
the dashing or whatever.
I don't know what else you might want.
Whatever you want, think of it, tried to add it.
You, even if you don't know how to create the thing that
should like to just put it there and then write it down.
Maybe you'll find through the scores as we go on.
Or maybe by yourself,
you'd find a solution for it.
And there's an extra challenge.
I will recommend that you go ahead and convert
the weapons name that we display under the shotgun.
But I do have to warn you that it will take a bit of
tweaking before you can actually
managed to change the weapons name.
So that's pause the video right now
and go to the challenge.
Okay, welcome back.
So this video is already a bit too long,
so I'm not going to go ahead
and change the name for it now.
Later on, obviously we will change it.
I'm going to go ahead and apply
all the changes that we've made to the UI canvas.
And now when we run the game,
and now we can see
that we can change to the pistol, run around.
We have the health, we have
the pistol and somebody gets stuck somewhere.
Oh, so we died at the,
the light exactly on
this weird point right here on the enemy.
So there is a glitch.
Obviously, we will take care of that later on.
So I hope you enjoy it.
I hope you're committing your changes.
And I'll see you in the next video,
where we will be actually accessing
the UI sprites and updating them. So see you then.
Hey Michael here from the future,
you thought you were done with me?
Nope.
You weren't.
So there's something in here when I came to
go and commit my changes,
and that is the acid stacks mesh.
And if I go in here,
Where can I find that in the assets,
you can see that we've created
this text mesh file and this text mesh.
Let's see the properties on it.
Can I see the size?
Nope, I cannot see the size,
so I think we don't really need
to have it saved in our commits.
So what we can do just to save a bit of space,
I'm going to right-click in here.
And we're going to ignore everything
beneath the assets text Mesh PRO.
Okay, there we go. We don't need that.
Stage everything and call it added
UI elements to Canvas to
represent health and created my own shop.
So I'll commit these changes
and I'll see you in the next one.
I promise I am gone right now.