[Music]
hello you know previous video you learn
how to create a simple loading screen
and lets it until now we have animated
buttons we have particle systems in the
UI we also have animated things that
happened we created some loading
indicators we have another particle
system in the UI sort it with the UI of
course and we also have loading screens
that are loaded as expected and our menu
let's win the game and let's come back
here in this video I'm gonna start
working on my in-game menu and only menu
usually when you enter the level let's
say you have a player you have an avatar
you have a health bar and something like
that
and I'm gonna create an avatar and a
health bar and I'm actually gonna do
something like this it's gonna be a bit
different than this one but yeah pretty
much this is the setup that I'm gonna
create right now and I'm gonna replace
this so currently my gear menu looks
like this and it's it's awful and I'm
going to delete the panel and the title
and the windows buttons I'm currently
gone for now
before we get started I would like to
tell you that I downloaded some images
some avatars just so we have something
nice to look at and because I did that
this is my current right at last and I
do not want to add one extra draw call
just for my avatar so I'm gonna add them
in I'm gonna insert them in this atlas
and because they're in a different
folder I'm gonna add it here so I just
select it the Atlas I just + and I'll
say avatar and I'm gonna select the
folder so I selected this folder and now
they are not here because I need to back
preview and you'll see that will there
we get at it and the avatars will not
impact our draw pose
and there they are okay so when you're
designing your UI when you are adding
stuff you just add them to your main
sprite atlas and this will keep your
draw calls very low okay let's get
started let's create our avatar great
empty and this would be my
container let's say 128 by 128 let's add
a background and actually I'm going to
disable the post processing behavior so
that we do not have any post processing
effects applied and in our background I
will use this yeah preserve aspect and
make it in the screen and I also want to
create another image and this will be my
frame and again I'm gonna set this and
make it through my screen and I think I
can see the background here
a little bit let's say 1 1 1 1 so it's
just inside of it instead of the frame
and here I'm gonna add my avatar and
this will be my avatar let's say icon
again let's fill it and let's select our
one of our icons and yeah we have an
issue it looks awful first of all and
let's say for maybe eight yeah but we
still have these corners how can we fix
that what we need to use a mask for that
and I'm gonna disable the frame I'm
gonna sable the icon and I'm gonna
duplicate the background and I'm gonna
call it icon mask so this is why I can
mask I'm gonna add a component called
mask and right now if I show you the
icon it looks good but if I make it a
child of this icon mask it got clicked
and I don't mind that it looks like this
because when I apply the frame it looks
perfect this way we avoid seeing these
corners yeah we just clicked on and
that's just nice to have and of course
whatever I can you use so let me show
you if I select a different icon it will
get clicked as well let's get go with
this one and now I have icon that's it
now let's say I want to rotate this so
let's also add an animation just for
kicks so this is my avatar container do
not need the component just an animation
and I will say avatar and this will be
my loop animation 20 second mark I'll
say frame 360 yeah
you
okay so now we have our animated icon
let's save let's press play and let's
see it so play let's go double one
and why don't I see it let's create
another game object and say player info
let's align it here let's make it a bit
bigger let's add the avatar mmm inside
of it so this will be my 56 yeah this
was good and let's add some face and -16
okay let's press play and let's see it
so play level one
and it should be here
okay and it's rotating looking nice now
all I want to do I think this is a bit
big but I'm gonna leave it like this I
can scale it whenever I want let's say
96 okay I'm just messing around with our
values so it looks nicer so now it
rotates and we need the help or how can
we create a health bar
well let's create empty and let's say
health bar and let's add it to full
screen and create a simple native slider
and our slider can be changed like this
and we want to transform this into a
half bar and to behave like a health bar
and we can do that very easily how how
can you go first this should not be
interactable then we do not need a
handle so we have no transition and we
simply delete the handle slide area and
we have a simple slider now we have an
issue because this takes into account a
slider it has some settings that let me
show you a bit better
Oh let's go like this I'm gonna change
the colors later just just so you see
what we're doing here let me move it
down a bit so right now the slider if
it's at zero you still have some health
left and if it's at one 100% it's not
all the way there that is because the
fill area is not properly set up so I'll
say here zero and zero and the fill zero
and zero there you go
and now this looks good we have a slider
that behaves like a health wire let's
say you want 100 life so you say 100 and
now you have fixed values even easier
it depends what you're looking for okay
what I wanted to do is use this health
bar and this is a custom health bar and
I have the graphics for it but I need to
integrate them in our slider component
and you'll learn just how to do that so
before I do that I if you look here this
is a sliced image and I also need to
slice my images so where is it this is
my background
and right now if I scale it it will look
awful and actually I'm going to show you
with this one so this will be my fill
and because it is not 9 sliced you will
see what happens so let's select it
check it out when I change the slider
this gets distorted see
it and this is not what we want of
course I can I can also I can always
change the field to be where is it
to be sliced but this will not work or
tiled or filled and if I set it to
filled I can say the filament so I can
say horizontal and I can do this and
just cut it but I'm not looking for this
effect I'm looking for a sliced effect
and you will see in a second what I'm on
what I mean by that so I'm gonna select
this and I'm gonna slice it let's say 40
and 40 and apply and now check this out
so there are two types of flavors that
you can read for the slider you can have
it sliced and now when I change it
you'll notice that this these parts not
only get distorted see they get started
here at the end but that's not a real
issue
I'm gonna show you why but if you go
with or is it if you go with field
the difference is that this gets cut off
and I really don't like it like that I
want it I want the one with the sliced
effect okay so now I have my slider and
I also like to have a background let's
use this one and again I would like to
to slice it so let's go here and let's
slice it the same way so 40 on the Left
40 on the right and let's check it out
yep this looks good let's say 50% cut
okay now that we have that out of the
way you notice that we also have
something over it like a grill and
that's very easy easily edit you simply
create an image let's put it under the
slider let's make it fill the slider and
this with my frame and where's the frame
come on oh there it is and again I
really don't like that this is not
sliced so I'm going to slice it where is
it frame this is it yeah and I'm gonna
slice this one here so 144 and 40 on the
right Oh a bit more
56 yeah a bit better and let's also set
it to sliced and let's adjust it a bit
you
just so that it looks nicer so - to 3.5
- to 3.5 and also I think it should have
another color so that it fits with our
design okay so now we have our half bar
let's oh what happened here
the slider is not in the center of the
health bar actually do it yeah I do not
need even need to parent this so let's
move it out and delete it okay
and now this looks good but it should be
a bit bigger so let's go higher let's
say ready and yeah I think that the
width is okay and what I'm gonna do I'm
gonna put it right here okay I'm just
messing around with the values of it so
it looks better
I think the frame is no longer properly
adjust it to this the field I think we
should go with something a bit nicer I
should the default color yeah looks good
and I'm gonna leave the background red
okay so now we have our at bar where is
it and I also like to set the health bar
to be under the avatar container
actually under it is a child so that
when we remove the container we can also
move the bar and I want it to be like
this let's see yep this looks good
okay and now we have our boy there you
go
of course we can also let's say thing we
are packing does protect Atlas because I
sliced those images and they need to be
refreshed the sprite at last needs to be
refreshed so play a level one and we
will see hero avatar and our health and
I will also like to show you how we can
change the value of this slider because
it's not that hard and yeah it's nice -
it's nice - to be able to do that ok so
in order to do this we need some scripts
because that's hot that is how it works
so we need a hot bar actually do I need
a health bar now I'm just going to
create a game input and here I want when
I press a key
actually no I'm just gonna link some
buttons to it
not even quiche so public let's also
it's a using unity engine that you why
because we're not to exist that slider
public slider little bar so I have the
health bar and now I'm going to say
public load damaged and let's see a
damage of five and public load heal
let's say heal of five actually let's
say heel of ten so we can see that there
are different things and now I need two
methods public void do damage and here
actually I'm not even gonna add these
values to damage load value and I will
say as bar dot value minus equals value
so what I'm doing is I'm subtracting
from the current value this value it's a
it's very easy
and I'm also want to make sure that that
this value does doesn't go under the
minimum value so let's say helper you
health health health bar that value it
was math F dot clamp so I am clamping
the value between health bar minimum
value and health bar maximum value what
are these values
well I've set them out here minimum is
zero maximum is 100 you can't go with
zero and one but I'm going to with these
values because it is your tool to see
them and work with and of course I can
also say actually do damage
it's just update as bar and this will be
a plus and I'm going to show you what
I've done so I'm gonna use this method
to either damaged or heal the player
actually change the helper
but if I ever wanted a material say -
and if I want to healers I'll leave it
with a plus and let's check it out
let's get these two buttons let's let's
create actually some buttons so I'm
gonna copy these two here and this will
be my damage and hmm let's also say
damage and this will be my heel okay so
my damage button on click
any unit event
have no navigation that I'm just
cleaning everything up and on Hill same
thing let's do it like that no
navigation so let's say when I do damage
I'm going back to the first button I
want to here let's say punch ok and when
I heal I want to hear another sound
where is it I want to hear I don't know
shining
yeah that's it so how do I do damage on
click unit events
and
create empty I
game input and let's bring this here
let's reference our half port and when I
press damage I want an unit event and
here I have game input
and whereas my update health bar so I'm
doing the damage of let's say minus five
and when I'm healing same thing same
method crazy I want to get this and gave
me input update her for
twenty let's say and believe it or not
we're done of course you can also add
some keys and so on but or not thank
that so let's just play level one
and let's damage they go heal and now
you have your animated actually it's not
really animated is just updating the
value
I'm not going to show you how to animate
from one value to another because it's a
simple to tween for example or alert but
yeah that's the main gist of it in the
next video I'm gonna show you some more
things that you can do if your UI and
I'm gonna add some values and so have a
nice day
[Music]
you
[Music]