How to Set up Health and Damage System - Unreal Engine 5 Tutorial

[Music] hello everyone and welcome in this video we are going to create a health bar and a damaged system so let's get started here i have the epic games launcher open and i'm going to launch unreal engine 5. and when this tab opens up i'm going to click on games and let us just create a third person template so we have a character to start with you can also create a first person template or a top down template that is up to you that doesn't matter but let me just go ahead and create a third person template it's going to be for the target platform desktop and the quality preset is maximum and i'm going to include the starter content go ahead and give your project a name i'm going to call mine youtube health bar and let's go ahead and click on create project when the project opens up i'm just going to click on update down here and for this content drawer i like having it up all the time instead of just clicking down here all the time so clicking on this content drawer i am going to click on dock in layout so we can see it all the time before we start in the video description i've included these four images for you and we can use those to create a custom ui now you don't have to get this but if you want to you can go ahead and make it look prettier than the default one so over here in the in the folders let's right click and let's make a new folder let's call it ui and inside of here let us import our images so just click and drag and import them here to the content browser and now you can see they are now imported the next thing is let's uh create our ui so let's right click and here in unreal engine you can create a lot of things and the thing we are interested in is creating a user interface so creating a user interface selecting this called a widget blueprint and just go ahead and click on user widget here and let's give it a name i'm going to call it wb main and wb i usually call it as a prefix for widget blueprint and this will be the main ui for the game so let's double click here and when the widget blueprint opens up this is what it looks like so here to the left you can see we can add different elements for example buttons or images or boxes and down here you can see all the elements that that are added already so right now it's empty because we don't have anything and here in the middle you can see the ui that you build this is the designer and you can hold your right mouse button to navigate around here and then here at the top we have this this is the designer and in the graph we can add functionality later on so let's go ahead and design the health bar first off before you start designing anything you have to search for a canvas panel so dragging this canvas panel and adding it to the main ui let's now click on this canvas panel and you can see this is the main window that that we have so what we want to do is we want to start with something called an overlay and an overlay makes it possible for you to overlay items on top of each other for example a background and a health bar on top of it so this is the overlay that you have added and you can see you can drag it around inside of your canvas so inside of this overlay let's just let it be here and design it and we can always move it at the end so this is the overlay and you can make it larger if you want to let's add first a background image so dragging this image up here searching for image dragging it into the overlay and clicking on the image let us fill the whole area and now when you click on the image you can see you have a lot of different settings you can edit for this image so let us fill it horizontally and fill it vertically inside of this overlay and we already imported the custom images now you can just work with this if you haven't imported anything but i'm going to work with these ones just to make it look a little bit better so clicking on the brush up here you can select what image you want to use and clicking here let us just use this one called black square flat so this is the one we're using now if you want to see your ui without all of these dashed lines you can always click up here to remove the dashed lines and you can see what it looks like i'm going to click on this image i'm going to click on ctrl d to duplicate or you can right click and click duplicate that's up to you and let us now change this into a blue one and instead of filling vertically i'm going to fill or top align it up here and then making the size of the y to just for a small design to make it look a bit better i'm going to do that for the bottom as well so clicking on this upper image clicking on control d to duplicate and now aligning it here to the button so now you can see this is what what it actually looks like and this looks a bit better than before now let us add our health bar and to do that again let me add an overlay because in my health bar it's a progress bar and we have some text on top of it displaying how much health you have so dragging this overlay into my overlay that i already have and you can see it is here it's very tiny because we don't have anything inside of here so let's add a progress bar this is what it's called and the progress bar is now added and on top of it we want some text so searching for some text and dragging it into this overlay before we continue if you're interested in similar content make sure to take a look at the video description below to check out my released unreal engine 5 pulses i've given you over 85 percent of the courses teaching you how to create 2d and 3d games in unreal engine 5 so make sure to check out the links below and let's continue now let us design it so for this overlay i want it to be in the middle so aligning it here in the middle and actually for this overlay let's align it here fill it horizontally instead and let's do that for the progress bar as well clicking on the progress bar let's fill it here horizontally and vertically we can just let it be here in the center we don't have to fill it like this so letting it be here in the center and for this text i'm just going to say for example 100 this we will be changing dynamically in the game so this one the text i will actually center in the middle now clicking on the progress bar we have to make it look a bit better so in the style you can click here in the background image let's change the background image to this one image like square dark so it is a bit darker than the background and now let us go to the fill image and change it to the red one and go to this marquee image and change it to the red one now you can see it's a lot larger than before and if you fill this percentage so if you just up the number here you can see it's filling the progress bar but the color is not red like we set it here it's looking a bit wrong and this is because this fill color for some reason i don't know why it's blue so let's click on it and you can change it to white and this will actually fully remove this blue color and you can see this is the true color for the button you added now let me zoom out a little bit so i like to work at this zoom plus two this is what it usually looks like in the game and for this progress bar i just want to make it a little bit smaller so here in the marquee image in the y i'm just going to write 40 in the y size and i'm going to copy this and paste it up here and paste it up here as well now for the text up here i'm going to make it as small as well maybe instead of a 24 let's make it and what i'm going to do here i'm also going to go down to the outline actually not the outline let's let me go down to the shadow and here in the shadow color the alpha if you make that higher you actually can see some shadow so i'm going to put it to 0.35 which means 35 percent if you put it to 1 the the shadow is fully there but if you put it to 0.35 it's like 35 percent shadow and you can also make the shadow appear more if you set this shadow offset to something larger so i'm going to set it to two by two and it's going to be a little bit away from the text so this is what it looks like right now and i want to give some spacing here to the sides you can see the the health bar is clamping to the sides so i'm going to click on this uh this overlay actually not the progress bar the overlay and here in the padding this is where you can push it away so pushing it away from the right side i'm going to push it away by 30 pixels or 40 pixels i think 40 looks a lot better and here i'm going to push it away from the left side by 40 pixels as well so this is what it looks like and we can always click on this overlay and resize it so it looks a bit better we don't have to have that much of space we only have this health bar and now what you can do actually let me resize this so instead of 40 in the padding let me do 30 by 30. i think there is too much space and now you can resize it to whatever you want so try to do whatever you want here now let's put it down here i want my health bar to be down here on the ui so first you have to change the anchor point to this side here and what you can do now is you can click and drag your ui and just put it down here or if you want exact numbers you can always go here in the position and change the x and y and if you want to see the again the dashed lines and see what where your screen border is you can click on these dashed lines just remember your ui has to be inside of this box here it can't be outside here so just try to resize it to whatever you want and i think this is perfect so i'm going to click on compile to make sure everything is good and it's going to give you a check check mark if if you have no errors and you are going to click on save here now let us add some functionality for this health bar and before we do that let me click on this progress bar and change the name of it i'm going to call it prog health bar so progress bar health bar and for this text i'm going to click on it and call it txt health and also remember to click on is variable for this text and you will see why in a little bit and for these three images you can select all three of them and you can remove this is variable and let's compile and save and you can see here in the graph what the variable means is you can see those as variables so you can actually edit them here in code the reason why i removed this images you can see if this variable is ticked you can see them here in the graph but i don't really need to change anything for this background so i'm just going to remove it so my project look looks cleaner i only need to modify the text and the progress bar to tell me how much health i have left so the only thing that needs to be variable is the progress bar and this text because we need to change it during gameplay so going back to the graph let's delete these default events so selecting all of them and clicking delete on my keyboard now inside of here i can right click and i i need to make a custom event so writing custom events and selecting the custom event and remember here you can add things by right clicking and you can search for all the functions in the game so here let's make a custom event because code in blueprint cannot run without an event so we need an event first and this one let's call it set health bar info and this event is responsible for setting the health bar info so what we want to do is let's take this progress bar and what we are trying to do is we're trying to update this percentage so if you click on the progress bar we're trying to update this percentage here so let's put it back to one by default so we have full health and let's go back here and you can just drag from this progress bar and say set percentage so this sent percent and connect it and the other thing we're trying to do is take this text and then dragging it and say set text so we want to set text to the amount of health that you have left and this will ultimately change whatever you have written here in this text here it will change it dynamically into the game so it tells you how much health you have left now let's leave it at this we can always come in here and set these variables but for now we don't really have anything to do anymore we have to code the damage system before we can actually insert some values inside of here so let's now close this widget and let's apply it here to the screen so you can see when i click on play on my level right now if you want you can see it in full screen by clicking on f11 and now you can see my game i don't really have my ui i can't see it and the reason is you have to add it to your viewport before you can see it so let's go here to the third person and in the blueprints folder inside of here let's right click go to blueprint class and let's add something called a playercontroller and in the playercontroller this is usually where we create the ui so let me just stay consistent with this blueprint project and call it bp and they have called the third person game mode for example i'm going to call it third person controller and inside of here let's double click this controller go directly to the event graph and here let me delete this event tick and i only need this one called begin play and this event is just saying what should i do whenever i begin playing the game and the only thing i want to do is drag from this execution pin and let go and now you can search for something and the thing we want to do is called create widget we want to create our widget blueprint that we actually just created and now create widget now you have to select which one and it is this one we just created and let's right click promote this to a variable so we have stored it inside of here and a variable is just a container storing this very this widget blueprint information and i'm going to call it wb main so just give it a name and now to display it to the viewport you have to drag from this and say add to viewport now when you you see here when i begin playing the game i'm going to create this widget blueprint and displaying it to the viewport so clicking on play you can see here nothing is really happening and this is because we have to use our controller as the default one for this level so going to the world settings and again if you don't have the world settings you can go to the window and click here to show the world settings so inside of here clicking on selected game mode let's now change the playercontroller class to the one we just made called bp third person controller now let's save and when you click on play now you can see when i click on f11 to show you better you can see now we can see the health bar so now the ui is actually added and whatever you add to that widget blueprint will be displayed on your screen all right so before we continue let's now make the damage system so we actually have some values we can work from so let's go to the player you already have a player inside of here so this is the player we are controlling right now the blueprint made for this actor is called bp third person character here in the blueprints folder so double click on it and you see here we have some very very basic code already i'm going to delete this one camera input gamepad i don't really have a gamepad for this project so i'm going to delete it and this is simply the only code we have right now so very very simple thing we have the mouse movement the movement with the keyboard and the jump movement so now let's create our own damage system here and the event we want to use you can see every every time you add some a functionality you have to have an event which is marked with that this red color so you can't run blueprint code without events so we have something called any damage and this is the event that plays whenever the player receives damage so we need two variables here and again variables are just containers that contain information and i'm going to click on this plus button two times so it creates these two variables and the first one the type is going to be a float which is just a number with decimal places so you can compile and save the project and you can see what the default value is for this variable so it's just a number with decimal places and let's call this one current health now let's take the other one also change it to a float which is a number of decimal places and let's change the name of it to max health so we have two different variables now when i receive damage from something i want to subtract my current health from this damage so let's say for example i have 100 health is my current health minus so you can drag from this execution or this pin here and you can write the minus or just write subtract if you want to and you can select it here and now let's connect the damage to it so current health minus the damage for example if we have 100 health minus 10 if that was the damage we will get 90. so we have to set the value again and the way to do it is you can drag this current health and click on set current health and now drag from this execution pin to here so now we are setting the new health value which might be 90 if the damage was for example 10 and the current health was 100 and now there is a chance where you get so much damage that this number like when you subtract it it will be in the minus so for example if i have 100 health and if the damage is 110 it's going to be minus 10 and i don't really want to do that i want to stop my health at zero and this is why we use a clamp node so let's drag from here and write clamp and let's use this one because right now we're using a float variable so let's choose this one called clamp float and here we have already plugged in the value so what's the minimum it is zero meaning i don't want to go below zero and the maximum is this max health so the maximum is max health and now we can drag from this so instead of going here to here we can now drag from that clamp and plug it here to the set current health so now even though the damage is 110 and my health is a hundred it can never go below zero because i am clamping the value and after that now we want to update the ui and again i told you before so here's actually giving me an error before we continue because we haven't set the max health value so let's click on this max health and let's just set the default value to 100 so it doesn't give us an error and let's compile and save now i told you before we handle ui inside of the controller so we actually have to make an event inside of here so in here let's uh right click and again do a custom event and let's call this one update health bar and what this is going to do it's simply going to take this widget blueprint remember here in the ui if i open up the widget blueprint again and i go to the graph here in the graph we made this one called set health bar info and now i have to call it here from the player controller so in the update health i'm just going to take my widget blueprint remember the the event is inside of here so we can drag from here and say set health bar info so you can see the function here set health bar info and ultimately i can see from here that we need input for the current health and the max health because in the widget blueprint we actually need the percentage and if you want to calculate a percentage you need to divide your current health with your maximum health so let's actually add them to here so instead of adding variables here you can also add them to events so in the input down here clicking on the plus let's add the first one called current health and it's going to be a float and add a new one called max health and this is a float again now again to calculate the percentage you can drag from the current health and write the divided icon and you can click on divide here as the operator and let's drag this away so we have more space and we want to divide it by the maximum health now we have the percentage and we can actually click and drag this percentage and plug it inside of here so now we are calculating the percentage now the text that will be displayed here on top of our progress bar is just how much health we have right now so this is just the current health i'm going to drag here and put it here to the text and unreal engine is going to tell you these are two variables this is a float this is a text and i'm going to convert the float into a text this is what it's going to tell you right here so this is what it's doing and you can just place it anywhere just to make it look better you can double click here and make a reroute node just like this so let's compile and save and let's go back to the player controller now you can see these two variables that i added because i added them here to the set bar info in the widget blueprint so now in the playercontroller again let me just click and drag and insert them so i don't have to click here manually and create them i can actually just drag them into here and it will create them manually for me or automatically for me so here in the third person character we can actually now use this one in the player controller to parse the information to the widget blueprint so we called it update health bar so over here in the player to get access to your player controller i can right click here and say get controller and you can see it says returns the controller for this actor and now to now i have to tell it i am talking specifically about this controller so i'm going to drag here and say cast 2 and this is what cost 2 means it means i need to use the information from this controller so cast 2 and i called it bp third person controller so now from this execution pin i can access everything inside of this blueprint and i want to access is this one called update health bar i'm going to drag from here and say update health bar and select this function here now we have to plug in the max health and current health so i can just drag from this variable and drag it here this is the current health and the max health again drag this variable and place it in here this is the max help so now just to make sure that this ui actually also updates when you play the game because right now this ui only updates whenever you receive any damage so let me just copy this so selecting all of this control copy and i'm going to create a new event up here called begin play so just like in the player controller when i begin playing the game i want to update my ui to whatever maximum and current health i have and let's actually set our maximum and current health here in the beginning as well so i'm going to drag this current health and set this value because right now the current health default value is zero so i'm going to take this max health was which is 100 right now and you can just plug it inside of here and connect it like this so at the beginning of the game you're setting your current health value to your maximum health value which you have entered here and this is going to update the ui here so it's updated whenever you click on play on the game because if you don't insert this you're actually only updating the ui whenever you receive damage so now let's actually play the game and test it out and before we do that let's go to this quickly add to project and search for a pane so search for pain and you can see you can add this one called pain causing volume so you can click on it here and click on g to view other icons and it is actually below the ground here so let's take it up here and place it for example here on the side so we know where it is and now when i click on play and i full screen and i go to this pin causing volume you can see my health bar is now updating and i'm losing one health at a time and this is because the health or this pain volume is a subtracting one every time so the pain interval and the damage per second for example i can to put it to five damage per second and i can now walk into it and it's now subtracting five every time to make it a little bit more interesting let's go back to our code so going back to the third person blueprint and here in our character let's actually play an effect whenever we get damaged so from here let's do spawn emitter at location so we're going to spawn some visual effect here whenever we are getting damaged so the emitter i want to spawn you can click here and let's just select this 1p explosion we don't have more than that and what is the location you want to spawn it in you can drag from here and say get actor location and this means you are going to get this player's location because right now we are coding inside of the bp third person character so we are going to get self which means wherever this character is we're going to get that actor's location and we're going to spawn this particle effect on it now we have to check if the health is zero we want to kill the player so let's now take the current health and drag from this and write equal and you can select this one called equal and let's connect actually not connected yet so let's take it here let's drag from this pin and write b for branch here and let's connect it here so now you're asking with this branch is the health zero or not if the health is not zero we don't really want to do anything however if the health is zero we're going to drag from this pin and write destroy actor and this will destroy the character so you're going to get damaged and it's going to check if the health is zero or not so let me just minimize this and in the past pain causing volume let me change the damage to something larger so we can actually see this effect a bit quicker so maybe 15 actually in the damage per second let's click on play and let's now walk into here now you can see it's going to play an effect every time i'm getting damaged in this volume if i get out of this volume i'm not going to get damaged anymore and if i get inside of here now i'm going to lose the rest of my health and at the end i'm going to get destroyed

Channel: Pixel Helmet

Views: 58,927

Keywords: unreal engine 5 health bar, Unreal engine 5 damage system, Unreal engine 5 health system, how to make a health bar in unreal engine 5, unreal engine health bar, health bar unreal engine 5, unreal engine damage system, death health unreal engine, unreal engine health bar tutorial, how to set up health and damage unreal engine, health system unreal engine, health and die system unreal engine 5, ue5 health system, health bars unreal engine 5, health bar ue5, unreal engine health

Id: PxTpmyWH8Qg

Length: 28min 8sec (1688 seconds)

Published: Mon Jun 20 2022