Three Cool Health Bars in Unity (2022/2020)

in this video i will show you how to make a half or a mana bar in three different styles the health bars we are going to make will increase and decrease smoothly and gradually changing color i have four buttons that will increase and decrease the health value and a text that will display the current health value i will show you how these buttons and text work in the script but before doing that let's set up our health bars in the scene first create a square sprite create a new image and don't forget to set the canvas scale mode to scale with screen size now rename the image and adjust the width and height then drag and drop the square sprites in the source image after that change the image type to filled and select the option horizontal under the fill method now as you can see we can change the fill amount of the image by simply changing the fill amount we will assign the fill amount to the health value from a script create a new c-sharp script that will handle the player's health or manner inside the script type using unity engine.ui because we are using the unity engine's ui to display the health bar and text type public text health text and this will be the display text type public image health bar and this one will be for the health bar image then create two float variables one for the current health and the other one for the maximum health i will choose 100 to be the maximum health value create a start function and set the health to the maximum health value so the health will be automatically set to 100. now create an update function and inside set the healthtext.txt to display the help value now i will create a new function called healthbar filler and i will call it from the update function inside this function set the health bar fill amount to health divided by maximum health because the fill amount should be between 0 and 1. we can set the fill amount to 50 so we divide the health by the maximum health to get 0.5 now i will create two functions that will damage and heal the player these functions will take a damaging and healing values in the damage function i will decrease the health by the damaging points if the health is greater than zero and in the heal function i will increase the health by the healing points if the health is less than the maximum health now back to the update function i will set the health to the maximum health whenever it's greater than that because we don't want the player's health to be greater than the maximum now save and go back to unity drag and drop the script into your main camera now i will quickly give my buttons their functionalities select the main camera and drag and drop the health text and the health bar into the scripts now as you can see everything works fine except the color never changes and it's not smoothly increasing and decreasing so let's work on that create a new float variable called lerp speed lerp speed will be the speed for the fill amount to go from value to another in the update function set the layer speed to 3 times time dot to the time of course you can play with the number but 3 is ok now in the health bar filler function replace the hoof over max health with math f dot lerp enter the starting value which is the current fill amount comma the final value which is the health divided by maximum health comma lower speed and to change the color i will create a new function called color changer and i will call it from the update function inside this function type color health color equals color dot lerp from color red to color green by half of our maximum health now set the health bar color to health color now if we save and go back to unity we will see that the health bar is increasing and decreasing smoothly with colors from green to red and from red to green now to make the round health bar we will have to make a ring sprite you can make your own one or download the one i'm using from the description you can also create a circle sprite and use it if that's what you are looking for everything will be the same as the first health bar except for the fill method select radial 360 and fill origin will be from the bottom you can also reverse it by unchecking the clockwise box now you can replace the old health bar with the new one [Music] for the last style i showed you create a new image under this image i will create 10 images each image will represent 10 percent of the player's health i will change the color of the last four to green keep in mind that we are starting from red and ending with green change h2 to yellow orange and red now go back to the script and type public image two square brackets have points the brackets after the image mean this is an array in other words we have more than one image create a new bool function called display health point that will take the health value and the point number if the point times 10 is greater or equal the health value then it will return true other than that will be false now inside the health bar filler function we will create a new for loop to detect all the 10 images and enable or disable them depending on display health point functions output this health bar is a little bit tricky and might be different depending on the maximum health and on the number of points you have in the health bar now go back to unity and select the main camera on the inspector window click on the lock to lock the window and easily select other 10 health points by holding shift on your keyboard and drag them to the health point and the script i selected them from top to the bottom that's why they are in the correct order

Channel: Hyped Cloud

Views: 55,914

Keywords: Unity Tutorial, Health Bar, Mana Bar, Smooth health bar, gradually change health bar, Unity health, round health bar, health bar color

Id: ZzkIn41DFFo

Length: 6min 13sec (373 seconds)

Published: Thu Aug 27 2020