In the last video we saw how to give our units some basic stats
and the ability to attack their enemies
In this video we're going to be implementing some HP bars
for our units and our enemies
and floating text so that we can see
how much damage was dealt in every hit
the only new element in our scene is that now every unit has an HP bar
and also every enemy has one of those
also in our project, we're going to need to have
one floating text prefab
lets take a closer look to one of our HP bars
the HP bar is just an UI Slider, you can create one right here
by selecting UI and Slider
set to an World Space Canvas
in these elements we also have
an HP bar position script
now in the actual slider
the first thing we're going to do is to disable the handle
and the handle slide area
because our Slider wont be interactable
the only 3 properties we care on our slider are* the
max value, the minimum value and the current value of the slider
that's everything we need
of this component, that's everything we're going to be using of this Slider
our HP bar position script only has 3 variables
a distance in Y, a distance in Z and a transform for the owner of this HP bar
On the Update() of this script
the first thing we're going to be doing is to set the euler angles of our canvas
equal to the euler angles of our main camera
this is so that the HP bar is always going to be looking directly at the camera
now we're going to make a new Vector3
and set it to the owner position but
with a slight variation in the Y axis and the Z axis
then we're going to set this new Vector3
to the position of the transform of our HP bar
Now lets take a look at our floating text script
this script is also very short
and the only thing it does is on the initialization
it sets the damage variable we assign to it
to the text of the text mesh that is going to be
the actual text we're going to see
then, it does the same thing we did with
with the HP bars
it sets the text mesh object's
euler angles
equal to the euler angles of our main camera
so that our floating text are also always going to be looking at the camera
now let's see how this floating text works
when we hit play, we can see that the object
gets the value we have on the floating text script
then it does this animation where it goes up
gets bigger then shrinks and then it deletes itself
now, to make this animation the first thing we have to do is to select the object on the hierarchy
that we want to animate
then we have to open the animation window which is right here
I have it already opened
and we have to make this animation
now on the animation window we have to select the properties of the object that we want to animate
in this case we are going to be using the position and the scale of the object
then with this button right here we're going to add keyframes
to our animation
and on those key frames we're going to set the values right here on the object itself
that we ant the object to have
on that key frame
so, let's take a closer look at that
we can expand the properties that we are animating in the animation window
and if I hit play
we can see the animation looping and happening in our scene
let's see, on the first key frame
we have a Y position
of zero
and in the last key frame
we have a Y position of 1.5
that's everything you have to do to make the object go from
down to up
to animate the scale of the object you have to do the same
you have to go to the key frames of your animation
and assign the values you want
that property of the object to have
as you can see, on the first key frame we have a scale of zero
on the second key frame we have a scale of 1
we keep that scale on the third key frame of our animation and on the last key frame
we go to a scale of zero
the animation window or the animation system is going to
handle the
interpolation of these values automatically
if you want to see what's really happening you can also open the curves of the animation
as you can see here is how the scale is going to vary
it's a nice curve, it's not a linear variation like we have in the position
there is one last thing to say about this animation
as we can see here
we have an event named DestroyMe
to add events to an animation just use this button right here that is named add event
so let's see this event
when we click it we can see that in the inspector we have the animation event
and the function DestroyMe()
in these animation events we can access
any function that is present on the scripts
that the object you are animating has (some restrictions in apply*)
so we can use the
DestroyMe() that we have on the bye text script
trough this animation event
and that's it, that is how our floating text does everything it does
so now, we have these HP bars and these floating texts but how do we use them?
now we have to see our root script
and we can see we have some new variables on our Root script
first, under the other section
we have
a reference to our HP bar
a fade time set to 6 seconds
and a reference to the floating text that
is going to be our floating text prefab that we're going to be instantiating every time
this unit takes damage
in order to do so we have to add some
functionality to our take damage function
remember, the function that we use when we hit the units
and now we have a section for our HP bars and a section for our floating texts
the first thing we have to do to use our HP bar is to set it's values
on the initialization of our Root script
as you can see, we set the maximum value of our HP bar to the initial HP of the unit
also, we do the same with the current value of our HP bar
also we Invoke our FadeLifeBar function
with a delay of fadeTime
let's take a look at this FadeLifeBar()
this function is only to hide the HP bar
if our unit has
it's maximum HP
because if the unit is already full of HP
we don't need to see the HP bar
so when this function is executed
we check if the current value of the HP bar is equal to it's max value
and if it is, we set the HP bar game object to inactive
so back to our TakeDamage()
one we get our realDamage and our
HP after this damage
what we have to do is to make sure that our HP bar is active
and set it's current value to the Hp of the unit
also we Invoke the FadeLifeBar()
because in the future we're going to have some healing abilities
the only thing we have to do to use our floating text is to instantiate a copy of our floating text prefab
just a little over the position of our unit
so that it looks a little better
the animation of our floating text is going to take care of the rest
also, we have to set
the damage property of our floating text script
to the real damage we just calculated the unit is going to receive
and that's it, that's everything you have to do to give our units their HP bars and to have some floating text in our combat
on the next video we're going to be making some distance attacks with projectiles and also healing
so if you have any questions leave them in the comments and thank you so much for watching this video~
No comments:
Post a Comment