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

foreign 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 enough about how awesome you are back to the video so what we're going to be doing in this tutorial is essentially setting up a very simple half bar for multiplayer for two different characters so on the left or sorry on the right we have a window for our server you can see over here and if I have some debug keys I can reduce and increase the hit points and it will affect the the health bar over here we also have some debug information for clarifying and some of the understanding behind this on the left we have our client and we can also use one and two keys to change its health bar over there so that is the the concise picture of what we will be creating in this tutorial welcome back in this tutorial we are going to be making a very simple uh health bar system showing you how it's done for multiplayer um this tutorial is based upon my other tutorial for health bar system showing you how it's done in a modular convenient fashion if you run into any issues if you don't understand something along the way here I will leave links down in the description for both replication and for that tutorial so you can get some understanding about that if if you're not following along everything here because this one will be a little bit more focused on the actual achieving the multiplayer part of the help bar system and not so much explaining all the different parts that I've already gone through in both replication and health bar system so starting off what are we going to be doing well we have this third person template here to begin with and we're going to be making use of a few different things we're going to be first going into our third person character our character will be representing having our health system to make this easy and convenient I'm going to be creating variables but you would most likely have some kind of component for health or something like that but for this we have our let's say current hell and which is going to be the help that you have at one point in time which will be afloat we can compile and set this to be a default value of 100. by the way I'm also using unrelenting 5.1 in this tutorial if you want to follow along in the same version another variable we wanted to have is Max health and this is so that we can make a determination of how much health do we have in percentages so our current health is the amount of Health we have out to our Max health value in this case we're going to be setting the max Health to be 100 also for simplicity's sake like so and that's essentially our our health system like so now we're going to be needing some elements on our for our user interface so we'll be creating a let's go create a folder and we can call this our UI folder inside of here we're going to be making first a user blueprint for uh on the type user widgets we can call this HUD this will be our general encapsulating out of everything where we can put our different UI elements so this one will be very simple we'll just put a canvas panel in this one and the reason for that is we can place our elements in our Hood wherever we want to have them and that's not completely done with that we'll be coming back to the HUD in a moment and next step is we're gonna be creating our health so we'll go to widget blueprint again we'll create a user widget we'll call this w for widget and health bar inside of our health bar if we open that one up we're going to have a few having a few elements we're going to be having a progress bar as our visual element here and this is what it looks like to make it more health-like we'll change the color to green and we'll also open up our style we can put a value on percent here for 0.7 or something like that so we see what it looks like when it's partially filled let's have a background color here and put it as dark as black even so we see what is not filled and what is filled so it's just for clarity's sake um so that's the visual component of this next up we can remove our tick and our pre-construct in our yeah we didn't want to remove the construct one we want to keep that one so this event is where we will be kicking off our logic when this health bar is created so what we want to do here well we're running in our widget so we want to get our player Pawn in this case so get a pawn you can see we have a get player Pawn that's the wrong one we want to get our owning player bomb so this is the one that the widget is actually referenced to be connected with um this one we will then be casting in the construct because we need to at one point get the proper uh class for this so we're going to be casting this to our third person character which is the the blueprint character for our character and the reason for this is we want to be able to react to information being Happening Here so what we want to happen well if we go back to our third person character what we wanted to do is we wanted to sort of notify anybody who's interested that our help has changed so those that are interested in our help being changed they can then react to it are UI widget being one of those so that it wants to change the display of our help being changed so we'll create an event in the faster dispatcher sorry and we'll call this one Health changed that is simple and to the point we want to add a input we want to build the type float and we want to say that this is our health percentage so from this we'll get our health percentage so going back to our health bar we can now say that we want to bind help changed this means that we will be connecting this object with this binding event here to make sure that we somehow react with this event being executed and we'll drag out from here and add an event to have our own event that should trigger when this happens so help was changed is what we'll put here like some and then we want to actually make use of this percentage and this is super simple we have a progress bar actually let's choose a different name for this so Health uh for Press Bar so so a good name we take that one out here's a reference we say we want to set percentage percentage is um the the value that we represent in our progress bar over here for how filled it is so we'll just be setting these values like so and now we're done on the widget side for the help bar at least so we'll save this close it out go back to our HUD we say we now want to add our user created help bar here so we have a help bar we move it let's say up here and let's put it down a little bit we can scale it a little bit let's have it that size that should be visible enough for our purposes compile and save and we're done with the HUD okay so what we want to do now is when this character is possessed which happens since this is for multiplayer we can't do the events on begin play because we can't know for sure when those are going to be run and watch sequence and stuff like that depending on how the multiplayer game is created but the event on possessed will happen when a controller is assigned to a specific Pawn in this case being the third person character so we'll go to our functions we'll find a possessed event here the possessed event will be triggered by this controller when it has taken control of this Pawn so what we want to do here is essentially say when this has been happening we want to create our uh our user interface for this so how we do this is we'll create a custom event we'll call this client create UI and the reason we say client here is to show that it's a client specific event because UI live on the client side they don't live on the server side even if there's a server playing as a listening host a listen server it's still going to be created like this so we'll set this specific event to be replicated run on owning client so the owning client will run this code from here we will say create widgets we'll say that we want to create the W HUD class which is our general HUD and the controller that we wanted to send in here is going to be our controller that is running this character so get controller right it needs to be a player controller as well so we'll make sure to cast it first this will just happen once so a single cast shouldn't be a problem at all performance wise like so it might be nicer to have this done once and then have it saved as variable and use the variable of course but for simplicity's sake this will be fine then on the process we'll just say that we want to call the client create UI event there we go so now we have set up the the whole Logic for creating the hardware that for this character when it gets possessed so that's all good and fine now we need to make sure that the information for this UI element the widgets are getting the the information that they need so since this is going to be for multiplayer we're going to be going to our current health and we're going to be changing it to replicating and replicating on notify this will both keep it replicated and also create a function which you can see over here which triggers whenever the health value is changed our Max Health we will also change to be replicated but replicated alone will be fine here because we have no use for the function for when it changes like so so now we have a function here called on rep current health so when current health is changed this is called what do we want to do at this point well we want to essentially broadcast that our health has been changed so what we'll do is we'll call the health changed so this is the dispatch that we're being calling we are calling and now we need to figure out what is the health percentage so we can make a function for that function will say um get helped percentage that's a good descriptive name and this is very simple we're going to take our current health and our Max health and we're going to say that the current health divided by the max health is going to be the value in percentage for our health do a return node here and we'll hook up the result over here like so we'll also go over here and click in pure to make sure that this is a function that doesn't require an execution pin to run which will make it a little bit cleaner file and save and we can go back again now we can say that we want to get our health percentage and we want to set it and we want to call the event dispatcher with that information and that we're going to be done here like so so now we're actually uh every time it's getting changed by this information we are saying our health has changed and this is our new help percentage so anybody who wants to know it gets informed about it now uh to make this even clearer we could also add a print string and just have it type out what is going to happen here so we'll do it on append and we'll say Health changed to and then we'll set in the value that we have as our help percentage here so that will be a value between 0 and 1. that will help us with debugging so now we have essentially everything that we need in place here the the remaining part is now that we need to have some sort of debugging to visualize what happens when we take damage so if we go to our folder again we try to find our I'm not even sure if this has a I think it has a player character and selected game mode player controller it has a normal play controller okay let's create a new play controller we'll go to blueprint class and we'll choose clear controller so code BP player controller and we'll make sure that our selected game mode here is going to be using our new play control that we just created instead and inside of this one we're going to have in a very small amount of logic we are essentially going to be doing a key one which will be our key for saying that we're taking damage and the key to that will be saying we are healing damage that's the point of this essentially and so the controller here will say in this case I'm taking damage in this case I am receiving health and we do this by doing an apply damage like so and we wanted to say a specific damage for a specific actor in this case we're going to be injuring and healing ourselves um the third person character needs to implement this event so if we go to the event graph and we go to we can have it under here type in any damage this will be the event that runs whenever we are getting informed that we're taking damage and what we can do here is essentially saying that we're going to set our health to be our current health subtracted by the value that comes in here and that's all that the event damage will do in this case so what does the player controller do well the play control is supposed to send this information if we look over here you can see that this hurts the specific actor with generic damage Target is gameplay Statics Authority only this function only executes on the server since this is a player controller a player control can exist both as a server or as a client but it needs to work as both of them we will be creating an event to make sure that we have a server event a custom event we'll call This Server and then damage and we'll let this one take a value in here so we can make it a little bit more modular and we'll essentially say to this one that we want to get controlled on and say that that's who we're supposed to be damaging and from the one key we do server damage copy paste this information over here and then we say when we press one we take 10 damage and we press 2 we get minus 10 damage meaning we're essentially healing like so um yeah now this is in its entirety all the logic that you need to keep it running essentially sorry about that um so now it will run and update as we are playing along uh the the only thing that's missing right now is that we don't have an initial value in our UI we have a debug value which will be the value that's being shown if we do the play here you can see that actually we can't see it yet at the moment need to of course also display our widget so yes here so we have created our widget and we need to add it to our viewport of course so we'll do it like so and now I can probably demonstrate so pressing play now you can see here's our element for our health if I press one or two you can see we get some debug information over here but we also get um our help are moving the problem was if you noticed in the beginning here we have where it starts off as our start situation and then it jumps to 0.9 because it goes from it thinking that we have 100 but doesn't display at the beginning so we need to make sure that we're displayed in the beginning so when we are actually adding it to our viewport here we also need to make sure that we are uh that's not what I wanted to do we want to uh call our health changed function we could not go with our rep function because it's not like a normal function we don't have control over it like that and we'll get our help percentages over here so this will make sure that once it's created we'll also send out a ping sort of saying this is our starting health so if we do this now we can see that we have our proper Health now and one M2 will increase and decrease it so let's try it out with multiplayer we go over here we say two players and we say net mode instead of playing Standalone we play as listen server this will make one of the clients as a server and one as a client I think I said that right we'll make sure that they're also in pi Windows we'll get both of them at the same time so you can see over here this one over here is client this one over here is a server they both have help bars and if I press one here you can see it goes down press two it goes up and if I go over here to this client we can press one and that nothing happens and two and nothing happens so what does what is causing this you might ask well this all Harkens back to what I was talking about earlier which is that in our another character in our controller we have this server damage which is only executing on server but for the client when we press one and two here we are running the player controller on the client side it doesn't have authority to apply damage so this event over here needs to be designed to be run on server so when a client controller calls this it'll call the server event which will say there's supposed to be some damage applied over here trying this again this should hopefully be clear now we have a client we press one it goes down we press two it goes up we go to our server same thing works there and they're independent from each other I hope that this explains how these things work together uh so it's better to understand now um yeah that's the best I can do I think to explain this anyway that's going to be all for now keep on learning take care 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: 7,542

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: OGbkAF504Gw

Length: 20min 36sec (1236 seconds)

Published: Sat Dec 31 2022