How to build a Health bar for Unreal Engine 5 the right way - Beginner Tutorial

[Music] before we continue with the video if you like what i'm doing here on this channel please consider subscribing it helps the channel a lot anyway let's get back to the video so this is what we will be creating today we'll be making this very simple help bar and we'll be doing some good habits of creating it and in addition to that we will also having some debug volumes here which allows us to take damage while we're on this ramp to see that it's actually working properly and that's pretty much all welcome in this tutorial we are going to be looking at some ui and specifically we're going to be creating a health bar we will be looking at some simple aspects of the things that you need to create a help bar we will look at some bad habits that you can make along the way if you have learned from other places we will look at some good habits when it comes to having as alternative for those bad habits and we will generally be discussing a little bit about how the functionality works and such so you get a better understanding of it so let's get started starting off here i have just a simple map i have created which has nothing in it and we want to make use of some assets to begin with so let's get some of those so here we are on a page that has some free assets for us to use both commercially and free and these will do fine for our purposes so these are an example of the things that you get in the pack if you want to get this i'll leave the link down below it's the same pack we used in our other user interface tutorial and you just click on download here if you want to get it and you can either give them a gift in monetary value for downloading this if you want to or you can just click the no thanks link if you want to try it out for free and once you have this downloaded we'll get back into the engine back in the engine with the assets downloaded we can now go in and see what we want here so you have a we're going to be making a progress bar today for the help bar a progress bar is a bar that can have different values assigned to it and it will be more or less filled giving you a representation of for example health or mana or anything like that in this pack we get a blue green light blue and a red one since we're doing health red makes most sense in these different folders here you can see that they are using three different images to portray the progress bar the differences between them are the height on the different bars so you can just choose one that you like i'll get the number three one for example drag and drop it into the project so you have it there and then we are done with that part so now we have our three different images that we can make use of next let's set up our health in this case we are going to be keeping it very simple we're just going to be going into our third person character getting our blueprint for our character and getting it up here and we will be making a very simple representation of our health bar system hopefully you will have a better system than this maybe something modular in a component or something like that but for the purposes of keeping this simple we will be having it as simple variables on the character so current health will be our health denoted that we have at any specific point in time and we'll make it over type float for example then we'll make another variable and we'll call this maximum health we don't want to have just one health value that's done and we need to have a maximum health value as well because we need to know what are the limits within the health can be moving and in addition to that we may want to create some functionality that allows us to change this health so for this we will be making use of the damaged event so whenever we get damaged some some other actor applies damage to our character then we will be getting the event that's called any damage so the event any damage will be triggered and it will send in the damage that were taken and essentially what that means is that our current health whichever value that is is going to get subtracted by the damage that is coming in and then after that we want to set our current health to be the new value however this value could be a negative value which means that we're adding to the current health so we want to make sure it just doesn't exceed the maximum health so what we'll do is we'll drag out from the result here and we'll say clamp and you get to see a few different clamp options clamp float allows us to assign two float values that the value needs to be within so if it is below zero it's gonna be turned into zero if it's below one it's going to be one in this case we're however gonna be using our maximum health instead as the the top value for this and after we have done that we are done ready to set our health because this value has now been properly uh adjusted for us and our needs now that we have done that we have changed our health at some point and now we need to have the user interface react to this so how do we do that well let's start off with creating our user interface for our help bar we will go here and we will create a widget and we'll call it we'll make it top user widget we'll call it w for widgets underscore health bar and in this case we are going to be doing it a little bit simpler we're going to be having this represent our whole screen not just the help bar actually nah never mind we'll we'll do it properly we'll make another use of widget which we will call and we'll make it off the user widget type w underscore hud so this will be our our hud and then our hud will be containing a health bar we can make it that way it's fine um so let's start off with the help bar our health bar here we want to have a progress bar for and that is the whole point of this health bar tutorial how a health bar works is fairly simple and it's just a matter of having a value which in this call is called percent and it will have a value between 0 which is empty and the value of 1 which is full so any value in between this is essentially how much the bar is supposed to be filled and you can see it as a representing of percentages so 1 stands for 100 and 0.00 of course you can also choose some different options of how you want to fill it if you want to fill it from the left side right side if you want to fill it from center filling outwards oops oops oops hold on there we go so you can see like that you have a bunch of different options here to begin with to and you can make of course more advanced things than this as well we'll keep it from left to right just keeping it simple and you can also choose some bar styles and some paddings and all kinds of different things like that you can also change the color you want to fill it with if you want to have a color for this we are however going to be making use of images for this when you're using images for your progress bar you probably don't want to have the fill color and opacity set to a color because that will tint the colors that you already have in the images of course this might be what you're after but if you want to see what it's supposed to look like you want to have white color so it doesn't influence it now currently it is also displaying our object air process bar a little bit too big to large so we'll change this from fill screen to desired and we'll get something along the lines of how large it will actually be in this case it will probably be too small as well but we'll start off here we open up a style and background image and fill image over here here we can put in our images for our progress bar so if we put in our background static as our background image this will be whatever is not filled and then our fill image will take whatever color we have in this case i chose the red one put it in there and if we zoom in a little bit you can see what it looks like if we change around the values now and what i mean about the [Music] the color over here you can see that if we were to change color now it will alter what the end result will be and this might not necessarily be what you're after so that's why we chose white we also go up here and we change the draw as to be images for both of these and you can choose a tint if you want to as well so you can have a tint for the the background specifically or a tint for the filling color specifically if you want as well so those are separately controlled here if you want to have them done that way now if we want to have a specific size for this one we can always just go to our progress bar and we can choose to wrap it with something like a size box and then in the science box we can go and say we want to have a width and height override then we can say something like i don't know if we want to have a 250 length and maybe a 40 height or something like that that's what that would look like and yeah it will see what it looks like on the hood as a whole in a moment so let's say that this is what we want to have and let's go back to our hud and actually implement this in there so we'll go to our where did i create these widgets i wonder i have put them in the blueprints let's move them back to the health bar folder opening up the hud one we can now see that this is our hud and we can add a canvas panel here just so we have something to orient and anchor things with like so and since we have now created a user created widget we can now drag in our help bar and we can say we want to have it in the top left for example we click size to content to respect whatever settings that the actual widget has which is where we have the size box and such then we'll say we want to anchor it to the top left since this is what we want to keep it so it makes sense and we maybe want to have it something like 50 pixels to the right of the edge and 50 pixels from the top of that something like that that'll be fine uh now let's actually put the hud into the world now we can do this in many different places we can do it in the level blueprint the character blueprint the the controller putting this in the level blueprint for example would be really really dumb because it doesn't really belong there because health belongs to our character it doesn't belong to the level so what we're going to be doing in this case is we're going to be making use of our blueprint character and saying that it should be putting this into the world so when the character comes to life we'll say begin play event and we'll say we want to create a widget and we want to create the widget that's called hud and we want to add it to the viewport so this will take the reference of the widget that we created and place it into the world however this will work for most cases you don't always need to put in a player control object reference here but it could be good to do it explicitly anyway because sometimes you can run into issues when it comes to this we are currently in a pawn right now so we can actually just get get controller and we will get our corresponding controller without having to use a hard coded number to say which controller we want to have the problem with this is that we will be getting a default controller which is not necessarily a player controller and only player controllers are allowed to have ui elements so this we can cast and say essentially check is this a player controller and if it is then we can say well that's good then then we want to create this widget so if we were to have an ai that had the same character this would fail because it would be run by an ai controller not a player controller and it would not be trying to add something like a ui to its interface normally casts are not really great to use however when you use them make sure that you use them under the right circumstances in this case we're going to be using it at event begin play which means it will be run only once so it's not really that bad so in this case i will allow myself to do that yes so now we should essentially have when this spawns in we should be creating a widget of the hud and we should be displaying it for the character and that's exactly what we see so now we have a widget up there that's displaying our health it is however not moving and we need to change that so first of all we need to go to our character and we need to actually set some values for our character so let's say we want to have a value of 100 as our current health when we start and let's say we want to have something a little bit different for maximum health let's say we wanted 150 that means that we have two-thirds of our life um we now want to make sure that this value can be affected which we already have put in logic for here in the any event so we just need to have damage done to us going out here clicking the plus to an object we can type in pain i believe it's called pain causing volume so here we have a pain calcium volume and we can put it on the ramp or something like that so we know where it is we'll scale it a little bit so it covers pretty much the whole ramp that should be fine so if we go into this volume we should be taking damage and the details of this volume will determine how much so here it says damage per second one so if we put it to maybe 10 then it should be doing 10 damage per second so if we walk into it now we can take damage however we don't see that because our health bar is not connected to our health and our health is not being displayed but to demonstrate that this is working what we can do here is we can add a print after we take damage to say what our current health is at any point in time so anytime we take damage we will be printing up in the top left and we run up here we can see that we are going from 90 to 80 to 70 to 60 and everything is working fine okay so now we just need to connect the ui to have this information and if if you were to watch some tutorials and they will teach you really bad things to do they will go and say hey we have a progress bar over here we we want it to set the percentage here by doing a binding and they can say create binding and it creates a function which essentially says update my value how this works is and i'll demonstrate it just to show what this does uh it needs to get its character so in this case we have a we can get the owner of this um this widget that means we get the the player controller here in this case then we can say we want to get its um what is it something called um get controlled pawn so now we get we have we have gotten the controlled pawn here for example and in this case we don't know what kind of pawn this is we need to have a specific pawn that's called third person character because that's where we define that we have health so then we want to cast it to a third person character and we hook that up and at this point we can say get health for example because now we know what class it is after you have done this you need to have this value in between 1 and 0 which means that you need to get health and you need to get the maximum health and then you need to make a calculation saying this divided by another value is our value so current health divided by maximum health will give us a percentage value and then they do this and everything is fine essentially so when they play now you can see that we have our health bar is actually moving now this might look good and fine but i will try to demonstrate why it is not first we will remove the prints that we have in our character because we don't need to see when we take damage and instead we'll do this we'll go to our health bar and before we do a return here we'll put in a print saying help binding was called and then we'll press play now hopefully this should be raising some red flags in your head because uh pretty immediately our screen was filled up the reason for this is a binding is called every frame which means that even though we didn't stand in our volume here taking damage we were still updating it every single frame if we assume i was playing at 120 frames per second this means that this logic which was printing out this is run 120 times per second completely in vain in addition to that it's actually doing this calculation 120 times per second in vain it's also doing this getting and casting to a character this check every frame 120 seconds sorry 120 times every second so this is a really really bad way of doing things this is essentially the cardinal sin when it comes to ui if you see this being done just run in the other direction and don't come back from wherever you saw this happening so what we will be doing instead is something a little bit more performant although it might be slightly more advanced but bear with me first of all we're going to be going back to our designer and making sure that we kill this binding by clicking remove we'll compile and we'll go back to the graph and make sure that it is gone we have a get percent function here still we'll delete it there as well so the binding just points to the function which is supposed to calculate something while the the function itself is just the functionality okay so what we need to do here is essentially saying every time we have our health updated is a point in time where we want to tell our user interface to change his values right otherwise it's not really doesn't make sense so in this case we only have one place where we're changing values and that is in this place and what we can do then is we can say we want to have an event dispatcher for example we can say that health change is sort of a broadcast that we're making and we want to do it whenever health is changed and we can say that we want to have an input to it and we can say it's supposed to be a float we also can say that this is going to be our percentage health this means that we can drag this out we can say call and we can say call this broadcast whenever we have taken damage because that's one of the times when we can have our health changed so now we need to send in what kind of percentage help that is so we're going to be doing the same calculation as before we're going to take a current health and we're going to be dividing it with our max health just like we did in the binding before and then we're gonna send it out so now whoever is listening to this will also get the information that this is our current percentage health so our health bar makes sense that it would try to listen to this so what can we do then well when the health bar is created so on the construct here let's remove the tick and pre-construct we can say we want to get owning player but we can get our own player pawn immediately this is the short way of doing both i should do the first step of getting the controller then the owning pawn and yeah you can just do this to get the the owning player pawn immediately because we know it is a player pawn because we are in the user interface and now we need to have a to be able to listen to this event this broadcast that we're doing our third person character the third person character is the type of class that has this broadcast available to it so we need to make sure that we are listening to that type of um we we have that type of class essentially so we need to cast this we need to cast a third person character since this is a construct it just happens once this is ok ish then once we have that we can say we want to bind now bind we can bind on any damage that would give us the the situation of um that is when we are taking damage however we get sort of a race condition because if we bind on the same event here that happens essentially before we are calculating our health and we want to make sure that we are listening to an event that has happened after we have done all the calculations in addition to that we want to have our percentage health listening to this event we would only get our damage and we will have to get our current health and then do the calculations ourselves but you could do it that way as well you could do just listen to this event and then don't have well any of this logic for it and then just do the calculation in the bar but yeah we're doing it this way now so uh bind and then we say uh help changed so now we're saying we are wanting to listen to that event happening when that event happens we can just drag out here and add an event we can say health has changed and will get us an input the value that we have from the broadcast and we can set our progress bar set percent and it will change the values so if we now run here we should be able to run into this pin volume and you can see that we get the health updated and everything is working fine and to make a comparison then to see how much this is changing and working in the background compared to the binding we can add a print here to say that we have changed health and you can see how often that is done in comparison so you see the it doesn't do much very often at all so that's how you set up a proper health bar the only thing here now that you might be noticing is that we have a pre-filled value here let's make this clear and make it 100 and this value is differing from our value in our character which is currently starting out 100 out of 150 meaning at 66 percent so when we take damage this is only currently being updated when we take damage because that's when this is being called in here when we're doing the damage we're calling it which means that to begin with it will be showing us the wrong health bar it will be showing us a full health bar and when we take 10 damage you can see it jumps to its actual value that's simply because we don't actually update our health bar widget immediately if we wanted to have some basic functionality for this we could sorry when we're doing our begin play here everything is set up for our character and we have the proper widget and everything like that we could just call sorry call this event dispatcher saying our health has changed and then getting the information here now you get the situation here where we're trying to do the same thing as we wanted to do before here so what we can do is we can create a function and we can say get health we can click it as a pure function meaning it becomes a get function and we'll do a return node and we'll say we want to return a float value that is the percentage [Music] and now instead we'll put this calculation here so we'll get our current value maximum value divide it put them together and then we'll just hook him up like so going back to our event graph now we can instead of first of all we can use our function here to get percentage values we just hook it up here and then we can remove this from being done over here because we don't need this part now so we'll just do our sorry not that one we want to do this one get our function and send it in here instead so we don't have duplicated code so now when we press play you can see that the help bar is immediately changed to whatever value we start with and then it will continue to change if we take damage or get healed or anything like that so yeah that's it i hopefully found this video helpful if you liked the video leave a like if you did not like it leave a dislike leave any suggestions or comments you have down below subscribe and share this video if you want to see more like it in the future that is all for now keep on learning take care [Music]

Channel: LeafBranchGames

Views: 9,749

Keywords: learning hub, unreal engine, tutorial, unreal engine 5, blueprints, game design, game dev, unreal engine 5 beginner, unreal engine 5 tutorial, unreal engine 5 beginner tutorial, ue5 beginner tutorial, building user interfaces for unreal, engine ui design, user interface, design ui, design tutorial, building user interfaces, unreal engine user interface, Leafbranchgames, Good habits, Best practice, How to build menus amd UI for Unreal engine 5, the right way, Health bar

Id: bdsROh8mQZk

Length: 28min 1sec (1681 seconds)

Published: Sun Jul 10 2022