How to make a HEALTH BAR in Unity!

have you guys ever heard the one about the polar bear that walks into a bar and he's like can I get a beer and the bartender is like know you can get a health it's it's a health bar of course one of the most common things that we see in video games are health bars whether they're glued to the screen on the HUD or floating on top of game characters health bars almost always make it into a game in some form or the other no luckily creating a health bar is actually really simple using unities UI system and they can easily be modified to represent all kinds of different things like mana cooldowns energy casting bars and so on so in this video we'll have a look at creating a standard health bar that you can easily modify to suit your needs we'll make it so that you can stick it to the screen or have it follow around objects in your world jobs done but first this video is sponsored by hosting er let's say you're putting the finishing touches on your game like for example HP bars and now you're ready to build and host your game somewhere hosting our offers great hosting solutions that you do exactly this having you answer before your game is great for quick updates hosting game data and it also gives you the possibility to host a web domain link to your game or studio with a hosting a cloud hosting plan you get your own server with a dedicated IP address daily backups unlimited bandwidth and so much more hosting are now also offers a Google cloud powered hosting solution this gives you the flexibility scalability and robustness of Google cloud along with the simplicity of hosting ur and the H panel for management get up to 91 percent off for all yearly web hosting plans using coupon code practice and get a domain included with any premium or business plan simply click the link in description to get started also I'm super excited to announce that the community is hosting another practice game jam the gem will start on February 16 and end a week later on February the 23rd as always the team will be announced when the gem starts I encourage all of you to go sign up for the event now everything is hosted on itch and I'll of course have a link in the description to where you can join and read more about the event and this is a special event in that you are allowed to use any assets that you'd like as long as you have the permission of course and if you've never participated in a jam before I really cannot recommend it enough it's a great way to challenge yourself in a stress-free environment after all game jams are all about having fun so sign up now you think the thing you need description and with that I'm in the mood for a snack so let's make a health bar Sri Hyun unity and I've gone ahead and created this incredibly simple scene in fact all we have in here is just a main camera as well as an empty player object and on this object I've created a script called player that just stores the health of our player we'll have a look at this later when we want to hook up our health bar to the player but first we of course want to make the bar itself so let's go ahead and create some UI for our health bar to do that we'll right click in the hierarchy we'll go you I and I'm just gonna select image this is of course going to create an image object as well as a canvas that is going to store all of our UI let's select this canvas and hit F and this is going to show us our entire canvas that we can work within I'm then going to select the image here and drag it to the center of our canvas remember when working with UI you always want to use the rect tool up here the shortcut for that is T now you could of course go ahead and create your health bar just using square shapes like this but to make things fancier I've actually gone ahead and created a few sprites I've created this bar sprite as well as a heart so for the image here I'm gonna take the bar sprite and drag it into this source image slot and then to avoid any weird stretching I'm gonna hit set native size there you go we now have the pace of our health bar you can of course create your own sprites if you'd like or you can just download the ones that I'm using here that will be a link to the entire project in the description and then gonna rename this to border and that's gonna be the border of our health bar and we're probably going to have quite a few UI elements inside of this health bar so let's go ahead and create an empty object under our canvas here let's just right click and hit create empty let's rename this to health bar and let's just make it these same size as our health bar sprite here there we go this way we can take our border and parent it to the health bar so now we can I have all our different sprites inside of this health bar object let's also go ahead and add the fill for health bars that's right click on the health bar go UI and create another image and for this one we don't need a sprite since we just want it to be a solid color but I'm gonna go ahead and put it above our borders so that it shows underneath and up here in the rect transform we can see the different anchor presets I'm going to down old and click on the bottom right one this is going to scale the image to fill our entire health bar and it's also going to set the anchor points around this health bar so that if we change the scale of our health bar we change the scale of our fill as well let's then go ahead and rename this to Phil let's also select our health bar and just scale it to fit inside of our border to make sure that none of the Phil shows outside and the cool thing about this setup here is we can take our Phil now and simply scale it here in order to create the illusion of our health going up and down and an even cooler thing is that the UI system actually has a component that makes this incredibly easy to control so let's select our health bar here and let's go ahead and add a slider component I'm gonna make this non intractable I'm gonna set the transition to none navigation to none and this way we make sure that it's just a completely static object and that we can interact with it within the game however if we now take our Phil here and drag it into the Phil rect we can see that we get this value slider and just by adjusting this slider we can make our health bar go up and down really really cool now of course right now if we resize our health bar our border just stays the same so let's go ahead and select our border here and again let's go to the anger presets here and let's click in the bottom right corner this time without holding down alt and this is simply going to set the anger without adjusting the scale of the UI so now if we scale our health bar we scale everything accordingly awesome now we can of course also make it a bit prettier let's go ahead and add a heart so that's right click go UI image and I'm gonna drag in the heart sprite here and again hit set native size let's take this heart here and drag it to the left somewhere around there looks pretty good let's rename it to heart and let's set the anchor for this to be on the left hand side this way if we go ahead and scale our health bar we can see that the heart stays on the left hand side finally we can of course set a color for our Phil here so if we select that we can change the color and I'm just gonna use the color picker here to get the same color as with the heart and there we go we now have something that looks and acts like a health bar awesome of course the next thing that we need to do is some code that is going to adjust this health bar on the fly and the cool thing about this slider here is that you can see we have a minimum and maximum value of course most games we want the minimum amount of health to be cereal so we can just leave that but we can actually set the max value here to the max amount of health that we want let's say for example our player has a maximum of 20 health now we can use our value slider to go between 20 and zero really cool or if our health only uses whole numbers we can set this to something like 4 just to demonstrate and check out this whole numbers here and now our health is going to go in increments really cool so what we can do is actually create a really simple script here that is just going to adjust this slider so let's hit add component and let's create a health bar script let's say create an ad and open it up in Visual Studio now the first thing that we want to do when working with any kind of UI is to import the right namespace so up here we'll be using unity engine dot UI what this allows us to do is create a variable that is going to store our slider so we'll create a public slider and let's just call it slider and now with reference to this slider we can create a function for setting the health on that slider so let's remove these two two fault functions and that's instead create a public void set health where we're going to feed it an integer with the amount of health and all we need to do here is go slider dot value equals the health passed n it's really that simple so now whenever we call this set health function our script is going to find this slider here that we drag in so it's going to find this slider and adjust the value here to the value that we set really cool of course we also want a function for setting our Max value so that we don't have to do that inside of the inspector every time and doing that is actually just as easy we'll just create another public void and remember we are making these functions public so that we can call them from other scripts and this one is going to be called set max health again it's going to take in an amount of health and this time we can say slider dot max value equals health and also let's set the value to health as well to make sure that our slider starts at the maximum amount of health and that's actually all of the code we need with this our health bar is now ready to be implemented into any kind of script that you already have you could put this on a player you could put this on enemies you can even put this on buildings I've just gone ahead and created this very simple player script here and if you open it up we can see that it's really simple all we have in here is a max health by default this is 100 and a current health when we start the game our current health is going to be set to max health then every time I press the spacebar we're gonna take a bit of damage I've just set it to 20 damage just to test this out and when taking damage we simply subtract the damage from our current health that's all this script is currently doing so to add our health bar in here we'll just create a reference to it so we'll create a public health bar let's just call it health bar and then when we start when we set our current health to our max health let's also grow health bar that set max health and pass in our max health so we've now set up our health bar all we need to do is update it every time we take damage so inside of our take damage function we can go health bar dot set health to our current health and that's it that's actually all we need to do three lines of code and we've integrated our health bar if we save this now and go into unity we can see that we have this health bar slot and we just need to drag our health bar into this slot and now if we play the game every time we press the space bar we can see our current health being reduced in our player script and we can see our health bar indeed going down awesome of course there are a bunch of things that you can do to this to make it more exciting you could for example use a gradient to change the color of the fill depending on how much health we have left so in the beginning our health bar could be green then it could transition to yellow and then when we don't have that much health left we could make it red and doing this is actually really really simple we just select our health bar go into our health bar script and here we can use a type of variable called a gradient so to create a public gradient and let's just call it gradient now let me just save this and show you what it looks like inside of unity as you can see we get this gradient here and if we click it it opens up a GUI and editor this is all says to choose different colors at different points to the right here is going to be the beginning of our health bar where we are at full health and to the left here is going to be when we are at zero health let's take the first one here and let's change the color of this to some kind of bright green we can then set the last color here to some kind of red let's just color pick the one that we already have and in the middle here let's do some kind of yellow and as you can see right now we're kind of blending from one color to the other and this might be something you want however in my case I think it looks a bit better if we make these transitions fixed so we go immediately from one color to the other to do that all we need to do is change the mode from blend to fixed and right away if we go ahead and readjust these points here we can see that we can go harshly from one color to the other I think something like that looks pretty good so if we now close this down and go inside of our script we can get a color from our gradient at a specific point we do this using the evaluate function so if I go in here under our max health and go gradient dot evaluate here we can give it a value from zero to one so one is all the way to the right on our gradient and zero is all the way to the left so if we put in one here we're going to get a completely green color which is exactly what we want when our health is at max so at this point this is the color that we want of course we need to set our fill image color to this color so to do that we just need a reference to it so we'll create a public image and let's just call it fill this waving go fill dot color equals the color that we get at the very end of our gradient then whenever we take damage and want to set our health a new we can go fill dart color equals gradient evaluate and this time we cannot say what color we want beforehand it's going to depend on how much health we have left in other words it's going to depend on our value here but our value might go from zero to a hundred or is zero to twenty and the gradient goes from zero to one so instead of just using slider dot value we want to use slider dot normalized value which is the exact same thing but we've just changed it to go between zero and one and if we now save this and go into unity and make sure to drag in our fill image and hit play as we can see our health bar starts our green our max value is a hundred our current value is a hundred if I click space it's going to go to 80 then to sixty and it changes to yellow then down to 40 then down to 20 and it's now red and finally going down to zero awesome so our health bar is now working and we can change the colors to anything that we'd like so the last thing that we need to do is of course place our health bar in our game so to show you how to do that I've gone ahead and created this symbol symbol example game and all I've put in here is just a play which is just a cube with a movement script a ground object which is also just a cube as well as a main camera that is placed on a rotator so that it's slowly going to rotate around our scene as you can see this is all that is in here now let's go ahead and add a health bar here and the first way and definitely the easiest way is just placing our health bar on the HUD so that it's kind of glued to the camera to do this we just take the health bar that we just created so that was inside of this simple scene here I'm going to select the entire canvas hit ctrl C go into our exam again and hit control V and there you go you can see it just pasted this huge canvas here if we hit F and go into 2d mode we can see how large it is and it's just gone ahead and simply place that on top of our screen this of course allows us to take our health bar and place it any way that we'd like we could for example move it to the top left corner here and maybe also angered to the top left so that if we go ahead and resize our game view it's gonna stay up there and now when we hit play it's just stuck up there it's not reacting to anything in our scene and of course to hook this up to our player we would simply go player drag in all play a script and simply reference our health bar that's all we need to do and now whenever our player takes damage we can see our health bar updating awesome but how do we go ahead and place this inside of our world if we don't want it to just be glued on top of our screen but maybe follow around our player well to do that select the canvas and we'll change the render mode from screen space to world space this now makes this canvas here a physical object that we can move around however it's still incredibly large so let's go ahead and scale it down let's set the scale here to point zero one by point zero one five point zero one let's also set the position to zero by zero and if we now hit F to focus on it we can see that it's a bit more reasonable in size in fact let's go ahead and just move it up here let's take our health bar and let's snap it to the center so I'm gonna hold down alt and click on the center anchor preset we can then take the entire canvas and kind of resize it to just fit our health bar there we go let's go out of 2d mode and let's now place this on top of our player let's just drag it under our player in order to make it move around together with our player let's drag it a tiny bit down and just make sure that it's in the place where we want it somewhere around here looks pretty good if we have a look in the game view we can see that it's definitely working of course right now when we hit play we can see that there's a pretty obvious problem with this and that is the health bar is currently not rotating to point towards the camera instead it's always just pointing in the same direction this is not something we want we want to always be able to clearly see our health bar to do this we will turn it into something called a billboard a billboard is something that always points towards the camera so let's turn our canvas into a billboard with a quick and easy script let's zoom in select our canvas hit add component and let's create a billboard script let's say create an ad and open it up in visual studio so all we need to add in here is of course a reference to our camera so we'll create a public transform and let's just call it cam and we can go ahead and remove the start function here because if we want this object to point to what's our camera we probably want to make sure that we update it to do that once every frame however using regular update can actually cause some weird behavior here since if our camera is moving inside of the update function we can have some odd situations where our camera moves then we point towards it and other times we point towards it and then camera moves and this can cause some jitter so instead instead of using regular update we're going to use something called late update this is always called after the regular update function and so it's perfect because our camera does all its movement and then we point to what's it and doing that is actually really easy we just go transform that look at and this allows us to point this object towards a target now we could just put camera dot position in here and this is definitely going to point this object towards our camera however that's actually not how a proper billboard works what we want to do is make sure that we point the billboard in the same direction as our camera so to do that we can use our current transformed up position and we can then add on to that camera dot forward in other words we'll take our current position and we'll go one unit in the direction that the camera is currently facing and that is going to be the target that we'll look for this is a standard billboard script it can be a bit hard to wrap your head around in the beginning but for now just follow me if we save this and go into unity we can go ahead and hook up our camera some simply going to drag in my main camera here and with that we can see that our UI immediately snaps to point towards the camera really really cool and that looks much much better in fact if I go into the scene view here we can see that happening as our main camera rotates around the scene a UI element always rotates to face that direction awesome now if you're using SRP in my case I'm running the Universal render pipeline the UI might not look super crisp like this this is a weird quirk I've found with using UI world-scale canvas together with SRP the best solution to this that I found is to find your rendering pipeline asset so by default this is under settings and I'm using the universal RP high quality and then increase the render scale we can do this on the quality and here's a slider called render scale and if you have a look at the UI as I go ahead and increase this towards 2 we can see that it becomes more and more crisp what this effectively does is that it allows us to render at a higher quality then down scaled to fit the screen size this will definitely cost a lot in terms of graphics performance unfortunately it's the only workaround I found so far but if anyone has a better trick definitely let us know in the comments and with that our health bar should be working so if we now go ahead and play our game we can see that as I move around the player our health bar follows we can see that I can go ahead and decrease it at any time and that it always billboards to point towards our camera that's pretty much it for this video if you enjoyed it make sure to subscribe and bring that notification bell so you don't miss the next one also don't forget to check out hosting up for fast and solid hosting solutions simply click the link in the description to get started and make sure to sign up for the brackets Jam just click the link in the description to join all the other developers and have lots of fun on that thanks watching and I will see you in the next video thanks of the awesome patreon supporters who donated in January and a special thanks to lost to violence dog forever see j69 prisoner by Megan Frazier Tara Versace Lila set Jim Shu Bob jazz Daniel die sonic marc-antoine Gerard no kirisaki jacob sanford michael korvac gregory pierce the mighty Zeus alison appears Gidget and Erasmus you guys Rock

Channel: Brackeys

Views: 615,264

Rating: 4.9510221 out of 5

Keywords: brackeys, unity, asset, assets, beginner, easy, how, to, howto, learn, course, tutorial, tutorials, game, development, develop, games, programming, coding, basic, basics, C#, unity3d, health, bar, health bar, healthbar, mana, energy, ammo, time, casting bar, mana bar, energy bar, casting, HUD, HP, hp, health points, ugui, ui, user interface, interface, system, slider

Id: BLfNP4Sc_iA

Length: 21min 5sec (1265 seconds)

Published: Sun Feb 09 2020