Setting up Player Health + Healthbar | 11 | Multiplayer Battle Royale | Tutorial | Unreal Engine 5

hey guys quick heads up before I start the video the link down below takes you to my patreon where you can download the project files for this video also get access to my premium tutorials and in-depth courses where we build games together from start to finish check out my patreon below gain direct access to years of experience so that you can start working on your dream game tomorrow hello everybody and welcome back to a new episode of my multiplayer Bean Battle Royale tutorial Series so let's do a quick little recap of where we are at so far so in the last episode we set up that parachuting logic but I just want to go over everything so first of all if we click here to play with two players then the game automatically recognizes that we met the minimal threshold so we got two out of two players and then we can start then the automatic match countdown starts and then once it hits zero we basically enter into the airplane we then see that the match countdown is gone but on the top right here we still see that we do see two out of two players uh but at it at this this point we should change that for it to say something like um two players left because now the match has started so these guys need to start eliminating each other we can then also jump out of the airplane and chuse the parachutes which we set up in the last video then when a player um basically hits the ground the parachute automatically cuts off and I can also just release space bar to drop a little bit and hold space bar again so here we go I'm almost at the ground and the parachute automatically cuts off and then we can also we do it with this guy so he can jump out parachute a little bit let it go and parachute a little bit and there we go so um yeah so a couple of things that we want to work on in this video well we want to get that account on the top right to be adjusted and then I think that we just want to start adding some UI now another thing that we also are going to do is that I'm not sure if you guys just saw it but when I jumped out of that airplane with the server here on the right then the the client here on the left could not see the guy at a certain distance anymore and that has to do with the net killing distance so on the clients replication is optimized and when actors are too far apart from each other replicated actors then something like killing distance applies unless you make an actor always relevant so when setting up the airplane two videos ago we also made sure that the airplane was always relevant so that no matter how far the airplane was away from the client the clients could still see it now on the server everything is always relevant to it because the server obviously is responsible for replicating data down to all of the clients so the server can always see uh See everything basically so what do I also want to change here I also want to make sure that the client sees the characters at all times so let's actually do that first so we're just simply going to open up the core character here and then in the class default settings of the core character all we have to do is simply click on always relevant is true so that these characters can see each other also at Great distances uh and then we're just going to uh straight hop into this player count so it displays one out of two players two out of two players then the match starts but what we want is that inside of the game State here so if we head over to the game play game State this class then we see that we get that countdown and then at some point the countdown hits 0 seconds which spawns Us in the airplane and starts the match but at that countdown we also want to change that UI on the top right to display the amount of players so if we find our player count widget which is located over here under game widgets widget blueprint player count then we can open this guy up and then we can take a look at the graph where we see that uh we have a function here on the left so if we double click that function then this is the function that is bound to the text so in this function what we're going to do is that we're simply going to drag out of the game State and we're going to say uh match countdown get match countdown and then what we're going to do is some logic here that in case the match countdown is equal or less just to be sure than zero then we basically want to display just the player amount and not the player amount slash players so if it is false that means we're still counting down then we want to display two out of two players but if it is true that we are at the zero countdown that means the match has started is we're going to then right click and type in string append and we're going to plug this guy in here and in that case we simply want to say the current amount of players and then that one goes in here and then here we will just do space bar Surly Force so survivors left basically um so then if we hit compile and save then that should automatically fix itself so let's test it real quick so what did we see we saw quickly that it said survivors so why did it say that so quickly um that is because the match countdown is probably set to Zero by default oh no it is set to minus one by default so what we're going to have to do is actually say if this is actually equal to zero then we want to do this logic let's go ahead compile and save hit play there we go so it says one out of two two out of two and we just get the countdown so we'll just wait for this there we go so right now it displays two survivors so that's great all right now that we got this out of the way this little clean up I just want to basically continue with extra user interface so actually the first widget that we want to be setting up is um something like a health widget that is for the characters that they see on their own screen representing their health so what we're going to do is we're going to go into the game widgets and then here we see all of the UI stuff so this is our heads up display wrapper essentially so this in where we basically put our health and all that stuff so now let's make an actual widget here if you right click widget blueprint user widget let's call it WB held bar and then if we open this guy up then we are just going to start to design it so if we open up the panel here then let's see let's get ourselves a progress bar which we can use for health we are then going to rename this and let's call it um health bar PB which stands for Progress bar and then we're going to compile save we're going to hit fill screen and change it to desired on screen and then we're going to go ahead and wrap this guy with a size box to give it a size so here is the size box now the width is going to be something like 250 I guess and the height let's try 40 it's a bit tall 25 okay so to get an idea of what this looks like we're going to go into the gameplay Hood user created and let's just drag this into the screen so here we go then size it to the content yeah okay so we want it to be a bit longer so let's do 300 and let's do 30 High compile save then we can delete it over here and then inside of this health bar we also want to display some text but before we do that let's click on the health bar and then set up some default settings over here so yes we want it to go from left to right the percentage let's just put it at something like 25 oh so that instead of typing 25 so we have to put it to 2.5 so there we go and then what we want is that well obviously we want to change the color a little bit so it needs to be representing health so let's make it uh something like red here we go and then we want to put put the health as a as a text in here as well you could also put it above but we're going to put it in here so we're going to right click the health bar and then we're going to wrap it with something called an overlay which we can find uh over here and then with the overlay here we need to select the health bar again put it full screen again and then in the overlay we're going to drag some text that's going to overlay on the health bar bar now this text we wanted to say something like 100 out of 100 and then it needs to be a lot smaller so let's try 14 and then we need to center it something like this and we want to offset it a little bit so on the left we're going to give some padding let's say 10 padding there we go then the preview of the health bar we could change it to say uh 7 there we go okay so that's kind of what we want it to look like now this text has to be editable so for that we need to make it a variable we're going to call it the health let's actually call it health text or health amount text M amount text and then we make this be variable and there we go okay so that's basically it for our health so now that we got this one out of the way then we can add it here to our gameplay Hood so we can uh grab the health bar put it somewhere over here size it to content reset it size over here and anchor it to the top left or maybe you want it in the bottom let's actually do it in the bottom so you're going to click anchor hold control click the bottom one click anchor hold shift click the bottom one then it's nice and centered then we just want to put it up a little bit so for the Y we're going to type in minus 50 to get it up a little bit there we go okay so now that we got the health bar installed yeah let's actually start working on the health so that we can make the health functional and that players can actually take damage okay so now that it comes to setting up the health so now we're going to open up the character and then inside of the character we're first of all going to need to make all the heeld stuff so to do that let's click the the on parachute first and we're going to put this into the parachute category and then is parachuting we're also going to put in the parachute category there we go and then next up we're going to make a new variable and we're going to call it health now this has to be of the type float so Health has to be um a decimal number here and then we're also going to duplicate it and we're going to call this one Max health and then we're going to put the health inside of category as well so let's just call it the health category actually so here we go this guy goes in the category now uh both of these need to be replicated so the max Health here we're going to set that one to replicate it and the health we're going to set that to rep notify so that whenever the health changes we can actually do some logic there we might not need that then we change it later but let's have to rep notify for now so we get this function for whenever the heal changes then the max Health we're going to set it to a default variable of let's say say 100 and the same for the health so also let's put that to 100 so now somehow we need to get this health that lives inside of the character all the way over to the widget of this specific user to display it over here in this widget uh H bar over here so to do that what we're going to do first is set up the widget to have a reference of our character because then once the widget has a reference of the character that means that the witchet can actually read data from the character uh and one of that data that we want to read is that health so inside of the health bar widget we're going to click on the graph and then we're going to get our event construct over here check out cact center right now steam in Early Access it's a very fun multiplayer video game cheaper than the Starbucks coffee so if you want to have a good time with your friends or strangers click that link down below and I appreciate every single one of you and enjoy the rest of the video [Music] bye if you don't have it in the graph you can also simply type in event construct and then uh what we want to do is we want to add a variable here and this variable is going to contain that reference to our character so we're literally just going to call it character uncore ref which means reference then as the type we're simply going to type in the name of the character we're going to call it BP core character and that will be over here we want to get an object reference then we're going to compile and save uh and that's it for this one so this will basically uh contain the data of the character so by default if we select even though this is a reference of the character if we select it and scroll down we see that the value is set to none so if you were to just read data out of here you would get an error called uh access trying to access none uh so we need to basically set this reference first of all to so that it is valid so to do that you could do it in many different ways you could basically have the widget here on event construct casting to the character and then uh basically setting itself with a reference of it so to do that you would type something like get player pawn and then you would basically just cast to the BP core character and then you would basically set this reference with this reference that comes out of here but the danger of doing it this way is that the widget might construct before the character is ready so the danger here is that you might do this logic but the charact but you don't actually have a character yet so then you could basically run theay logic here to try and try and try again until you get a valid character or what you could also do is that instead of just basically implementing the health bar by default inside of the hood here you could also make sure that the character actually sets up the that health bar widget to be uh populated on the screen of the player or another option that you can do is that you can have the character simply just send a reference to this uh to this health bar widget whenever the character response so that's what we're going to go for right now so uh it is important to keep in mind characters exist on the server and on all clients so remember if we have a server and then we have client one and then we have client two then all these guys have a character so each of them have one character and then we got character two and then we got character Tre all right so both the server has all three of these characters the client has all true of the characters and client two has all TR of the characters so what we're going to do right now is we're going to get a begin play event and a begin play will literally fire here for player one player two player three so it will fire three times here three times here three times here so what we want to do is that when it comes down to this widget and giving this widget a valid reference then we only want the client itself to send a widget to send a reference of the character to its own widget so what that means is if the server connects with player one which is the server character then we want only this one to set up the widget if this client connects client two then we want this guy to only set it up with this character and client two here so uh this is player three but client to what we want that one to set it up with player three only so to do that we need to each have them set up their own local version of the character so to do that we can right click and then we can type in is local controlled so right now if we basically Branch off of here and then if we were to print string hello so print string then we can see how many times hello is printed but before we test that let's just plug in the hello like this to simulate this scenario so I'm going to test with two players so it will basically now simulate this scenario so what we're going to see is we're going to see that hello is going to be set once and twice by the server and once and twice by the client so let's put this on the screen for 15 seconds and hit play so here we go we see here that the server says hello twice so hello hello and then the client says hello hello so in order to stop that we can basically hook up this logic with the is locally controlled Go off of the true and now you will see that only the server says it for themselves and the client says it for themselves so if we hit play now we see that the server simply says hello once for themselves and a client has hello ones for themselves so there we go so now that we know that we are on the local version of each of these players it basically looks like this and then we can have the local player basically uh get a reference of this health bar and then from there the local player can basically set this reference to the reference of itself so how can we do that well it can be done in many ways Now That We Exist locally we know that locally we got one hood on our screen containing one health bar so one way to do it is to Simply type in get all widgets of class and then the widgets of class could be the health bar widget so this would be health bar and then out of here we could simply type in get and then we would get the first widget that we find or we would simply just for each Loop and then for each widget of the health bar we would simply do like we would uh get the character ref or then in this case we would set the character ref and then we could set the character ref to ourself now another way that we could set something like this up is that uh we know that we created this widget well we created the gameplay widget inside of the player controller so what we see over here is that we got gameplay and then we got the gameplay player controller over here and we know that this widget set up our hood and that this widget has a reference of the hood class so what you could also do instead of running this type of logic but this logic is very simple to use we could also simply inside of the character say get player controller to get the player controller of this character and yes it says index zero but if we get the local version and then do this then it will get the player controller that corresponds to this character in case that you do not run the local then you would typically just type in get controller and then get controller gets the controller of itself without the zero index so this is always a safer one to use when working inside of the character and then out of here we could get then cast to the gamep playay PC so we could cast to this guy then we know that the gameplay PC contains the game play Hood oh uh the hood reference so this is what we call it get Hood so if we check inside of the PC we see we set up the widget called widget blueprint gameplay Hood but we called it widget blueprint Hood as a reference but this reference contains the reference to gameplay Hood so here we could get the hood and then from the hood we could then get the health bar how is it that we can get the health bar from the hood well inside of the hood we set up the health bar and then here we could drag off and set the character reference so this is another way to do it and then the character reference will be our self as the character so this is also how we can try that instead of using this logic but obviously this is a lot simpler a lot more easy to use instead of the for each Loop even you could just get the one at index zero since you know that you only have one health bar on your screen here anyways so there we go uh and then basically now that we did this we then set the character reference here so next up is that we basically want to go back to our health bar and then we want to bind this text to the value of the health and we want to also bind the health bar itself to the value so first of all let's start off with this uh Health variable here by default let's make it say something like uh this we're just going to have a be a little dot so that we can see that it actually changes to 100 and then what we're going to do is that we're going to select the text and click on create binding now this binding we're going to rename it a little bit so that we don't have this ugly name something like this is fine and then inside of The Binding so bindings to happen on tick so on tick we're going to be able to read the value from the character so inside of here we can basically drag off of this character reference and then type in get help but then what we also want to type pin is get Max help uh cuz we want to display 100 SL 100 and then 80 out of 100 then we're going to type in string string append we're going to plug this uh string append into here we're going to put the actual text in here we're then going to do a little Dash and then the next one put the maxal in here okay so let's go ahead and hit play and see what happens so we hit play we see that we have 100 out of 100 on both the client and the server here everything works fine but then if I hit close yeah so everything works fine uh to be sure that this reference is not already ticking before we basically set it we can also right click it convert to a validated reference so that only in the case that the reference has actually here been set to a correct reference it will start to execute this logic this way we can basically make it secure and make sure that we do not run any errors so there we go now we got the health bound basically now we just need to bind this health bar as well so with the health bar selected we're going to be binding the percentage here so we're going to click it click create binding yet again rename this so let's just call it get health bar PP as a nicer name then in here once more we're going to get the G character reference convert it to a validated get yet again we're going to get the max health so this one and then we're going to get the health so the current health health and then in order to get the percentage here we're going to have to divide the current health by the max Health go ahead and plug this in over here and hit play there we go so now the health bar is completely full so let's say that the health is not completely full so we'll change the health inside of the character here to something like 55 and let's see if it's properly working we hit play we see that it's at 55 out of 100 and the health bar is at half its heal bar on both the server and the client so that's fine we then go ahead and delete this logic and delete this and then we can basically make this a bit nicer and uh select it all collapse it to a function and call it init undercare health bar so we call it init health bar if we open this up we can straighten up these lines and then also functions you can also put them in categories so for the parachute here we can also put put that one in the parachute category and the init health bar can go in the health category hit compile save and there we go I'm going to change the health back to 100 yet again oh and one little last thing that we might want to do is if we hit play we see that the health display is 100.0 and 100.0 so if we want to make that a nice uh clean amount then we can go over to this function so to do that we can select this put it a bit to the right then drag off of the heal and we can type in something called trate and then plug this in over here so and then for the maxel we can also truncate and plug it in over here uh and then when truncating we can actually remove all of this so out of here comes an integer we'll plug this in here and plug this in here actually so this way we can truncate if we then hit play we'll see that it becomes a clean number so it's now 100 out of 100 on both the server and the CL BL instead of 100.0 100.0 all right guys that's it for this video in the next video we're going to be working on actual damage so that the beans can start killing each other and damaging uh and perhaps even getting damage from the world uh this it for this video guys if you enjoyed this video please make sure to give it a like And subscribe comment down below appreciate all of you guys watching this series of mine and I'll see you guys in the next one bye [Music] B

Channel: Kekdot

Views: 4,163

Keywords: Blueprints, Unreal Engine 5, Unreal Engine 4, Steam, Multiplayer, Game, Marketplace, Lobby, Game development, Unreal Engine, UE, Multiplayer game, Host game, Sessions, Lobby system, Advanced, Tutorial, Server browser, Sessions Steam, Ready up system, Online, Multiplayer Unreal, Replication, Replicated, MMO, Subsystem, Game Engine, Solution, Modular, Devlog, Listen server, Dedicated Server, Seamless travel, GameMode, GameState, PlayerState, PlayerController, Widgets, RPC's, Steam advanced session, Plugin

Id: h6uMLd_cTK8

Length: 24min 46sec (1486 seconds)

Published: Sun Oct 29 2023