How to make a Multiplayer Player List | Blueprint Replication Tutorial | Unreal Engine 5

foreign we are going to be creating a player list that displays the players connected to the session and then we're going to make sure that for the server so for the host that he or she can kick the other players and cannot kick himself so here you see that I am the host here and I cannot kick myself but I can't kick this player and I will see the background change here because that will be the other map so this guy gets kicked the server playlist automatically gets updated here and you see that the client gets disconnected and goes into another session alright guys let's get right into this video so what I have in front of me right here is the default third version of our engine project so if I click play you can see that I can simply walk around and in here I'm going to set up the replicated player list so the first thing that I want to do is that I want to create a folder and let's call this player list so the first thing that we need is a game mode class so let's right click go to blueprint class and type in game mode and then this is the game mode that we want and let's call it BP my game mode and then inside of here we are going to have to set up some logic so if you go to the event graph of the game modes then we are going to need two events so if you type in events and I scroll up a little bit then see an event called on post login and an event called on logout now I made a separate video on these events to go into more detail about what these are but eventually what it does is that as it says here it notifies that a player has connected and has been given a player controller so this event is basically when a player has connected to your session and then we also want the event on logout and this way we can now keep track of who connects and who leaves our sessions and out of here we get a player controller reference none of here we get a controller reference and then the second thing that we want to do is that we want to set up ourselves a little player controller so go to blueprint class and click on player controller and I call it BP something like my player controller then the next thing that we want to do is that we want to assign our game mode inside of the level so over here go ahead and select your own game modes then click this open and select your own player controller there you go and then what we want to do is inside of the game mode we want to store those players that are coming in so the way that we're going to do that is from the new player here we are going to cast to our BP and then my player controller so cast to your player controller and then this one here we want to store it as a reference so this is that incoming player controller and then what we're going to do is that we're going to rename this variable to all player controllers and then what we want to do is if we remove it here we can click on the variable and then we can make it also type array so now we have an array of all of my player controllers here uh and then essentially what we want to do is as soon as a player connects we want to add them to this array of player controllers so that this way we have a list or basically an overview of all of those player controllers that come into the session and now we want to do the same when they leave the session so essentially we have an array here first of all the host will start a session so the host will always be at index 0 and then we will have clients connecting so this would be your players coming into your match and then when they leave the match we want them to leave so if you go ahead and copy paste this then the XD controller we want to cast to this player controller and then instead of adding it what we don't want to do is call remove and we want to remove an item and the item that we want to remove is this player controller from the cast over here so this is how we can keep track like I said of those player controllers coming in and leaving so this guy might disconnect then it looks like this then a new player might connect and then we just have an overview of these players here okay let's compile and save that then the next thing that we want to do is that in the game mode we want to make ourselves a custom event so right click and type in custom event and let's call this update player list and then what we're going to do is that essentially each time that a player connects or disconnects we're going to call this little event here so if you go ahead and type in update player list then we want both of these events to call this and then what I notice is that while removing a player controller takes a little bit longer than adding a player controller so removing an item takes a little bit longer so because of that we are going to install a tiny little delay here and something like 0.3 seconds is enough and then we can properly remove this and then after that we are going to call on update and this update we are going to call inside of the game State and essentially the game state is a class that exists on both the server and on all of the clients and the game State can therefore have replicated variables from the server replicating to the clients so what we want to do is that we want to make a variable which is wrap notified and then as soon as the player list updates then we want the game state to fetch all of the players essentially and then update all of the clients and the server itself as the host with the data that some players have potentially left or have come into the lobby and this will be a lot more clear when I get into it right now so let's do that so what we want to do is we want to right click here and go over to blueprint class and then type in game State click on game State hit select and then call this BP my game State then make sure that you attach this class also here to your game mode so in game States lecture on game State there you go and now we can go ahead and open up this game State class and then we want to create a custom event here so right click and hit custom event and also call this one update player list and then over here we are going to be actually updating the player list so back inside of the game mode we want to call this event so what we're going to do right now inside of the game mode so we're gonna type get game state and then we are going to cast to our game state so type in cast to my game State just like this and then we are going to call that little event called update player list and then we're gonna make the game State be responsible for actually updating that player list okay so this this works and then another important thing to note as well the game mode which is the class that we are in right now only exists on the server so you cannot have replicated variables in here simply doesn't work you can also not have remote procedure calls or events that rental server or multicast it simply won't work because this only works on the server so basically what I do right now is if I call this event if the player list and then if we then call it here update player list in the game State then you see that this event is not set to replicate but this event is executed on the server because it came from the server so at this point here we are still on the server and because we are still on the server we can then set a replicated variable and have to be replicated from the server down to all of the clients so what we want to do right now is that inside of the game state if you type in variables there you see a couple of default variables over here that exist inside of the game State and an important one for us is this get player array variable and what this does is that it basically contains all of the player states that are inside of the current session so if you get this then every player that connects to your match has both a player State and a player controller and the player state contains information about the player and default information that the player state contains is a player name inside of our engine so what you can do is that you can type in cat player state to get your own player State and then awful here you can always type get player name and this function over here Returns the name of you in the subsystem so if you use subsystem new it will always return your PC name and that might look something like win PC and then a lot of numbers and then for the second client that you might have running it will return a second instance of that PC so it will turn another PC with a lot of numbers but if you use Steam for example then this will return your Steam username so if you have something like steam Advanced session plugin installed and the steamship system setup in your default engine any file then this will return your steam name if you have EOS returns then this will return your EOS so your epic Services username essentially so that that's something important to know and then we can basically get all of the player names by using this get player array which is all of the player States and then for each player State what you could do is if you drag off of it is that for each of these player stage you can then get the player names so if I can type get player name there you go so this would return all the player names of the currently connected players to your session essentially but what we want to do is that we want to make use of something called a wrap notify to update all of the player lists for all of the connected players so the way that we're going to do that is that we cannot wrap note by this variable as you see so we're gonna promote this one to a variable that is self made and set that one to rap nodeify so over here go ahead and click promote variable and simply call this all player States and then we're going to hook this up over here and we're going to set it to wrap Note 5 and then as you notice it becomes replicated and then you also see that we get this automatic wrap Note 5 function over here and what that allows us to do is that as soon as the data changes inside of this variable which it does because the game mode on the server calls this variable server sets it replicated which means for the clients this variable will now go from having no data in here to the actual player data so then this fires because the value changes that means that then the attached function fires which is this wrap node file function and in here if we then code logic we can have that logic execute on everybody in the session so both on the server and on all of the clients and the logic that we're going to code here is updating the actual player list widget for us so we'll get to that in a little bit because right now we're gonna have to set up that widget so if we go back here now we are going to make ourselves a little widget so if we go to user interface widget user widgets then let's call this our player list and we're not going to make it look pretty we're just going to make it functional and then we need another widget called widget blueprint player list item so essentially you're going to have your player list it might have a little scroll box in there and then you want your player names to populate that player list and you also want to be able to kick certain players so we're also going to install kick button here so we can kick specific individuals so let's go ahead and first set up the player list over here so like I said we're going to keep it basic so let's pull in a canvas panel here and then we want to insert the canvas panel a little border we're going to drag it somewhere over here I'm going to color it a little bit so I'm going to say brush color make it a little bit grayish like this then we're going to go ahead and drag in a vertical box put some text in here this text I'm going to say another has to say player list there we go then the vertical box over here we're going to give it some padding so something like 15 looks nice in my opinion uh this text we're going to give it some padding down and then what we're going to put under here is ourselves a little scroll box so put that under here and the scroll box we're gonna set it to fill and this is essentially the scroll box so if you click here scroll bar and you see how that works this scroll box will contain all of those usernames and kick buttons for the host to kick those individual players so over here we're going to rename this to player list underscore scroll books and promote this to variable because we're gonna have to code that okay so that's all we have to do for the designing setup of this widget then we can go ahead go into the player widget and then over here let's go ahead and drag ourselves in a little vertical box and then inside of the vertical box we are going to want a horizontal box so just like this then the horizontal box we're going to give it some padding down so let's say 10 padding then right now we click here on fill screen set it took desired so we can see that what the actual size is going to be inside of the horizontal box we want some text and now you see that time padding that I gave to the horizontal box here and what that does is that of course these names are going to like stack on top of each other and this will keep them with some padding in between so what this text will be is the username and then let's also promote it to variable and call this the username unsure text and make sure you promote it to that variable now we're going to drag in a button inside of our horizontal box this button is going to be responsible for kicking the players so if we renamed this we can call this kick player unscrew button and inside of the button we want some text and we want this text to say something like kick I'm going to remove the padding from the text here just like that and then let's scale the text down a little bit because it's huge so let's make this button text 16 let's make the username also 16. and now what I want to do is that I want this button to have some padding on the left of it so that yeah there's a bit of space in between here so selector button go to padding and then on the left let's add 10 padding okay so then one important thing to understand is that this button is only going to be visible for the host because we only want the host to be able to kick players we do not want clients to be able to kick other clients so what we're going to do is start this button is basically is going to have to be invisible by default so for all of the clients they will just see this and then the host will see this so because only the host will see it visible we're gonna set the default value of the visibility here to be collapsed okay as soon as we did that we can then go ahead and also add a tooltip tag so that when we hover over it it says something so over here underneath Behavior you can type in kick player and then for the host we want to get some specific different text in here perhaps so right now this design setup is also done now we can go ahead and scroll down with the button selected click on clicked and then we want our event construct event and our own clicked for the button on event construct we want to set the username in this widget so drag in your username variable and type set text just like this now the text we want to promote this to a variable so drag off of it and then to promote the variable and call this the username make sure that this variable is instance edible and exposed on spawn that way we can fill in the data of this variable from another widget that creates this widget so the player list is going to populate itself with these so we want the player list to set this data that's why we make it inside our Exposed on spawn okay that's great and then we want to do some additional logic so on event constructs we are going to have to see if we are the server so type in a server branch and then put that in here you get a branch by holding B and left click and if we are the server then we want to see the kick buttons essentially so we're going to grab that kick button and then if the server is true we're gonna set the visibility of this button to be visible um so just like this basically and let's comment that and say make sure host sees kick buttons there you go but then what we don't want is that we do not want the host to be able to kick himself so what we need to do is that we need to give these widgets here an ID of this actual player so not only the username is going to go in here but also on ID of this player is going to go in here so that we can identify who the host is and so that we can identify who we want to kick so what we're going to do right now is that we're going to make a new variable here and we're going to make it of the type integer and what we're going to call this variable is here rename is player ID just like that and then essentially what we're going to say is if that player ID is equal to zero then we are the host and if we are the host we do not want to be able to kick ourselves so if the player ID is equal to zero we then want to disable the kick button so drag to kick button in and then type set enabled there you go I'll set it keep it to false so just keep it off like this and then we also want to do something additional so we also want to have the kick button tooltip tags to be different so set tooltip text and and then hook this up like this boom and then drag off of here and say make text and then here make literal text and then we want to feedback something like you can't kick yourself something like this so just to make sure the host understands that he cannot cake himself okay there we go so um display that host can't kick himself and disable hosts kick button okay so what do I mean with that if the ID is zero we are the server well to get back to that inside of our game State we have this variable and like I said um inside of the game mode we connect and of course since the host is the one that hosts the session the host is always going to be at index 0 of this array essentially and so also always at index 0 of this array inside of the game state so at index 0 we can basically say that guy is always the host and then what we can do here is if the player ID is equal to zero which means that index is zero then essentially we know that we are the host and we don't want to be able to kick ourselves and then over here we are going to install the actual event to kick ourselves but that's going to be in a little bit so let's go ahead compile and save this this widget is now kind of done make sure that your player ID also has instance editable and is exposed on spawn now we're going to go into the player list and we're going to code something so that we can actually populate this so if you go over to your graph you can remove all this right click type in custom events and let's call this update widget just like that and then what we want to update here is that player list so first of all we're gonna read the information from the game state so this player list is now going to need a reference to the game State here to read this variable actually you can also read this one because we set it with the same of course but we want to read let's read original variable so what we're going to have to do is type in the widget get game State and then we're going to cast to our game state so cast to BP my game State just like this boom and then what we want to get from the game state is this variable that contains all of the players and their names so we're gonna type in get player array now this variable automatically updates itself so when players connect or disconnect this uh default variable is automatically updated with those players with the player States essentially so that's all of our players off of here we're going to then do for each Loop and in between here we want to basically clear the scroll box so every time we refresh we want to clear the scroll box and then populate it again so what we're going to do is drag in our scroll box and type in clear children now we're going to hook this up in between here hook up to for each Loop just like this now that we got this out of here we want to get the player names and out of here will be that ID of the player so index 0 is basically the host index one is a client two three four five all clients and those are essentially their IDs their indexes so what we want to do is for each of these players we want to create a widget we want to create a widget and it's going to be of the type player list now the only player you could leave it empty but you can also just do get owning player and then the username is going to come out of here so that's the player name and like I said if you use steam it will automatically be your steam name and then here we can hook up the ID just like this and then instead of just creating them we obviously want to add them to the scroll box so grab your scroll box and type in ADD child and then these created widgets are going to be added here as a child okay that's perfect compile and save and now we want to call this event every time that this variable gets updated here and that gets updated when people connect or leave because of this event so this calls this this calls this and then here we want to call this so what we do over here is very simple we're gonna do get all widgets of class now the class of the widget that we want to get is the player list uh take this off because otherwise it's going to only update players player list widgets that are currently in your viewport let's say that you have a playlist widget that is toggled away and that you toggle by using tab which is very common in games then you also want to update that one the next time you pull up tab you want that to be updated so take this off for that reason otherwise you're going to skip it and then out of here we're gonna say for each Loop and for each of the playerless widgets we are going to call the update widget event the dead widgets and the reason it can be all this simple is like I said game State exists on the server and on all the clients so for the server it's going to do this it's going to find the server's widget and update it for the number one client it's gonna do this find that client's widget and update it for client number two and so on so everybody will be updated this way okay that's essentially it now we want to be sure that we can also kick players so because we have now given this ID here we can go back into inside of this player list item and then we can set up that kick event so essentially what we need to do when we kick we want to get ID of the player that we are trying to kick and then that guy we want to actually kick so let's install this logic inside of our game mode that's a nice space to code this because that only exists on the server and that way it's safe to have this type of logic here so make a function and call it kick player and when we're gonna kick a player we need to know what the idea of the player is so click here go to make an integer type and call this player ID and then what we want to do is that on that player we want to call an event to make the player leave the game essentially so how we're going to do that is that inside of the player controller go to your event graph make a custom event I call this something like OC which stands for owning client um kick player now make sure that you make this of the type owning client and make it reliable and as soon as this event gets called for you we want to disconnect you from the match so if you are in a certain map we want to get you into another map and if you're using sessions you also want to destroy a session at that point and maybe you even want to create a loading screen so the way that you would do something like that is that it will do open level by name or object reference and then here you would basically go to your main menu if that's one of the levels that you have of course so if you have a level Something Like This and then you want to kick the player so he goes from third person level back to the main menu level that's that name then you would type in main menu level and after you do that when you're using sessions you always want to call destroy session because you're inside of an active session and then you want to destroy that session and that's essentially how you do but what we are going to do in this case is that we are going to let's see what's a good example here okay yeah we're actually going to make that map and then have to have the player go to that map so just as an example here so let's duplicate this map real quick uh let's do a control copy and let's call this then my main menu right and then I want to go into this level over here and what I want to do is that I'm going to make it look a little bit different something like this okay now we understand that this is our main menu level and this is our third person level so back here we want to go to the main menu and then destroy your session I haven't set up sessions for this example so I'm going to leave it out but if you use sessions make sure you set that up and let's also just print got kicked okay there we go so now that this event is installed inside of your player controller you can go back inside of your game modes and then what we want to do is this ID here we want to grab this player controller array from the game modes and we're going to do get and we want to get a copy of the player controller at that specific player ID index and since we're already casted here and since this is directly of that actual class I can now directly call inside of the player controller this event called Ock player so over here out of here we're gonna type in kick player and this way the server will call this event on their own incliners to play a controller and the player controller will neatly disconnect himself or herself there we go and now all we want to do is that back inside of this widget right where you actually click that button we want to call it event so obviously only the server will have the button visible and will be able to click it if it is not the button for him or herself so we can just simply type in get game mode and then the server can cast to the game modes uh remember it's only exists on the servers only the server can cast through the game modes and then here we want to call that kick player event which asks for our player ID and we plug it in and there you go that's it guys that's basically how you do it now all we need to do is make sure that we add this widget to the player screen of course so let's go back inside of our player controller and do that here real quick so if we do begin play we can just set it up dirty like this so let's do create widget and we want to create our player list owning player we can do ourselves as the player controller we want to run adds to viewport and that's that's it oh we also want to give ourselves a little mouse so let's do set inputs mode uh game and UI us we want to focus this widgets and let's also set our mouse cursor so set show of cursor to true this way we can see your mouse okay now let's go ahead and test this setup so with one player in Standalone first if I hit play we see that well I am here right now I can I can basically fly around and my player is over here let's actually go into the world settings and set up uh our third version character I think that looks a bit nicer so here we go I can walk around and it says you can't kick yourself because me the host I cannot kick myself I see my player name here now let's go ahead and test it in multiplayer so if I do two players go to listen server hit play then we see that here on the right we have the server and here on the left it is the client so both of them see the server on number one and then yeah so the client basically sees the server and sees himself in the player list and the server sees himself which he can't kick and the client which he can kick so there you go guys that's how you make a I make a basically a player list if people now would join it will automatically update and we can also validate that by kicking this player then this list will automatically update as well so here we go we hit kick this guy is now inside of this other level because you see we deleted all the stuff here and you see that for the server here inside of this session the player list has been updated so there you go guys that's how you can make a replicated player list in honor engine if you enjoyed this video be sure to like And subscribe that really helps out the channel we're trying to grow the channel a little bit so uh that would really help and guys we also have a patreon if you're interested in checking that out I'll upload the project files for this project on patreon and also guys be sure to check out our inner engine store we have a lot of very cool games and templates there that you can check out that will help you and save a lot of time and you can also reverse engineer these to learn more about our engine or just to buy them for fun or add them to your game of course so guys I'll see you in the next video bye bye happy birthday [Music]

Channel: Kekdot

Views: 8,056

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, Player List, Session, Kick, players, Game Mode, Game State, Player State, Player Name, Widgets

Id: yP9mdOUHKkE

Length: 29min 42sec (1782 seconds)

Published: Fri Jan 13 2023