How to make a Better Health Bar in Unity : Chip Away Tutorial

in this video i'm going to show you a way to set up your health bar to look a bit better and be more functional to the player adding a chip away effect to give them a chance to process how much the bar has changed now this is an exclusive to health bars it can be used for any kind of status bar that you want players to keep track of so let's head over to unity where i have a new scene with some simple artwork which you can find links for in the description below feel free to follow along using these assets or create your own artwork first let's set up our game objects and ui elements we want to make sure that all of our artwork is set to sprite in the image settings now create a empty game object and name this player and create a new canvas and call this playerui under the player ui we'll create a panel and we can drag in our frame image we'll set the alpha to full and we'll hit this handy little button here called set native size which will automatically set the width and height of our rect transform to match the resolution of our image drag it into place scale it down a little bit using the wreck tool holding shift to maintain aspect ratio and we'll rename it to be frame now we can duplicate this and add in the front health bar image rename it to be front health bar and drag it above our frame game object in the hierarchy so that renders below the frame and just scale the health bar down so it matches the bounds of this top section of the frame now we'll duplicate this once more rename it to back health bar drag in our back health bar game image which has had all of the color and texture stripped from it because we're going to be setting this in the code drag that above our front health bar and duplicate it once more and rename this health bar background we'll set this to be a dark gray and drag it above all of the other images that we've done so far now we want to select both our back and front health bar change the image type to be filled and change the fill method to be horizontal that's the basic setup for our ui now what we're going to be doing in code is one of the bars will essentially be chasing the other with a slight delay so if we get damaged we'll immediately set the fill amount of our front health bar down to a certain value we'll change the color of the back health bar and then we'll lurp the back health bar down to meet the front health bar and the opposite applies for if we gain health we'll change the color to be green we'll immediately set the back health bars fill amount and then the front health bar will chase the back health bar now this might sound confusing but will all make sense when we start laying it out in the code so let's do that now go to your scripts folder create a new c-sharp script and rename this player health open it up in your code editor first we'll need a private flow called health and a public float called maxhealth we'll set this to equal 100. we'll also have a public float called chip speed which will control how quickly the delayed bar takes to catch up to the one that we immediately set and we can set this to two and we'll also want a private float called lerp timer which we'll use when we're animating the um health bars later for the next two variables we want to make sure that we're using unity engine dot ui at the top of our class so we'll need two public images the first one we'll call front health bar and the next one we'll call back health bar so in the start function we want to set health to equal max health and down in update we want to clamp our health so that it's never below zero and it never rises above our max health so to do this we just type health is equal to math f dot clamp we're clamping the health value we want to clamp between zero and max health at the bottom of the class we'll create a new void function called update health ui and we'll also call this in the update function in this function all we're going to do for now is just debug out our health value underneath our update health function we'll create a new public void function called take damage and this one will have a float parameter called damage all we want to do in this function is subtract damage from health so health is minus equal to damage we'll also reset our lurp timer which we're not doing anything with yet but we'll need to do that here back in the update method we'll detect a key press to call the take damage function so if input dot get key down key code dot a take damage and we'll set this to a random range between 5 and 10. okay so let's test this out go back into unity we'll reset the fill amounts for our health bars and we'll add the script to our player game object we'll drag in our front health bar and back health bar even though we're not doing anything to update the ui yet but we'll hit play and we'll get some logs in the console so our health is at 100 when we hit a health is at 93 84 78 and so on so let's go back in our code and start adding the logic to update the ui down in the update health ui function we're going to store some local variables for the fill amount of both our health bars so we'll create a new float call it fill f or fill front and set it to the front health bar dot fill amount and we'll call the second one fill b and we'll set this to back health bar dot fill amount we're also going to need a local variable for health but we need this to be a decimal fraction of our max health to do this we'll create a new float call it each fraction and we can set this to just equal our health divided by our max health this will keep the value of h fraction between 0 and 1 so we can do some nice easy comparisons between that and our fill f and fill b values so when we get damaged our health value drops and as a result our h fraction value will also drop so we can do a check to see if fill b is greater than our h fraction value if it is then this means we've taken damage so as i said earlier we want to immediately set the front health bar fill amount to a certain value so we'll type in front health bar dot fill amount is equal to h fraction we'll set the back health bar dot color to be red so now we can increment our lerp timer and we'll do this by typing lerp timer is plus equal to time dot delta time and now we need a local variable to track the completion of the lerp so we'll create a new local float call it percent complete and set this lerp timer divided by chip speed okay so all that's left to do is to lurk the fill amount of our back health bar so this will be the bar that's chasing the the front health bar that we initially set down to our h fraction value and we do that by typing back health bar dot fill amount is equal to math f dot lerp and we're lerping this from fill b to the h fraction value and for the final parameter we'll pass in percent complete all right so that's a bit of a confusing chunk of code and if you're still having trouble understanding this section definitely go check out the additional material in the description the right way to lerp in unity save that go back into unity and let's test that out so now if we hit a you can see that our little chip effect is starting to come together alright so head over back into the script and at the bottom of the class create a new function called restore health public void restore health this will take a float parameter and we'll call this heal amount and the opposite of the take damage function will set the health plus equal to heal amount and we'll reset our lerp timer and again in the update function we'll just copy this chunk of code here set the key to be s and instead of take damage we want to restore now okay so here's a little challenge for you pause the video here and see if you can figure out the reverse logic to update the ui for when the player gains health first off you want to check for any discrepancy between two of these three values you want to set the back health bar's color to green and immediately set the back health bar fill amount to the new value and then you want to do your lerp on the front health bar okay so how did you go so as i said before you want to check the discrepancy between two of three values up here and what we want to check is if fill f is less than our h fraction value so that means our new health value is greater than our fill front and we've restored our health we want to set our back health bar dot color to equal color dot green we'll set the back health bar dot fill amount to equal h fraction the next two lines of code are the same as the last one we'll increment our lerp timer and we'll create the percentage value and now we just need to learn the front health bar equals math f dot lerp we're looping the fill f until it reaches the back health bar dot fill amount and we'll alert that by percent complete all right save that okay so before we test this in unity i want to show you a little trick that you can add to make the animation look better so we're just going to square the percent complete value so we type in percent complete is equal to percent complete times percent complete and we'll do that for when we take damage as well so just under the where we declare the percent complete we'll square the value and that will create a nice little easing effect so the animation will start off slow and speed up as it's reaching completion and i really recommend the video on youtube math for game programmers fast and funky 1d non-linear transformations which i'll have a link for in the description below so heading over back into unity we hit play we'll tap the a key you can see that the chip away effect is working nicely for when we're taking damage if we hit the s key you can see it's working for when we're restoring our health as well and there you go there's all the functionality that you need for a cool chip away health effect that's all for this part in the next part i will add a leveling up system which will increase the health each time that you level up if you liked it i would really appreciate a like if you have any questions pop it in the comment section below and i'm planning on doing a lot more of these videos in the future so subscribe if you want to keep seeing this content you

Channel: Natty GameDev

Views: 86,999

Keywords: Unity, Game Development, Health Bar, Tutorial, How to, Unity3d, GameDev, c#, programming, Unity Programming, Game Dev, unity health bar, unity tutorial, unity health bar tutorial, unity health bar ui, health bar in unity, unity tutorial 2d, unity game tutorial, unity tutorial for beginners, unity health, unity 3d tutorials, unity health bar system, unity health bar script, unity custom health bar, tutorials, UI

Id: CFASjEuhyf4

Length: 14min 4sec (844 seconds)

Published: Tue Sep 15 2020