How To Make A Health Bar In Unreal Engine 5

hey guys and welcome back to another unreligion 5 tutorial in today's video what we're going to be going over is creating a health bar inside of unreal engine 5. now this will also work for four as well if you wanted to but i'm showing it in five today so let me hit play and show you we're gonna make today so you can see in the bottom left-hand corner of my screen we have a nice little health bar which you can customize to look however you want and be whatever size you want and you can also change the colors as well to make it more obvious if that's where you are after as well at the moment my health is at eighty percent if i had to press one i'm gonna take damage and you can see it going down and if i press two it goes up now going down and going up i set it up at the moment to do ten health each time but again you can obviously set it up with a actual own system for when you do want to be dealing and healing health as well so again this is only going up today this is very easy to customize to get to look how you want and to also expand and build upon to fit in with your own game as well so without further ado let me need this code and i'll show you how i've done it first thing you want to do is you want to actually create the images for your progress bar now you don't actually need to this if you don't want you can just use a default rectangle inside of unreal as well which i'll show you how to do later on and if you just want to do that you can ignore and skip over this step but what i did was i went into photoshop and just created something like this so i created a blank document of the size of my screen which for me is 1920 by 1080 and then on here i just made the health bar positioned it where i wanted so i can get the scaling of it correct as well once i had it how i wanted i put it into a new document here so i can get it just the size i want making sure to keep it the same size as this so i just copied it file new document and set it to be the size of the clipboard once i got this i duplicated it or just changed the color so i have a fill and an empty you'll notice they're two slightly different colors again you might want them to be more prominent so have this as darker and this one is lighter really customize it to how whatever you want but i like doing it like this so we have a lighter color and a darker color for fill and empty then once you've got these you just want to export them so you can go to file export quick export is png with them both selected and now you have your two different health bars for being full and for being empty and we can then transition between them inside of unreal so like say once you've got them you want to go back into unreal and just drag and drop them into your content browser from your folder to import them into unreal so we now have them in here like so we can open them up and see this is what we've got perfectly like so and once you've done that we now want to actually create our widget and put in our health bar inside of it and a widget is essentially placing things on screen so we'll press ctrl space to open up our content browser i'm going to right click go to user interface and create a widget blueprint creating a user widget and i'm going to name this one health widget like so opening it up straight away the first thing we want to do in here is we want to scroll down to panel open it up and add in a canvas panel this used to be on there by default with norman four not sure why they've removed it in five because you need it anyway but either way we need to get a canvas panel in here we're gonna add in a progress bar now if you wanted to just be a rectangle you can just leave it as this progress bar here perfectly like so this will work for how you want we can increase the percent and you'll see this is now working as a progress bar and we can change this to our health you can change the color down here to be red if you wanted so it looks more like a health bar like so that's nice and simple but we want to customize it a bit together to use the images we just created so to do that what we can do is go to style down here and we want to open up the background image and the fill image now like i said we created a fill and empty so the background image is obviously going to be our empty bar so there's mine health bar empty and my fill image is going to be my health bar fill and you'll notice we've now got them on here so these are using the images we just created however it does look a little bit weird that is because of the scaling so under image size you'll notice we've now got 561 by 127 that is the size of the image that i've used it's automatically inputted in there so i just want to make the size of the progress bar the same size as the image so size x i'm going to do 561 size y 127 and this will likely be different for you but once you've done that you can now see this looks good and it looks perfect so how we want i'm then going to move this into the same position i wanted it in i just the bottom left corner and make sure to move the anchor down there as well so it then stays in this position it is anchored here on screen so you can think of it the same way a boat anchor works it keeps it in position if you have the anchor over here the progress bar will be pulled over in this direction which we obviously don't want so just make sure it stays on screen in the correct position and once we've got that we then want to go down to the very bottom and we can increase the percent here and you'll notice this is working perfectly how we want it to if it doesn't look right for you it will likely be because of the fill color and opacity so by default it's blue so you'll notice for me that's black that might be what it looks like for you if it does don't worry just set the color to be white or red so either set it to be white or the color of your progress bar which for me is red but i like to just put it as white and now you'll see this looks perfect so we can increase percent this is filled this is empty again you might want to change the colors to be more prominent for you if you wanted but we've now got our progress bar on screen like so so we can compile and save this but how do we now actually link this to be our health displayed inside of this health bar well firstly we actually need to create our health you might have already done that if you do great if you haven't i'm going to very quickly set it up now so i'm going to minimize this and we want to do this inside of our character blueprint so i'm going to go to control space content third person blueprints bp third person character and straight away in here what we're going to do is add a variable naming this health and we want to set this to be a float making sure it is a float not an integer and the difference between a float and an integer is a float is a real number you might have heard it record that instead and essentially it means it can have decimal points whereas an integer is a whole number it can't have decimal points this is very important for actually setting up the health by itself within the widget for the health in the character it can be an integer but it's just easier to keep it as a float instead once you've created that that's great with it compiled we can set a default value i'm going to set mine to be 75 just so we can see that it has lost some health and we'll go back to our health widget over here now what we're going to do is click on the health bar go down to where it says the percent so that is here for me and we want to hit bind create binding this return value here is going to be the value inputted inside of our progress bar which we obviously want to be the health so how do we get the health from the player character blueprint into this widget well if we go back to the event graph first of all delete event take an event pre-construct and off of event construct what we can do is cast to our character blueprint so for me that is bp third person character so this could be third person or first person or whatever you've named it the object is then going to be get player character perfectly like so as your character so as bp third person character of the cast we're going to right click promote a variable naming this character reference and this means we can nice and easily and efficiently is the most important thing access our character blueprint in order to get our current health so compile and save that and go to the get percent binding here then we're going to get a character reference drag out of this we're going to get the health and then we're going to just put this in here and out of the health we're going to get a divide and we want to divide by 100 inputting that into the return value now the reason why we're doing divide by 100 is because a progress bar in unreal goes between the values of zero and one so if we hover back over this again the percent it should say used to determine the fill position of the progress bar ranging zero to one so essentially if you have a hundred health divide that by 100 you get one that means it is full if you have 50 health divided by 100 you get 0.5 it means it's halfway through the progress bar so obviously if our maximum health is 100 we have 50. it now means perfectly that we're halfway through so what you want to do is divide by your maximum health essentially so if that's going to be changing for you i either player can upgrade it what you can do is go back to your character blueprint create a new variable called max health compile save that set a default value of 100 or whatever it is for you then back in the health widget we can come out of this and come out the character reference sorry and get max health then simply input that into the bottom value there and that will also work the same way and in fact it might be better for you because again if the player can upgrade their maximum health this will then work perfectly so we can compile and save that this is now going to perfectly display the player's health inside of a widget but we still need to put this on screen so if we go back to our character blueprint we can right click and get begin play if you've already used event begin play don't worry you can hold down s left click to get a sequence connecting that into begin play with then zero go into the code you already have and then one going to the code we're about to do the code i'm about to do is create widget the class is going to be our health widget and the return value will simply be add to viewport this will now put it on screen so we can compile and save that now if we minimize this and hit play we can see we now have our health bar perfectly on screen where we wanted it looking how we wanted and you can also see we do have the two different colors as i've said it to be 75 full as we have 75 health out of 100 health so what i'm going to do is also very quickly set up some code in order to just take damage and heal i'm not going to go over it too much because that's not the purpose of this video however if you do want a proper damaging system and healing system let me know in the comments down below and i can make a video on that as well but what i'll do is i'll leave in what i'm doing here i'll just speed it up so you can see it you can pause the video and slow it down but i'm not gonna be going over it [Music] so there we go i've now just set up so when i press one i'm going to deal 10 damage which also goes over here making sure we can't go below the values of zero and when i press two we're going to gain 10 health making sure we can't go above our maximum health which for me is 100. and again i can do a video going over this in further detail if that's something that you want so let's hit play once again and now if i press one i'm taking damage if i press two i'm gaining damage and you can see there's no dynamically updating within our progress bar and our health bar in the bottom left-hand corner working perfectly like so now there's also another method of actually updating the progress bar it is technically more efficient however it won't make a massive difference for you unless this is made before a mobile device or a very low end pc so you don't have to worry about doing this if you don't want to however it is technically more efficient as the bind on here will technically work off of event tech it's going to be constantly calling this and constantly updating it so if you don't want them to happen constantly in the background you can just update this value whenever you take damage or heal so if we delete the carriage reference health and max health just leave the divide what we can do is right click the top value of the divide promote the variable naming this health right click the bottom parameter variable naming this max health so now it's going to do the same thing it's going to divide the health by the max health however it doesn't actually have the values we want so compile and save go back to our character blueprint now when i deal damage what i want to do is access that widget so to access it we can go back to where we're creating it off the return value we want to right click promote to variable naming this health widget reference just connecting this up in here like so so we're still adding it to the viewport like this then back on event any damage here i.e where i'm taking damage i want to hold control drag it in to get it then out of this i want to set health to be the health we've just created there perfectly like so and what i'm also going to do actually is on event begin play i'm going to do set max health setting it to the maximum health i have and then obviously whenever you do upgrade your maximum health just update it the same way we're doing with the health down below so hope all this makes sense so now that's going to automatically update here instead which is technically a lot more efficient again the other one isn't too intensive anyway and i'm just going to do the same where i'm gaining health so get the widget set the health and set it to the health in there like so which now should work perfectly once again so let's minimize hit play it should be there if i press one it's now working perfectly like so however you'll notice it was at zero until i updated it all we need to do there is just set the health on event begin play as well so it is there by default too so the same we've done with the max health we also just want to do with the actual health so it's there by default so let's set health like so setting it like this now we can also just set the default values in the widget however they might be different every time you load up the game for example if you have a save and load system so let's do this like so now the health is there we can press one and press two to take damage and heal health working perfectly like so so i think that'll be it for this video as we've gone over everything we want to do today what we've done is we've set up a health bar inside of on religion 5 going over multiple ways to set up differently so it's more efficient for different pcs and different devices immobile i've shown you different ways of customizing it so you can use custom images like this change the color and all that different stuff i've also very briefly gone over how to deal damage and heal as well so sorry that this video is quite long i've just gone over it quite in depth i really want you to be able to learn what we're doing instead of just being able to copy it i want you to learn it so you know what it is that you're doing as well and again in the future i can go over an actual dealing damage and healing and also death system if that is something which you'd like so thanks for watching this video i hope you enjoyed it and i hope you found it helpful and if you did make sure to like subscribe down below so thanks for watching and i'll see in the next one [Music] you

Channel: Matt Aspland

Views: 74,682

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, unity, games design, ue5, unreal engine 5, unreal engine 5 tutorial, ue5 tutorial, ue5 health bar, unreal engine health bar, unreal health bar, health bar, health, bar, dynamic, custom, widget, player, display, show, progress bar, progress, show health, umg, max, max health, increase, size, on screen, screen, on, make, the, pick up, death, system, damage, heal, take, deal, 2022, ui, beginner

Id: PVgMkUwhtoM

Length: 15min 19sec (919 seconds)

Published: Tue May 10 2022