How to build an enemy Health bar in Unreal Engine 5 the right way - Tutorial

welcome back so in this tutorial we're going to be going through how you can create a HUD like this where you have a health bar which you can then easily and very cleanly and performant update something like your health for example now this health bar here is connected to my HUD it's my user interface for me as a player but we also have over here a AI character which has a health bar which is decreasing just like mine is now because we're both standing inside of a pain volume which is causing damage to us and our WIS is updating as this is happening so this is what we will be checking out and creating today so follow along all right so let's create a flexible and performant health bar and make use for it for both our player character and also for enemy AI in different ways so um starting off this is Unreal Engine version 5.3 uh this will work in any lenson version there's no difference between them um unless they change something very drastically in the future of course uh in addition to that we're using the third person character template as our base just so we have something to play around with and yeah let's get started so the first thing we do is we go to third person and blueprints and open up our third person character this will be our our base for what we do things inside of inside of here we want to add the ability to have some health displayed so we will be making a very simple system something that represents a probably more complex system for health uh so we'll do that by creating a variable called Uh current health so this will be our health at any current point in time uh we'll change the type to float in addition to that we'll add another variable we call that Max Health the reason why we're adding another variable called Max health is we need to have a reference point for our current health so that we can calculate what our percentage actually is at any point in time so now we have variables to store these um values we can actually start with giving some the default values so we'll give the current health something like 90 and Max Health something like 100 just so that we see that it has some health but not all the health so that's it's easy to see that there's some distinction there uh to make these variables easier to use and work with we're going to create a function we're going to call this function get current Health percentage and all that is going to do is we're going to take our current health and we're going to take our Max health and we're going to divide our current health with our Max health health and that way we get the percentage that we currently have of our health so returning the value here will be the value that we will be operating with later on we'll name this something like um Health percentage that's fine we'll also make the function pure by checking the checkbox and compiling because we're not writing anything here we're just reading values so that's good U so in our event graph now we can find some empty spot and we want to make use of our uh values now uh to display for the character we currently do not have any such means so uh first of we want to go to our content folder and create a new folder call this UI open that up and we'll create a user interface widget blueprint of user widget type we'll call it w health bar so this will be the widget that represents our health so this one we'll be keeping very simple We'll add the component called progress bar a progress bar is just a bar that shows a value using the percent value here so you can see that it's it's more filled the closer it is to one and less filled uh and completely EMP at the zero value so this is what represents our health in this case uh inside of this uh graph we're just going to be removing the pre-construct and the tick event for now because that's all that we need to do we will be coming back to this in a little moment for now we want to go to our content folder again and create another user interface we get blueprint and this one we will call W uncore HUD this will be the representation of our complete user interface as a player um and the health bar will be a small portion of that so opening up the HUD We'll add something called a canvas panel a canvas panel is panel that allows us to have um different widgets oriented in our user interface in different parts so that they're easy to place out essentially having just one canvas panel in our HUD is fine you probably don't want to Stack multiple canvas panels or have them in multiple widgets for performance reasons so one Canabis panel is fine here then we go to user created we scroll down and find our help bar we drag it out we can place it somewhere make it of a certain size that we're happy with maybe even anchor it to the middle of the top screen something like that so it keeps that position and that's it so now we have a visual representation but we won't see it in the game yet so we go back to our third person character and make sure that we can show this we'll create a custom event somewhere here where we are have some space we can call this setup UI nice and clear name we right click and create a widget and we hook it up and we say that the type that we want to create is our HUD because in our HUD we have put in our help bar so it will come with it we'll then make sure that it's added to our viewport so we can actually see this help bar like so but currently we're not calling this anywhere so we'll make sure to do that but by going up to our begin play here and in the end here we can just say we want to call our setup UI function like so so already now we should be able to uh test this out by clicking play and we can see that we have our help bar here so that's fine everything is working so far that's good okay so now we want to make sure that this help bar is actually changing and we'll do that by creating some something called a any damage event here so we have this one here called event any damage this one happens whenever we take some form of damage so we'll do the following we'll take our current health drag it out we'll say that this value is supposed to be subtracted with whatever damage value comes in here and after that we say that our new current health is going to be this value we now have calculated so this is how we were going to taking damage very very simple so uh to demonstrate that this is working we're going to be clicking this little closed eye over here on current health like so and then we're going to be going to our map and then we are going to be going over here to quickly add to project and we're going to type in pain pain allows us to find a pain causing volume which is a volume we can dry out into the world I'm pressing uh R you can scale this one so we'll scale this one a little bit so it's a bit larger hopefully you see the yellow edges here so they're encapsulating the starting location here now for our character so if we press play now our character is inside of this pain volume it is getting pained um it's causing damage and by default it sets to doing something like one damage per second and we have 90 health so one and a half minute should uh be all that we can do without dying essent going into our outliner now we can find our third person character and we can click on details and we can see that our health is somewhere we can see here 62 61 it's slowly ticking down so we can see that the health is actually being affected and that is because of our uh damage event that's going running over here uh but our visual representation here is not doing anything so now we need to have our visual representation actually reflect what kind of Health we have going into our health bar we can if we wanted to and this is where usually people go astray you can say that we want to make sure that this percentage value that we talked about earlier is supposed to be reflected by the help that we have and some people go and say let's go click bind and create binding and the inside of here we can see that okay you can get a percent vage and this percent Valu is what is actually going to be driving this um this health bar so if we in this case go and say that well we want to take our uh character so we get our owning character can take out player Pawn for example we have our character over here we could cast this to a third person character by doing so we get access to our variables inside of it so inside of here we have for example get current health can see over here or we could just immediately go for our get current health percentage uh function that we created and then we can go and say well okay now we can calculate what our health is so uh doing this we can now see that our health up here is actually updating as we are taking damage now so what's wrong with this well uh to demonstrate this what we're going to be doing is we're going to be going into our health bar and we're going to be saying inside of here we're going to call something called uh random color print random color this is the method I have in my helper class going to say damage no we're going to type in health updated like so compile save and then we run and now you can see here we're getting all of these messages and each of these messages is representing of us updating the health bar once now you can see that the health bar is actually reduced once every second but that is not how many messages we're actually getting here we're getting as many messages here as we are getting ticks which is related to your frames per second in this case the game is running at 60 frames per second so we're getting 60 updates even though we're only updating our health once every second so this is of course highly unoptimized and unnecessary essentially so what we're going to be doing is we're not going to be making use of this ability or this functionality so we're going to go back to our designer and we're going to be saying that we don't want to have this we remove the binding like so compile save go back to our graph the get percent function is still here we'll make sure to remove that we don't want that this is so instead how are we going to get this information well we're going to go and create something called an event dispatcher so in the third person character we're going to create an event dispatcher down here we're going to call this one Health updated this is essentially like subscribing to a YouTube channel which of course if you aren't already make sure to subscribe on the YouTube channel down there uh and everybody who is subscribed gets this message so inside of this Health dispatcher or event dispatcher we can add a input and say that we want to inform whoever is interested that this is our new current health percentage so at the point when we're taking damage for example is a good point to check when we're or update our health so we'll say that we want to update our health at that point and we'll make sure to hook up our function our get health percentage function into it as well so we have that value set now um the the the what we're doing here currently is a little bit we can make this a little bit cleaner we can make a let's make a custom event we call this uh update health and we'll just remove this here and put this over here and the reason why I think this is a little bit cleaner is uh when we call update Health here now we don't show that we need to know about any kind of values we're just calling it over here and when we're setting up our UI we need to make sure that it's actually updating as well once because when the UI is created it's going to be getting the value of whatever we have set here as the default and we don't want that to be our first value when we come in because it might be inaccurate so we will be making sure to calling our update Health here as well now at this point in time we're going to be sending out these messages and we're going to be losing our health but our health bar as you can see here is starting at the wrong health and it is not actually updating why is that happening well it is because our health bar currently is not subscribed to this event and that's what we need to add now so going into our content browser again we can go we can keep it here actually we'll right click and we'll create a blue blueprint and we create that blueprint interface and we can call this BPI set UI owner or something like that inside of this blueprint interface we can create functions that we make use of and these are sort of like promises that anything that implements this will have these functions available and they may be implemented or not but they are at least present so here we can say we want to set um UI owner and we can take as an in parameter here that we want to have a let's take a third person character so whoever is we can call this also the the UI owner so in this case we're saying that whoever is being sent in here into this function is going to be whoever owns this UI okay so in the case of our third person character over here we want to tell our interface or want to tell our widget that that we own this interface not interface this this UI now in the heal bar here we could just go here and say something like um get owning uh player pawn and from here we could do something like uh cast uh to third person character in the case if we go over because the the person who owns this um UI is going to be this uh person this player that we are and from here we have the ability to then bind to our health updated um event dispatcher and that way we are subscribed to it and then we can create an event that says this is what we should be executing when this event happens so in this case we can say that the health has been updated what do we do in this case let's see I can spell a little bit better like so and in this case we can say that well let's say we want to print not print a random color let's just say we want to print a string and that says hello so in this case if we just run this now you can see here we get hello over here because this is and you might not notice it but every one second we're adding a hello and then one old message is being faced out so we are actually having our health bar here bound to the or subscribed to the event dispatcher now and it's actually getting information from it so at this this point we can actually say we want our progress bar to have its set person to be the value that we're getting here from the event dispatcher because we are providing the actual Health here so in this case we would actually be getting our health updated now at this point for the player which is fine and we can leave it at this for now uh but this is going to be a problem and we can start working on showing that by creating our AI character now that we're going to be making use of that also will be having a health bar so let's go to our third person character and create a child of third person character and we we'll say that uh we'll make a child call it haven't h BP AI character whatever the reason I'm making a child now is to inherit some of the functionality that we have here so that we don't uh have we can reuse some things if we wanted to which is nice uh this and and that's mainly the the whole point here we we could make it separate completely separate ones and have some duplication and stuff like that if you want to it's up to you it's not really the point though um but inside of our AI character we now want to do similar things here but in our AI character an AI doesn't have a user interface uh it's not a human it doesn't have something representing itself in front of its screen because it doesn't have a screen but you may want to have a representation of Health for an AI character or an enemy or a friend or whatever and you still want to display it in accordance or in relation to this character and one way to do that is by adding a component that is of the type widget so widget here we can say uh if we just click it like this we might want to actually drag it under our mesh so it's actually parented to the mesh um this will represent its position right now so if we drag it above our head which is usually where you have health bars uh we can go to the details of our widget component and say we want to have the widget class of health bar and Bam there it is you can also alter some of the dimensions to how you want it to look maybe you want to have a width of 20 maybe you want to have a size of 200 in width or something sorry not this was not width this was height this is width so here here you can have the dimensions of whatever you want to have and you have the options of making it World which allows you to see it like this you can also have it as screen space which won't show it here but would make it so that if you had a character in the world here like so he would have a health bar above of his head and it would be shown regardless of where you were looking there are some pros and cons with each of these and we'll get back to that in a little bit but for now uh let's go back to our AI character and put this back in World space for now so now we have our health bar here and we want to have this updated in accordance to the heal of the AI character now so um to do this we can't make use of the functionality that we have in here because uh owning player Pond first of all the AI is not a player it is an AI That's a different concept there are two different things you have a controller that's called a player controller which is handled by a a human player and then you have an AI controller which is handled by an AI player so so the concept with here is it can't actually get this value it will get something erroneous so we can't have this functionality inside of our health bar because our health bar is being used as both our by our HUD over here and by our widget component in the AI character we're using the same thing so it won't work so we'll need to change this now how we'll do that is by making use of this um interface that we created so inside of here we send in who is the UI owner so in our health bar let's make some changes we'll go in here and say class settings we want to add a interface and we want to add the BPI set UI owner compile and then we right click on that and say Implement event so now we're getting an event that says like at some point someone is saying hey this is your UI owner okay great let's actually take all of this code and just drag it down here and say okay well this is going to be my owner so instead of the player Pawn over here it's going to be this character that we just got sent in and then everything like this should hopefully still work now if you were to play here this will not work for our character because we're not actually informing our weed about this information yet so we'll go to our third person character at the point when we're setting up our UI here we get our HUD our HUD knows of our health bar so here we could say something like uh health bar so we get the widget for health bar and inside of here we can then say that well okay uh at this point the reason we're moving this is because we want to make sure that we're subscribed which we can only do if we know about uh who is the owner we set UI owner and the message like so in the Darkness and after death we want to try and update the health otherwise this will be in the wrong order the UI order order owner in this case is a third person character and we're inside a third person character so we'll just have a reference to ourselves and say that we are the owner of this interface or this UI sorry and now you can see that our bar is back to working here for our character and it works fine so now we have the the the basics ready for actually building upon this the the the health bar is ready to make use of this uh but in our AI character we're not actually informing about this yet so we need to make sure that we do that so inside of here we have our begin play which is fine and our begin play will look like our parents begin play which means that we will be going through all of this information we cast the player controller enhance input blah blah blah all this this stuff since we have in our AI character and AI controller this will fail none of this will run and nothing here will happen essentially so what we can do here is either remove this or after this say that we want to call setup UI because we want to set up UI for this character as well even though the UI is completely different now again we had set up UI over here in the end but since we're going to be aborting this if we have a AI controller that doesn't work so we set it as an extra call here in in the AI explicitly just to make it clear we remove the begin overlap and the tick we don't need those now inside of here we have our setup UI available but if we were to call it and call our parent setup UI we would be getting this information we would be trying to create our HUD add it to viewport etc etc this doesn't work for an AI since it doesn't have a screen like we talked about earlier so what we want to do is we want to call setup UI H set up UI so the event here setup UI we're just going to be overloading by doing this so we're not calling the parent here or anything like that we're just going to be taking this one so it will not be running the code that is being run over here and instead here we will run our own code in this case we have our widget over here from that we can say that we want to get our user widgets this means that we will be getting our health bar although it will be of the type just widget object reference it doesn't know that it's a health bar so we can't actually go and say something like um get progress bar or anything like that it doesn't know about it but we don't really need to because we created an interface we can just say that we want to set UI owner and message and say that the owner for this should be ourself which is this AI character which is deriving from the third person character so after that we want to call update Health which is a function that we have from our parent again our third person character and our update Health just says call the health updated with the current health percentage so with this done we are almost set up now we just place a character in the world here like so and then we could see that among other things we can see that the health bar is not being shown unless you're watching it from the front so it's something that we will be addressing in a little bit but for now we're going to be putting it like so instead now if we were to play test from here we can see we get jumped in we can see our health bar here it's being decreased we can see the health bar over there and the other character it starts at 90 just like we said to default values but it's not getting its life diminished it doesn't mean that it's not working however if we exit here we can see that the bounds in my case here might not be for you but they're not actually encapsulating this character so if we move this over the enemy character press play you can see that our health bar is not being diminished but the health bar of the enemy there is now actually updating and showing that for us so now we're actually having the same system which is that the health bar here is uh again this is this is coming in as a third person character so we don't even need to cast this anymore we can remove it like so so this is the movie that weed over here now it completed very quickly so our widget is essentially getting a call at some point saying that this is the person who owns the the UI make sure that you listen to its information that it wants to relay about the health being changed and then we have in our third person character just when we set up our UI that we say to our Hud's health bar that we are the health owner and then we run the health updates and the AI character when it runs it says setup UI and the setup UI calls the setup UI owner so that it knows who this UI belongs to so that it can update its Health when this character's health is actually changed so that's really all you need to get this to work and as an extra we can also go and see uh here when we update our health uh over here we can say that we want to call our random colors yay and we say health updated and then we play and we can see that that is how often it is actually updating the health now which is only the times when it actually needs updating when it's actually being changed not on every single tick which is completely unnecessary and not very useful so yeah this is how you easily create a very flexible and performance system for this kind of thing but in addition to this we may want to have this um widget be also a little bit more flexible for us we might want to have it actually show towards the camera so let's fix that so to fix our health bar we're going to go into BP a character we're going to click on our widget component and inside of that we can see that we have materials here if we click on the magnifying glass we go to that part in the browser double clicking on that we can see that it has a parent material so we can click on that to get to the parent material if we open that up we get to its parent material by clicking on the magnifying glass and then we double click there and now we have reached the end of the chain so this is the material that all of these uh that that is used as default for the the widget components so we'll close down these two other materials and this one that we actually found that is the parent we're going to make a duplicate out of and the duplicate we're going to be keeping the name and we're just going to be moving it to our UI folder click move here then we'll close down that inside our UI folder now we can open up this material and inside here we can make some changes we're just going to be doing minor alterations that will allow us to have the health bar always show uh towards the camera and to do that we're going to be right clicking and then taking something called align mesh to camera so this material function we will be hooking up the world position offset to the world position offset over there and then we need to have some values over here so we're going to be holding down the three key and left click three times to get three different vectors we're going to be giving these values the first one we're going to give minus one in Zed the second one we're going to give minus one in X and the third one we're going to give one in y and then we're going to be doing the following we're going to drag them off like so we're going to drag off from one of these we type in transform press enter this transform Vector we copy to the other ones as well I should have before I did that actually let's remove this and go to this one first we want to say that we want to translate from instance and particle space which is local space to World space and then we copy two more of those and I'll be leaving the link in the description for uh explanations behind uh how you can use these kind of things like the line meesh the camera uh now that we have this we can apply and we're done here and we can say that in our AI character we want to make use of this material that we have just altered put it over there and go into our third person map and we can see that if we move around now with our camera we have a material that is moving around uh towards us and it can also be obscured by different things in the world because it is using a world position so you can have something obscuring it if you want to as well so yeah that's how you do that a big thank you to all of you who like comment subscribe and share my videos or through other means support this channel you are what makes this channel grow and become a resource for other people to learn from

Channel: LeafBranchGames

Views: 2,510

Keywords: learning hub, unreal engine, tutorial, unreal engine 5, blueprints, game design, game dev, 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 and UI for Unreal engine 5, the right way, Health bar, replication, multiplayer

Id: lz5U3oaEqTE

Length: 32min 0sec (1920 seconds)

Published: Thu Apr 11 2024