How to create Health Bar in Unity

hello fantastic people i hope you are doing great today we'll be adding health bar to the health system we created in the last tutorial let me start by giving you a small tip if your health bar is something a little bit more complex than a simple rectangle it's good to divide it into three layers foreground the actual content of the bar and the background then save or export all of them into individual files with exactly the same dimensions this will make your life much easier later on as you see i imported all three layers into unity all of them have the texture type set to sprite to the end ui now i click the right mouse button in the carry window go to ui and select canvas beautiful i double click it to focus on it then i click on it right mouse button and create new empty object i call it hp bar i would like to see the object in relation to the whole canvas so i enable gizmos then using the inspector i change the anchor point pivot point and position of the game object i can do it all at once by holding shift and alt when clicking on one of the options small recap when you change the position of ui element you do it in relation to a specific point on canvas this point is called anchor point you can set it conveniently by clicking on any of those options in the inspector if you hold shift while doing so you will set also the pivot point all the ui element transformations are happening around it for example scaling or rotation then when holding alt you can also automatically adjust the position of the element once again i click on the canvas and change its ui scale mode to scale with screen size and then i add just the reference resolution this will ensure that the size of the health bar will be scaling together with the game window now i click on the health bar object and adjust its size and position now it might be tempting to just drag and drop the image onto the canvas unfortunately this will not work instead of creating ui element for us it will create a regular game object with sprite renderer instead of that we have to create ui image we can make it occupy the whole parent element by selecting the right anchor preset while holding alt and shift then we change the source image to the background one now i'm repeating all these steps for the foreground and because the images have exactly the same size they fit perfectly inside our health bar i create empty object and call it hp bar mask i move it to be between the background and foreground and stretch it then i add to a direct mask to the component which i learned about from this amazing tutorial on the coco code youtube channel then to that empty object i add another image i change the image to the red bar and stretch it one way of handling the value change would be to set the pivot point to the side of the bar and then adjusting its width but i am not the biggest fan of this solution because it scales the image instead of that we'll set the right padding on direct mask to d which will allow us to crop the image nicely i start by adjusting the left and right padding to remove the empty space around the bar i want to remove as much as possible without actually affecting d bar itself awesome now inside of our health bar i add also the text text mesh pro when you try to do that you'll probably see small pop-up make sure to click the import essentials button now i adjust the text position content and font settings if you would like to preview your work you can do it in the game window now i create new script and call it health bar i assign it to our helper object i'm starting by creating four serialized private fields to store the references of different components those will be half of our character the bars rect transform the health bar mask and the hp text now i'm creating two more fields first one to store the maximum right mask value and another one to store the initial value in the start method i start by calculating the maximum right padding of the mask i do it by subtracting from the full bar with the initial left and right paddings unfortunately as the padding of the mask is stored as vector4 we don't have convenient fields to work with but that's alright we'll manage somehow then i also set the initial text of the hp indicator and set the value of the initial right mask now we'll need a method to adjust the width of the bar let's call it set value and make it have the parameter of type integer the formula to calculate the width will be the new value of hp times the maximum width of the bar divided by maximum hp so in our case new value times max write mask divided by health dot max hp okay so we have the target width of the bar now we need to use it to calculate the right padding of the mask we add the maximum right padding of the mask to its initial value and then from that we subtract the target width now we get the padding we adjust its right side and then reassign it to the mask and the last thing to do is to update the text value make sure this script is on the hp bar and fill all of the references first the health script from the character then the bar image the mask and our hp indicator text if you start the new game and by any chance you use the new input system you will receive hundreds of errors in that case you need to click on your event system and in the inspector click on this magical button replace with input system ui input module now the last thing to make it work is to connect it to our health script i click on the character i create new actions under the health and damaged event and in them i invoke the set value of our hp bar and we are done if you enjoyed this tutorial consider liking and commenting this video and of course subscribing to my youtube channel in the next tutorial we'll add the damage indicators i hope you are excited but in the meantime have a fantastic day love you and bye bye

Channel: PitiIT

Views: 3,607

Keywords: unity 3d, unity 2d, unity tutorial, unity health bar, unity health system, unity hp bar, how to make health bar in unity, unity hp, character health unity, health counter unity, hp counter unity, health ui unity, unity ui, unity bar, unity ui element, ui canvas, ui image unity, unity beginner tutorial, unity 2d tutorial, unity health bar tutorial, unity health, hp, health, unity rpg, how to make rpg game in unity, unity basics, unity game development, game dev

Id: 22heywkg8Cg

Length: 6min 31sec (391 seconds)

Published: Fri Jul 29 2022