How To Make a Replicated Health Bar | Multiplayer | Beginner Blueprint Tutorial | Unreal Engine 5

foreign hey guys welcome back to a new tutorial video so in this video I want to cover a topic that I frequently guest asked inside of our Discord server and also on our YouTube videos and that is how can you make a replicated health bar above your character so let's get started and let's get right into the video basically what I have here in front of me right now is the default Inver engine third person project so if I go ahead and hit play you can see that this is the standard third person project and here we are going to set up the health bar Above This character's head and then we're gonna go into multiplayer so with a client and the server and then we're gonna check if the replication works at the end of the video so the first thing that I recommend doing is create yourself a little folder and call it something like widgets you might already have a folder like this and then we are going to create that help bar that we're going to be putting above the character's head so if you click on third person blueprints third person character and let's make this bigger now what we're gonna do is that we're we're gonna put that widget here on top of the character's hat so first let's go ahead and make that widget so if we right click here go to widgets click on user widget so let's do WB which essential with your Blueprint Health bar okay perfect then we go ahead and open this one up and then in here we are going to make the health bar so if you go to the top here you can see that their under engine has a progress bar so that's what we want to use and then if I just drag it in here like this you see that it goes full screen like this so what I recommend doing is that once we drag it in we can right click it and then we can wrap it with an overlay over here and then what we can do is that we can have inside of our health bar we also want to display the text so we want to display like 100 out of 100 health or 50 out of 100 out whatever your health may be and then I recommend that you select the overlay and then wrap that one with a size box and select that size box click on width overwrite and hide override and then the width would be like 250 I think is a nice width and the height can be 50. and then if we go ahead and click here on fill screen and click on desired then you can see what that actual size of this widget should be then if you go ahead and click on the overlay then we want that to be full width like this which it already is and then the progress bar instead of being to the left and to the top we want this to be filled as well then this progress bar we're going to rename it health bar underscore PB which stands for Progress bar and then this is the progress bar and then in here we are going to drag some text in the overlay so boom like this and then we're going to call this text our health stat underscore text make that a variable and then as preview text let's do 100 out of 100 and then we can put it in the middle like this we can make it a little bit nicer so let's do 16 and let's give some padding to the left here so if we do 15 padding and it's nice like this okay there you go and then if you go ahead and select your health bar then you can see that here you can set the percentage so if I do 0.5 you see that it's filled like this so currently the color is blue but you could also change this to something like red because it's held of course that we're talking about here so let's do it like this all right that looks good to me now this is ready to be put above the character's hat so back to the character blueprint we can then select the capsule and click on ADD and if we type in widgets now we can add a widget component and then if we select a widget component we can rename it to widget Blueprint Health bar because that's what we're going to be putting in here and then we can drag it up a little bit so that it's above the character's head so if you put it at set 110 that's a nice value and then over here with the widget Blueprint Health bar component selected we can then go to the widget class and over here you can select the widget Blueprint Health bar then you see that it pops up like this so it's way too big but then we want to switch it from world to screen space which makes it invisible in the editor here but visible when you hit play and then we also want to draw at the desired skill and what that does is if you draw it at the desired skill it will basically draw it as big as we defined it here so now we have it here to desired and we set the screen and we set the size to be 250 by 50 so basically if we set it here to draw at the desired size it will actually be 250 by 50 on our screen and keep in mind if we set this to screen then the widget is actually in your screen so it's not 3D in the world no it's actually overlaid in the screen and what this component does is that it then traces that world location and basically changes to the X and I so the the 2D location of the widget to that world location so that it basically is on the character's head all the time so if we now go ahead and click play then you see that this is the result already so if I walk around we have it on our screen and if you think that this is too big then you can simply go back into your health bar and then you can simply change the size here so let me do that real quick because I think it's a bit on the big side so let's make it like 35 by 200 for example and then let's also make that font a little bit smaller so let's make the phone like 12 something like this and now if you hit play there you go I think that's a little bit of a nicer help bar so now let's go ahead and make the help bar actually replicate it so that it works in multiplayer because right now if we go ahead and select two players go to players listen server hit play then I get myself my two windows you see that well obviously we can already see this component of each other so we see that both of us have a health bar but now let's make it so that we can press the button get some damage and that that is replicated so the way that we can do this is that first of all we are going to need some health variables that contain the status of our health inside of our character so let's call this health and then we can make this of the type integer because I think that Health should be whole numbers if you have health that goes into decimals that make it a float but let's make it an integer and then let's give ourselves a default health value of 100 so if you select the variable make it 100 and then what we do is that the replication over here we set it to be replicated there you go so that's our current health and then we want some event that can change this health so the way that we're gonna do that is that we're gonna type in keyboard o and then or let's say keyboard one so keyboard one just like this and then when we press this we want to subtract some help so if you do minus then let's go ahead and do 10 help every time that we click it and then after we subtract it we also want to set it again as the new value so just like this and then obviously since this is replicated we want this to happen on the server because replicated variables if they are set on the server then the server will replicate it down to all of the clients so the way that we're going to do this is that we have to install a little custom event here and let's call this update help and then we want this event to be of the type run on server and we want it to be a reliable event now when we press one we're going to call update help which is our little event if you double click it you see it brings us here and then here on the server we want to do the simple server side logic that sets this replicated variable and then the client will obviously be able to read this variable so if we have a little event tick here we can test that so the event tick runs both on the server and on the client so what we can do is that we can simply get our little Health variable and then we can say print string and then let's go ahead and print this value over here let's add a little delay so we don't get a huge amount of them let's do it like 0.5 seconds okay so then when I hit play replicate it here then you can see that both the server and the client start to print a hundred then on the client which is on the left here if I press one you see that the client now became 90 and the server is 100 if I press it again the client became 80 the server is 100 and then I can do the same here on the server so if I press it we can go to 90 80 70 60 50. there you go so that means that both the server and the client know about this data and that our application is proper now all we need to do is to get that replication into this widget so that that widget properly displays it as well so since this is held data that could change a lot because you might be in a shooter game where you regenerate health and where people are shooting at you constantly then what we're going to do is that we're not going to code this in the event based logic so what would event base logic mean that would basically mean that every time that your help changes you update the health in the widget so you will basically install an event in here that would update your health every time that the event gets called but since this is a value that could potentially change on tick let's say that you are on fire or something like that that would only take subtract your health then whatever you're going to do instead of making this event-based logic is that we are going to bind the value of our health inside of this health bar so that it is basically bound logic which means it gets updated on tick so the way to do that is that essentially this health bar over here is going to require a reference of our character so that this health bar widget over here can read the data from this character which is this Health Data so the first thing that we're going to do is inside of the health bar we're going to add a variable here and call this our character underscore ref which means reference and then this is going to be of the type of this character class so we're going to type in BP third and there we already get them so BP third version character object reference and then we are going to go ahead compile and save and now what we want is that we want this character class on the gameplay to set that reference for this WB health bar so right click and type in begin play and then we are going to drag in our health bar over here from the helper we're gonna type get widget from the widget we are then going to cast to the actual widgets Adobe health bar so type in cast to WB health bar and then we are going to hook this one up like this and then we want to set that reference of the character in here so this character reference so what we're going to do is drag over here and then type in set the character ref and then we're going to hook this up and the ref is our self because we are right now inside of the character class okay there you go so now that we are inside of the health bar widgets this character reference is valid and now we are going to basically uh hook it up so that we can display the correct data from the actual character in here so the way that we're gonna do that is that this text over here we're gonna go and click on bind now what you can already see is that you can have the character ref here and that you can fetch that variable so we can get that help date on here but obviously we got 100 out of 100 so we do not just want to bind the 100 help and display that over here so what we're going to click is create binding now as you see that brings us to this function right here and that function automatically gets created over here with an automatic text generated and then if you go back into the designer and click on the text you now see that here is that function so the first thing that I want to do is rename this function so if you double click it then we can make it look nicer so I think this is good and then let's go ahead and code this so if we drag in our character reference then we are going to right click and validate it and the reason that we validate it is that because essentially your widget will create here and then when we have a binding it works on tick so untick the first time this widget is going to attempt to read data from this reference here which might not be valid so if you have it as a period might not be valid and then that will result in an error for you so that's why we basically validate it and then we make sure that if it is not valid that nothing happens and that we don't air or out and then this only gameplay event can have its time to fire basically and then after like 0.1 seconds it will go off of valid and then it will properly work the way you want it to work so that's why we validated just to make sure that for that first point one take seconds it will not have an invalid reference because this might not have been set up yet so then out of here out of the character reference we're going to get our health variable so if you scroll down there you go get health and then we want to display that held as a as I said like 100 100 so the way that we're gonna do that is so we're gonna to type in string append just like this we're gonna hook this up here the off valid is going in here and then what we're going to do is that the health goes in here so let's put this to the right a little bit just like this boom so we want the 100 slash and then the max health over here a hundred so there you go if we now go ahead compile save and hit play then you can already see that this works so just look at the value if I click one we go to 90 on the boat on the client and on the server then we can do it again and that works then here on the server we can also click it and the client can also see it so that's properly replicated and then we just need to go ahead and make this health bar here work so if you select your health bar then we're going to bind the percentage and as you see the percentage goes from zero to one which means one is a hundred percent zero zero percent so here we're gonna click on create binding we got our selfish function we're going to rename the function to a nicer name put this to the right a little bit drag in your character reference then we go ahead validate it and then if it is valid we want to do the same here so we want to get our health variable and then we need to get this to a percentage so right now I see that we made this an integer so you could also change this to a float because what's going to happen right now is that we're going to have to type in 2 float to convert this to a float and the reason being is that since we are working with zero to one we need to get like 0.9 percent so if I want to divide this health variable by the max Health which would give us the percentage so 100 divided by 100 then let's say you do 90 Health divided by 100 they would get 0.9 but an integer cannot be 0.9 so that would floor it to zero so because of that we want it and basically convert it to float and then after you convert it to a float you're gonna do divide and then we're going to divide it by a hundreds and plug this in here and hook this up okay and there you go and then it works so yeah you could also change the health variable inside of the character to be a float type and then you do not have to have this conversion in here but yeah guys that's essentially it so it's a very simple setup let's recap Once More if we click one we are going to subtract some help only gameplay we have this character class setting up this widget component over here with a correct reference of the character then inside of the health bar widget we have this health bar over here with an overlay with some text and a progress bar and then in here we simply have two bindings so the health bar binding and the health text binding and that's all it is nothing in the event graph so let's go ahead and test it right now so if we hit play now you can see that right now our health is bowed at a hundred percent then if I click one we go to 90 click it once more we go to 80 and you see that that's properly replicated and then here on the right we can do the same so if I click it I can go down to 50. and there you go guys that's how you make a replicated health bar I hope this was a nice easy and clear video for you guys and if you do like the video then please like And subscribe and consider checking out our patreon that really helps us out and we also have awesome products on our Marketplace so if you're interested in learning more about armor engine then we sell awesome templates and nice components that can help you and save a lot of time with your underwear engine development alright guys see you in the next video bye [Music]

Channel: Kekdot

Views: 5,949

Keywords: Blueprints, Unreal Engine 5, Unreal Engine 4, Steam, Multiplayer, Game, Marketplace, Game development, Unreal Engine, UE, Multiplayer game, Tutorial, Online, Multiplayer Unreal, Replication, MMO, Game Engine, Devlog, Dedicated Server, Game dev, Learning, Vlog, Video games, make games, Unity, Healthbar, Widget, component, Screen space, character, head, HUD, health, system

Id: mctL8mDAXTo

Length: 16min 47sec (1007 seconds)

Published: Wed Jan 11 2023