Creating a Replicated Killfeed Widget | 13 | 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 guys and welcome back to a new video so in the last video we worked on the player actually having a a health bar and then we also set up that the player can actually take d Dage and that the player can then notify the game state of the damage being taken and that the number of survivors will get uh basically will be decreasing and then the player once the player dies it will actually kill itself properly so we we take took a look at all of those things uh so in this video we are going to be continuing and actually more specifically let's continue on the kill feet so we're going to be making a kill feed right now so when players die we want to show people that players are actually dying so to do that we're going to go to our uh widgets folder first of all and we're going to create the widgets so inside of the game widgets folder this is going to get a bit messy right now so we're just going to do a new folder inside of this folder and let's call this the kill feed since it exists out of two widgets so first of all we're going to right click and then do widget blueprint user widget WB let's call this kill feed uh panel so this is the actual kill feed panel and then we're going to make another widget and this is going to be the widget blueprint kill kill feed a child or we could also call it an item so this is the item that goes in here so this one would say uh player X died and then it would be displayed here and then it would say player X got hit by a car and then it gets shown here or player x uh died of falling damage and then get shown here so first let's make the item actually so we're going to go into the item here and then we're going to Simply it's uh it's just going to be some text so let's grab some text in here then set this widget to be desired on screen so we can see the actual size then we're going to right click the text and let's go ahead and wrap this with a border and then the Border if we select it we're going to make it all black so all the way down and then put it to something like 6 for transparency now uh the text we're going to select it it's a too big currently is way too big of a font so we're going to change the size to something like uh let's say uh 18 yeah or 16 let's make it something like 16 and then we want it to have some uh pading all around so let's do 12 padding all around the board there we go so this should say something like player a killed player B yeah let's make it say this and then since this text needs to be added editable we're going to make it a variable so we're going to click up here and let's call this um kill feedback text and make it a variable hit compile save and there we go and then when this appears in the screen we also want it to remove itself so if we go over to the graph and then go over to event construct then we can basically say that it needs to remove itself with visibility after a little while and we also might want it to nicely like show nicely fade in and then fade out and remove itself so what we're going to do is we're going to select the border and animate this widget real quick so let's just call it um uh item ANM something like that and then we're going to select it click on track click on the border and then make sure your timeline is on zero then we click on the track that we want to change and that's going to be the opacity track so first of all we want it to become visible so at 35 let's click here and then we're going to go a little bit further let's say to 2 seconds and then click another one here at full so this is going to be one and then here we're going to go to 2.35 again and click here then if we uh click here we can go through them so first of all we want to it to start at zero opacity then become visible stay visible and go back here to zero opacity so this is our little animation and and if you think this is too short then you could obviously make it longer so we can just drag these two and put it all the way to 3 seconds so that they're in our screen for a good amount of time we can then hit compile and save and there we go then if we go over to the graph then we can actually drag off of here and type in play animation and then we want to play an animation with a finished defense so this is the one that we want uh it asks us for a couple of things so if we drag our animation here from the left then we want this to be in the animation now the widget is going to if we drag off here is going to be itself so we just want to play this once uh and don't change these parameters and then after that we want this to remove from parents so we want this widget to basically remove itself and obviously we're going to have to be able to code this text so this text we're basically going to have to set that up before we do the uh animation here so we drag in the text variable drag off it and type in set text then we get this and then if we hook this up just like that then we can promote the text to variable and we just call it kill feed um yeah let's just call it uh feedb text feedback text there we go hit compile on save with the text selected we're going to make it instance editable and expose on spawn so that we in the other widget can basically set set this variable and then when this widget constructs itself it will set the text play animation remove itself okay so that's it for this child widget then we can go ahead and close this so I click on browse to go back here then we can open up the kill feed panel in which all these items will populate um but one more thing when these items start populating we want them to have a little bit of space between each other so back inside of the item we're going to select a border right click wrap it with a size box uh and then on the border we're going to go now to padding and then we're going to give it some padding on the bottom of let's say 10 so then you can zoom in and see how much that is or 15 so 15 padding that they basically get separated between each other and there we go next up we can go to the kill feed panel so how are we going to make the kill feed panel well it's just going to be a little vertical box so we go up to panel here we got vertical box and then the vertical box is going to be a variable so let's just call call it um items vertical box or let's call it kill feed uncore VB for vertical box make it a variable and then hit fill on screen okay so there we go so uh now that we got these two then we can go over to our uh game play hood here so this one and then inside of the gameplay Hood we want to add it here on the top left so if we scroll down to user created we'll find ourselves our kill feed panel and then we anchor it here to the top left size it to the content and let's make it be 50 out of the side 50 from the top and hit compile and save okay so how do we now communicate the actual kills to that panel and also what do the kills actually look like inside of the panel so with the kill feed here we can also go down to use a created it and then we can find our kill feed item so let's just put a couple in here so you would get one kill in your screen and then you would get another kill in your screen and another kill in your screen so basically this is the latest one removes itself then the new one comes in and the new one comes in so that's kind of wrong because typically you would have the newest one be on top instead of on the bottom so right now the newest one would basically go down down down down down so to change that we're going to have to do some uh crazy inverting logic so we're going to select vertical box here and then what we're going to do is if we go down to the render transform and then transform and we're going to do some crazy inverting logic so that we can get the newest one to be on the bottom instead of on the top so we're going to select it and then at the scill here we're going to do minus one to turn the whole thing upside down and then inside of the item we're going to select the size box and go to the skill and do minus one here as well and then if we hit compile save then yes in our preview our widgets are now turned upside down but then here if we now take a look at the first one in the list it suddenly becomes uh to the bottom and then this one here this one here so that means that the newest one that we add is on top so I can show you once more if we then have our kill feed vertical box we can then basically start to drag in the kill feed item so this is the first kill so now we got the first one here so this is then the first kill that we basically drag in then if we right click and duplicate this then we see that the new one that we just added so the new kill coming in is now the one on top and then we add another new kill so this is now the newest kill now the newest kill is on top and the uh the first skill is on the bottom so that's basically the way that we want it now that we got that we can then clean these out compile and save and that's it for creating these widgets now we can also go ahead and set up the kill panel widget to code it so if we go to the graph here then what do we want this guy to do well we want to add a custom event and we just want to call it at uh kill feet uh so we're yeah let's just call it at kill feed so what do we want to do we want to create a widget uh each time that we do this and then the widget is off the type kill feed item now we don't really have to give it an owning player because we're not going to be interacting with the widget at all so um the kill feed item it asks us for that feedback text so that we're going to plug in here and then out of here comes the actual widget which we're going to be adding as a child to the first vertical box so if we drag off of here we can type in ADD child and plug this in just like this okay so now the widgets are all set up and ready to be used so we got the kill feed panel that basically creates items whenever this event get called with the event text and add them to the vertical box and then the item itself will basically set it up with the feedback text animate itself and after a while once that animation is done also automatically remove itself so now we somehow need to get get the killing events to the actual uh screen of the player so to make this a bit easier we're going to remove this one over here and then we're going to go to the island and go to our utility folder which we set up in the last video and drag in our damage actor simply over here and then we're going to have to now basically make sure that the players die so let's put the damage actor to 100 damage here and then we can just run into it and test this logic out uh so how do we communicate to all of the players that there are kills well as we saw in the last video when we go to the game mode core core character we implemented the event for whenever we receed damage and then we could notify the game state that a player had died so since we can notify the game State whenever player dies and and the and the game State actually has it implemented here and then does this logic then we could also use this event to basically a feedback off of here towards all of the clients so what do we have to keep in mind well first of all we know that the event for receiving any damage occurs on the server it also displays it here with the icon I explained this all in the last video If you haven't seen it so basically your damage comes in here if you hit zero you notify the game ST to die you actually remove yourself as an actor and actually die um so if we are still on the server here then here on the game State this also executes all on the server so first of all the server uh subtracts one of the current amount of players and then we just want to notify everybody so what do we know about the game state it exists on the server and on our clients so we could simply do a multicast here to execute uh uh somebody dying but what we could also do is that we could set this guy to be rep notified so that every time that the current amount of players changes we could say that we rep notify a change of somebody dying or what we could also do is that we would make a separate variable cuz this one remember also gets set over here which is not a kill feed it is just a connection event so we could also make a separate one that basically has the kill feed text so let's go ahead and do that because why not just simply use a multicast well rep notifies are more preferred than rpcs when it comes to multiplayer games they are more performance our engine says so themselves in the documentation and there they gives their reason for it so we're going to use a rep notify so for variables here we're going to click on the ADD and then the variable that we want to add is basically the kill feed and that's all it is and then inside of the kill feed it should be of the type uh let's make it a string and then this should be a r notify and we hit compile and save and there we go so this kill Fe text we're just going to hook it up here and that's it so if we set this text it will change on the server and on all clients remember so now we somehow need to set the text that goes in here so how do we set that text well it's it's going to have to come out of this uh interface event so let's go to our interface folder now open this one up now we see notified death so what we want to send through here is basically also the name of the player that basically uh died and the name of the player that killed us so let's just call this the killer over here and then we also call it the uh the player who died player who died let's just call it that why not so that notified death will now basically send the Killer and and the player who died so how do we know who the Killer is and the player who died well here inside of our character class we are using this uh event here and then what we see here is the the damage causer and who it is instigated by so right now who is the killer it is this actor over here check out cact center right now stepen early exis 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 we find that actor in our utility folder then we see that we used this noes to apply damage which said the damage causer and then the event instigator so what what is the event instigator the controller object reference that was responsible for causing damage to the player example the player who shot the weapon well in this case it's not a player who shot the weapon but it's just this blueprint so what we can do here that we cannot actually send true that this guy is the one who deals the damage but players who use guns can send this data true so what we're going to say is that this guy basically does not have a controller so it cannot input a controller either uh because it actually asks for controller type so what we're going to do inside of the character is in case that we do not have the instigator then we're just going to display the damage causer so if we plug the instigator inside of the killer we get the display name of the of the instigator what we're going to say is the instigator here is actually invalid so we're just going to drag off here and type in is valid then we can say if it is valid we use display name if it is not valid we uh basically uh used the damage causer so let's do something like that so we're going to put this a bit to the right and then we're going to hook this one up here so what are we going to do if the instigator is valid which would be when this actor wouldn't be calling the apply damage event but another player would do in a couple episodes for now when we start using guns so so if the instigator is basically not valid then we are going to basically simply get the damage causer name so if we duplicate this hook it up here then we're going to get the damage caer and plug that in here and then for the player who died that's basically ourself as the player so how do we put in our own name here as the player who died well for that we can type in get player State then we can get this little variable here which is our player State and from a player State you can simply type in get name and then we can get the player name now if your game is connected to steam which we already did a couple episodes ago then if you got steam running and you play on Steam stand alone then you would actually get your steam name out of here but otherwise if you're just testing in the editor it will just give you your uh PC name so this is the player name that we want to put in here then if we hit pile and save then there we go so what does this now do this basically sends it through to the game State and then in the game State we see it over here so we can give it a quick little test if we just do a little print string plug it in here then we can see who the Killer is and then we also want to do a little print string and we'll make this one red and that is basically who died so here's who died and this is who the Killer is let's make the killer also 15 seconds and this one 15 seconds visible so now we we go ahead and hit play and then we got our two little beans uh we got our countdown so I got to be quick here I'm going to just run in here boom I die and it says the damage actor is the damage causer and Wim PC is the one who died so that basically worked I didn't actually die because uh we basically also need to hook up the destroy event over here of course so there we go and what we can also do is to go like this so this is basically now our logic so if we don't have an instigator controller which means a player that killed us in that case we just get the damage causer name so now that we basically sent this all through to the game State then we can continue inside of the game State and actually plug that data into here so we see that the kill feed just asks for one input and here we get two so what we're going to do is we're going to string append and then plug the string append into here and then we're going to basically format it so we're going to say the killer killed and then spacebar the name of who died so it will basically say the damage causer blueprint in this casee the BP damage actor killed and then the name of the player that died or it will say player a killed player B that's basically what it's going to say uh when we are using this on Steam so then we can open up the notify Here and Now how do we actually communicate this kill feed data to all of the clients well this executes on the server and on all the clients so so somehow we now actually need to get this data to our kill feed so for that we are going to go into our function library and open this guy up and then we're going to add a new function so we can easily reuse the function anywhere so we're going to click on ADD click on function and then we're going to call this um atore kill Fe so let's just call add kill feed and we're going to put it under the category gam play feedback let's just call it gameplay feedback so what do we want to do here well we want to first of all get our player controller but then we want to make sure that we are the local player controller so we're going to say is local controller and then if that is true so if we are the local player controller then we're going basically going to say get all widget of class now the widget of class that we want to get is our kill feed panel not only on the top level but just all the kill feed panels that we have now we could say that we just get a copy of the zero one which is the only one that we have or we just simply for each Loop out of here so this will find our kill feed panel and then inside of the kill feed remember we install an event called add kill feed and that was the event that we already made earlier and then it asks for the text so so the text is going to Simply go in here hit compile and save and there we go so to be sure that we actually can find a widget so let's say that kill feed is coming true before we actually have this widget in our screen yet we're going to drag out of here and also basically save code it so we're going to say uh is not empty and that has to be true so we have to find at least one before we can uh add the kill feed to this panel then we can go ahead hit compile save close the function library and then go back to our gameplay game state so unrap notify we simply want to do add uh kill feed which then comes out of our little function Library we're going to hook this up there we go just like that and this function Library also already made sure that we only do it locally so locally we're going to find our widget at the kill feed inside of the kill feed widget here inside of the vertical box which actually adds it to the screen so let's go ahead and test that out we're going to hit play and then we got to be quick so let's actually adjust the countdown timer to be a bit longer so we're going to go to the event graph here and then let's say that this one instead of starting at 15 that it would start at something like 50 if we also want to make this easier we can drag off of it and we can then say basically default match countdown this would be the default value with which it initializes if we then hit compile save let's make it say 6 60 seconds actually 60 seconds there we go so now we can go ahead and test this so we got a 60c count down here plenty of time we're then going to uh run in with our little server here and then let's see if we both got the kill feed boom and then it basically says that that guy killed that guy so it all worked great but we did see that uh it was still inverted and that's a little book in unreal because we have been working on all these widgets and they're still like inverted it so to fix that you got to quickly restart your project so that's what I'll be doing right now so we're going to close the project and then simply restart it again okay there we go then if we test it once more so we go into the batter roale level we hit uh two players listen server and hit play now we got our two guys here so the server is going to run into the box boom and then it properly displays the BP damage actor killed Vim P so everything works fine we just needed to add a little space bar and then this guy can run into here as well and then nobody sees it because right now we coded it in the last episode that if the player dies they basically remove all of their widgets so if we go into the game modes here and then go to game play player controller then what we see is that uh whenever the character died so imposed we basically removed all the widgets so now we basically want to change this code that we do not want to remove all the widgets but we want to remove specific widgets so if we take a look at our Hut then we could say that we still want to keep our kill feed but we might not want to see our health anymore so the health is actually the only one that we want to remove which is called WB health bar so in the case that we in process we basically just do get health bar and then for the health bar we're going to do remove from parent and there we go hook this up just like like that hit compile save now we also see that we could use a little space bar so inside of the gameplay game State here we can format this a little bit differently that there's also a space bar in front of kild there we go let's test it out one more time so we hit play got two players this one here on the right is the server we're then going to basically run into the volume and it's going to say damage actor killed VM then I'm going to into it with this guy and it will say damage actor killed vmpa but then the other vmpa that ends in two Z all right guys so that's it for this video so now we got ourselves a beautiful little kill feed here now if we go into the core character then we can basically clean this up a little bit as well so let's do that finally so we're going to say uh let's see we're going to put this into a function here so let's call it something let's select it all and call it some something like uh handle kill feet and then we can put that in a Chara in a category called feedback and then we can hook it up here this one here now we do see that there's a lot of input pins going in but we only need the instigator and the CER so we open up this function then we can basically see that um this one over here is the same as this one so we can remove the top one and then we could call this the uh instigator and this one would be the damage causer there we go so this is the function that we want and then if we refresh this one here to be sh safe now we go like that okay so this looks a bit cleaner we can put a comet around this and let's call this damage so that's whenever we receive damage hit compile save and there we go all right guys so that's it for this video as I explained in last video we now got so much to do for this series so in the next video I will probably be uh finally starting to working on some guns or something like that we might also want to work on uh on the fact that when players die that the game state has to actually realize that players dieing that there's one guy left so that we have to say hey this guy is the winner we want to start working on spectator and stuff like that so let me know down in the comments below what you guys want to see next and then that's what I'll start working on I appreciate you guys and if you like this project you can download it on my patreon if you want to mess around with the project yourself if you like this video please hit the like And subscribe I appreciate you guys and I'll see you all in the next one [Music] bye you

Channel: Kekdot

Views: 2,414

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

Length: 27min 30sec (1650 seconds)

Published: Tue Oct 31 2023