Make a Multiplayer Game from scratch - Create / Join Session - Unreal Engine 5 Beginner Tutorial # 3

what's up everybody welcome back so in the previous video we started setting up a little bit of our framework and we have our main menu set up we can hit the solo button and we can walk around with our little girl in the level and shoot around a bit so we have a pretty solid start and in this video we're gonna look at creating a session and joining a session for our multiplayer setup but first of all i wanted to do a little introduction into multiplayer and this is really for the beginners so i'm still a beginner as well but i want to try and explain a little bit what's going on so if you're a little bit into multiplayer already you can probably skip this so as i usually do i'll put chapters in the timeline and you can simply hover over the timeline and look for a part of the video that does interest you but for now i'm gonna try and explain what would happen if we are playing a multiplayer game and what different classes how they behave and things like that so i mean made a little scene and this would represent a single player game the cube would be the computer the dude behind is playing it and this would be the character in game so that would be the character blueprint for example and this would be a simple single player game now what would happen if we would turn this into a multiplayer game then all of a sudden we have two instances of the game with both two characters and there's two people playing and this would be a listen server model so that would be a pretty common model used for unreal engine this means that one of the players is also the host another option would be to run a dedicated server and in that case there would be a separate computer that would be the host and be for that computer there would be nobody playing though that would only be the host and all players would be clients and the benefit from that would be that the host would have to do no visual or audio or play effects and things like that because there's nobody actually playing behind that machine and also none of the people playing would have the benefit of being the host because everybody is a client though there's a small difference between that but in big lines you can compare it some what but we're going to look at the listen server model and that looks like this and in that case one of the players is the host and the other players will be clients and in this case every instance of the game has two characters in them and one is a local character but that doesn't really mean it's a host or a client the local character just means that's the character that being controlled by the dude behind the computer so that's the local character as the name says and then for every person playing there is a character in that game as well now if we would bump this up to a four player multiplayer this would look something like this so you'd have four instances of the game every instance would have four characters in them and every instance also has a different local character obviously so this would be a common setup for a multiplayer four player game now what would happen if a client would try to move his pawn in that case it would actually tell the server he wants to move his pawn and the server will move the pawn on his game instance and that will be replicated to all the other games and then the other instances will also move the pawn so that's the model that we're going to have to work with though the server has authority over everything that happens in the game and we need to tell the server if we want to do something for important gameplay tasks so that's the setup for multiplayer until now that's not too complicated but we're also dealing with different classes so for example we have game modes player controllers things like that and that's where things can get a bit more tricky because every class has its own behavior so a player controller for example will exist for a local player on the machine and it will exist on the host so the host has access to all player controllers from all players in the game but clients only have access to their own player controller so if i'm this purple dude over here i would never be able to tell something to the blue guy's player controller because i simply do not have access to it it doesn't exist to me so in that case i would also need to talk to the host and the host has access to all player controllers and can use that to tell players to do things or create a hud or something like that a game mode on the other hand only exists on the host so clients do not have access to the active game mode and the actual game mode that's running the game only exists on the host and only the host has access to it so you need to keep those things in mind when you're working with different classes they behave differently besides these classes we also have a game state and the game state is a class that replicates through all players and it will exist for all players as well and normally it's not really used for game logic but it's more to tell all clients or all characters information about the game or something like which team is winning or how long the game has been going on and you could use that for things like a hud or a scoreboard or things like that so this is more to spread information throughout the game and it's replicated for each character or each player and also exists on all machines or all instant instances of the game and the same thing happens with the player state which is kind of the same thing but then for a player instead of for the game so this also replicates 3d between all players and it exists on all machines and you could use this to keep your score for the hud or for your scoreboard or things like that to replicate it between players so everybody knows about it so things get a little bit more tricky when we're dealing with different classes and then we're also dealing with the fact that a different class can execute different events and those can also behave differently so for example if i would look at a player controller for the blue guy over here that would exist on his local machine and on the server and the player controller can execute event we can play for example when the game starts and event became play will execute both locally and on the host so it will happen on both machines but a player controller also executes event possessed for example and event possessed will only execute on the host and not on a local machine so you need to make sure that you know a bit of the basics when you're working with this stuff otherwise it's going to get real complicated because you think you're doing things right it's not working and you're simply trying to do something that just can't be done just because classes behave differently and events behave differently so this is what you have to keep in mind and i would suggest dive into some documentation or watch some tutorial videos like you're doing right now to get the basics and that would really help you to get things going so i hope that made a little bit of sense and we're gonna continue by setting up a little bit of our game so first of all i wanted to mention that i renamed a few blueprints because it got a little bit confusing when i was searching for them so if you are following with the tutorial and want to keep the naming conventions the same then you might want to do the same thing so i had the bp menu shooter game mode the bp shooter menu controller and the bp shooter menu pawn and i also had the shooter game mode so that got a little bit confusing so i changed this to the bp menu game mode and that used to be shooter menu game mode and this is the menu controller and that used to be the shooter menu controller and this is the menu pawn and that used to be the shooter menu pawn so i just got rid of the shooter in these three ones to make things a little bit less confusing one thing to mention when i start a new project i usually immediately enable the other filters and show redirectors so that way if i rename or move a file and the redirector pops up i can immediately fix it up so that might be something you want to look at as well so with that out of the way i want to dive in the game instance and as a little bit of a precaution we're going to go to the load profile function so we have the check for save game function and the checks if a save game exists if it doesn't exist it will create a save game and when it does it will also store the save game object as a variable on the game instance but if we look over here and the save game does exist we're simply going to load it but in that case we are not storing the save game object over here and in case we might want to access it later i want to prevent that we forget it so i'm simply going to drag it onto the return node over here and then go back to the check for save profile function and make sure that i set it when we load the profile so that way we're sure it's always correctly loaded and we do not forget about it if we want to do something in here later so with that out of the way let's dive into our menus and let's create the multiplayer menu first i'm going to open up my main menu and i want to add a little title bar in here so i'm going to move the borders down a little bit they're at 100 and i'm going to set them at 300 and then i'm going to grab a new border and drop it on the canvas panel over here and make sure that it's aligned top center or anchored sorry and then position zero it out the second position would be down so maybe 100 units down then make sure it's across the entire screen and enter it out with the alignment and need to lower the opacity a little bit so something about 0.5 and then i'm simply going to drop some text on here and this is going to be our main menu and let's copy the font so copy and paste it and increase the size a bit so maybe in 58 something like that so we need to center it and then increase the border there we go so we have some what of a title going on then i'm gonna close it down and simply duplicate this and call this my multiplayer menu so mp menu let's open it up and first let's change the title over here so that's multiplayer and now we can get rid of this player name input so we can simply delete it we don't need it in this menu so for the buttons we can keep the host and search game i'm gonna move the solo game to below search game so that would be over here and then i'm gonna change the text on here so this would be my button connection type and the text will be connection and then let me increase the border a little bit now i'm going to grab a simple border and drop it in the vertical vertical box as well and on there i'm gonna drop some text again so that would be this border and let me see we need to make the border a little bit darker so let's zero this out and give it some alpha something like this then we need to get the font in here so we can select the text and probably still paste that that would be good to go let's center it and then the text would be long and this could also be online if we switch between local area network or online gameplay so let me move this above the quit button and then let's move the spacers around a bit as well so we got a spacer over here let's put this at the above the quit button and then we have a spacer over here let's put this above the connection type of something like this and now we can adjust the border again there we go so we have an empty border in here because i dragged the text out of it probably so this should be over here there we go so we have the text for the local area network and i'm going to say this as a variable so this is my text connection type and we need to make sure this is a variable so on the top right over here enable it and for the other buttons we should be good to go so we can pretty much keep them and this is what we're going to use for our multiplayer menu to start with so now we need to go back into our main menu because we also created the host and search game buttons in there and we get an error because we remove the input box and we still have it in the graph so you can remove that to get rid of the error if you like so we're gonna go back to the main menu and over here we have the host and search game buttons i'm gonna remove one of them and for the other one i'm gonna call it multiplayer so we can open our multiplayer menu from here so multiplayer and make sure i change the button name as well so multiplayer game and that should be good to go so get the border size nice there we go now let's have a look at setting this up in the game instance and showing the different menus let's start with the game instance so we can show the new multiplayer menu so let's open up our game instance and i'm simply gonna do pretty much the same as for the main menu so let's duplicate this function and call this ui show mp menu so in here we can get rid of the main menu variables and we can get rid of the stuff at the end here as well so we don't need to set the input mode mouse cursor or the profile stuff we don't need it in this case so simply plug the return node back into the add to viewport node and then over here we're going to select our multiplayer menu and we can promote this to a new variable and that's our widget blueprint multiplayer menu and now we can connect everything back up so this should be into the add to viewport and we should check if it's valid and then add it to the viewport so we should be good to go over here now we need to go into our main menu and multiplayer menu to set up the buttons for opening them so let's go into those widgets let's do the main menu first so if we dive into the graph we can add a new on click for the mp menu button so select it and add the unclicked and then we can simply drag in our shooter game instance get it and show the other menu so show multiplayer menu and after we did this we only need to remove the main menu so we're gonna remove from parent and that's our main menu so that's self and that should be good to go now we can do the same thing for the multiplayer menu so if we open up our multiplayer menu and go into the then we're gonna select our main menu button oh i probably didn't rename that so that's the quit game button and that should be multiplayer or that should be main menu so let's rename it and also over here button in menu so now if we go into the graph we can add an unclicked for this or we already have it actually and over here we are going to do the same thing as we did so we're going to grab our game instance and we're going to show our main menu and from here we're gonna remove the current one from our parents and that should be good to go as well so now we need to take a look at our connection type button to do this we need to open up our game instance and i'm going to add a new boolean in here and that's called is long connection so is long connection and we're going to create a new function in here as well to change it and we're going to call that change connection type so let's get a branch in here and we're going to check our current state of the boolean so drag it in on top of the branch and then we're simply going to change it to the other state so drag into setters so if it's true we're gonna set it to false and if it's false we're gonna set it to true and then let's get a return node so we can also retrieve what value we are on currently so for this we can drag in the bool on top of the return node and that should be good to go now let's open up the multiplayer menu again and in here we're going to create a function as well and we're going to call it set connection type text so let's go into the graph and let's create a new function that connection type text and for this we need one input and that's the boolean so it's long connection and then all we need to do in here is get a bool again and plug it in so we made the text into a variable so we can drag it in the graph over here and then we're gonna drag off and set the text and if it's true that's going to be one and if it's false i'm gonna say no that was a wrong paste i'm gonna say the text is online and that's all we need to do in here so let's grab a return node and hook it up and now we can go we need to make sure we plug in the text object over here as well and now if we go into the event graph on event construct i want to make sure that it always reflects the correct value so i'm simply going to drag off my game instance and get the rule and make sure that we set it to the correct text so we can drop in our function and plug it in like this so that way if we change it in the game instance we we are sure that the menu reflects the correct value as well so that's out of the way let's set up the actual joining and creating of sessions so for this we need our game instance again and we're going to create the events we need so let's go to the event graph and let's create a new custom event the first is create mp session and let's set this up first so let's drag in our solo game boolean and we're gonna set this to false and then we're gonna grab the create session node to create the actual session so create session and for this we need to plug in our player controller so we can simply get player controller and hook it up over here we need to set the maximum amount of players so i'm going to set it to 4 and for the long i'm gonna drop in our island connection boolean so after this on success you want to drag in the open level mode and we can open up our lobby level so let's go into the content drawer and let's make sure we get the correct name so we have our lobby level map and i'm simply going to paste it in here and there's one important setting over here that's the option and you need to type listen in here and that will allow other players to join the session so if you want you could add a print in here when the creating of the session fills so you know it filled so i'm going to do that real quickly and copy the text from my example project so i simply have here fill to create session and i put in a game instance and the name of the function so if i have a lot of prints i can still remember where this is from so this is all we need to do to create a multiplayer session now let's also create a function to join a session so let's get another custom event in here and call this join mp session and for this we need an input so create an input and that's going to be the session result and that's going to be a blueprint session result so you can look for blueprint and this will pop up blueprint session result so first of all we're also gonna set the solo game boolean to false in here and after that we need a join session note so we can simply look for join session again we need to plug in our player controller so we can get it like this and then the search result comes from the input node or the event node and that's all we need to do in here if we successfully connect to the session then it will automatically load into the lobby menu map again you could add a print in here on failure if you would like to so then at least you know if something goes wrong so that's the second event that we need and now we can go into our multiplayer menu to set things up back in our multiplayer menu let's do the host game button first because that's really pretty simple so we're simply going to get unclicked event for the host game button and from here we can call the event that we just created in the game instance so get our game instance reference over here and simply create mp session and that's all we need to do in here so for joining a session we need a little bit more work and first we're going to go into the designer and we're going to add a little slot where we can display the servers that we actually found so to do that i'm going to add a border again and simply drop it on the canvas panel over here now let me get my example project so i can eat with the values so i have it set to 750 200 and 300 from the top so over here let's anchor it to zero from the center then it's 0 300 from the top like the others and then it's 750 wide and 200 big and i need to align it like 0.5 so it's centered then i'm gonna drop down the alpha again so in this border i'm gonna drag in a scroll box and that should be inside the panels over here scroll box and just drop it on top of the border and this will be the actual server list so a scroll box is something like this that will have the well it's actually the details panel so it has the scroll bar on the side and if there's more values then there can actually be displayed in this box then you're able to scroll up and down so we can populate this with the session results that we find so first of all i want to make this border a variable so i'm going to give it a name and that's my border server list and i also want to make the scroll box a variable so that's my scroll box server list and get rid of the space i don't like spaces in my variable names so make sure they are variables on the top right over here both the border and the scroll box and with that out of the way we need to create a new widget so let's get our content drawer up in the widgets folder and i'm going to create a user interface widget blueprint the user widget class oh come on and i'm going to call this my widget blueprint server row and let's open that up and that's actually going to be pretty simple so let me open it in my example project as well so first we're going to drag in a canvas panel again like we usually do and on top of the canvas panel we're gonna drop in a border uh sorry a button and we can give this button eyes so again i'm gonna achieve by looking at the values for my example project and i gave it 750 by 35 and for the border itself i'm going to give it a black background so zero this out and then i'm gonna put the alpha at point seven for the normal one and for the hoovered one this is going to be all zeros and then one alpha and for the pressed one all zeroes and point three alpha and on top of this border i'm gonna get myself a horizontal box and drop it in here and in the horizontal box i'm gonna drop three text objects so get the normal text and drop it in here now i'm going to copy the font from my example project it's the same font as i use in the main menu but it's just a bit smaller so i have it set to 20. so if i paste it over here that should work so it's simply italic and then size 20 that's pretty much all but whatever and and for this i want to rename it so this is going to be my text server name and let's give it an actual text for now as well so server name and this needs to be variable so enable the is variable on the top right over here and for the alignment i'm going to set it to fill and then all the way to the right and center it over here and then i have the minimal desired width set as well and i set it at 175 so it's a little bit bigger so it doesn't move around as much then i'm simply going to duplicate this and this is going to be my number of players so text num players what happened oh come on text num players so let me see that's a variable that's fine and that's going to be something like 0-0 so for aligning this we need to set it to fill and then center and center that should be good desired width i have it at 120 and then i have this centered so the actual justification of the text is entered and i didn't know for the server name no that's fine we can leave it to left so let's duplicate this again and the last one is going to be and there we go our text ping and that's going to be the speed of the connection so let's say something about zero milliseconds and for aligning this let's have a look align it to the right and then center that spine and i also have it set to desired width 175 and justification centered so that's good i think and then for the horizontal box we probably want to fill it so that looks a little bit better so this is going to be the server row widget that we were going to use inside the scroll box and we need to set it up in the graph as well so let's dive into the graph and we need a variable in here and that's going to be our blueprint session result so let's create that first and that's the session result and that's a blueprint session result and we also need a reference to the multiplayer menu so create another variable widget blueprint mp menu and that's the wiki blueprint and the menu variable there we go so the first thing we are going to do is create a new function in here so let's just get rid of this stuff and we're going to create a custom event and call it update server row info and that has a session result as an input so give it an input caching result and that's our blueprint session result again so the first thing we're going to do is set the actual variable on this widget so drag in the setter and plug it in over here and then we're going to populate the text in our widget so let's drag in the server name first and we're going to get a text and from the session result we can drag off and get a little bit of information so unfortunately it's not a lot i hoped they would have expanded this in unreal engine 5 but they didn't so these are the only things we can actually get in a blueprint session so the current amount of players the maximum amount of players the ping and the server name so if you want to get more information you would have to dive into third party plugins or you would have to work through c plus so for now this is all we have to work with so we're gonna get the server name now this is gonna return a huge name and what i'm gonna do to keep things a little bit clean is split the string and this will simply spread it in two pieces and this would give something like my computer name and then a dash and then a whole lot of numbers so i'm going to put a dash in the string to search and then it will search from the start and it will split the string in two parts and everything right to the dash i don't want to use it so i only want to use the left string and i'm simply going to plug it in here and it will create a new text so that's fine so that will set the server name now we're going to drag in the text number of players and also get the set text node and hook it up now we can get the session result over here and we can get the amount of players and the maximum amount of players so let's get both of those maximum players and let's also get the current amount of players and then over here i'm going to get a format text node and for this we can simply plug in parameters so if i do an open bracket open bracket a close bracket and then dash and then open bracket b close bracket then those will return as wild cards and i can plug things in here so this would be my current amount of players in a and my maximum amount of players in b and that would be the text for the amount of players and the last thing we want to do is set the pink text so again we're going to drop in the object over here and set the text now we're going to get the ping from the session result so drag over here get ping in milliseconds and we're going to format text again though i want this to be the wild card and then milliseconds and i can simply plug this in over here and plug this in the set text node so this will display the correct information and let me see i think we can also set up the unclicked event in here so if we this entire widget is a button so this would have an unclicked event so we can look for the button over here and add on clicked and we want to get our game instance so if we click this button we're gonna join the session so we're gonna get our game instance and we want to cast it to our shooter game instance and from here we can call our join session event so join mp session and for the result we can drag in the variable that we have stored on here and then we could disable some buttons on the multiplayer menu so let me see the server list and the menu buttons and i don't think we have them set up as variables so we do have the server list but for the menu buttons i'm gonna promote the border to a variable as well so border menu buttons is variable and then compile and save it now i can go back into my server row and over here we have a reference to the multiplayer menu so i'm gonna get my border menu buttons and my server list and i'm simply gonna set these to not enabled so drag over here set enabled and set it to false so that way if i have clicked the join game button i would need to wait for something to happen and i cannot mess everything up so this is what we are going to use for the server row widget we're gonna save and close it down and back in the multiplayer menu we can now set up the actual search game function so let's go into our graph and let's get an unclicked for the search game there we go so let's get in our border server list here and we want to make sure that we can see it so we need to make sure that it's visible so set visibility and set it to visible so by default we're actually going to hide it so let's go to the designer and let's select our server list and on the right side here let's set it to hidden and now we're gonna grab our border server list so sorry our scroll box server list so that's the actual list with the servers and we're gonna clear it so if we open up the menu again for example and there's still stuff left in there we need to get rid of it so we're gonna clear the children and we're also going to need a array in here so we're going to create that that's a new variable and that's going to be all server row info widget blueprints and those are server row widget blueprints and that's an array so we're gonna drag in that array over here and we're gonna clear it as well so we're going to start with a clean slate every time we open up the menu every time we click the button i'm sorry so after we click the button i'm going to set the text on the actual button so that's my text search game button and i don't know if that's a variable yet so let's select it over here it's not so i'm gonna rename it text urge game button and that's a variable go back to the graph and drag it in so i'm gonna set the text of the button and i'm gonna set it to searching then i want to get my border menu buttons and i want to disable it so i can't go around and press all other kinds of buttons so set enabled and set it to false so disabling the border will disable all the buttons inside of it so that's just a little simple trick now we're going to actually find the sessions so look for the find sessions node and plug it in over here so for this we need our player controller so simply look for player controller and plug it in we need to set up a maximum amount so something like 10 or 15 might do fine we have a scroll box so everything should fit and we need our long connection boolean so we're gonna get it from our game instance and we have a reference to that so we're going to drag it in get a long connection and plug it in the find session node so let's do on failure first obviously it filled so we're gonna add a little print so we can at least see something went wrong and i'm gonna copy and paste the text from my example project so it simply says search field and then where that is coming from so my multiplayer menu button search game and then we need to make sure that we reset a few things so we're gonna get our text urge game button and we're gonna set the text back to the original text i'll drag it in here and that would be search game and we also want to make sure that we enable all the buttons again so get our border menu buttons and set it back to enabled and that's done so then we can drag off the results over here this will return an array so first of all let's see if there's actually something in here so let's get the length of the array and let's get a branch check if this is 0 or not so equal and plug it in and we're going to plug this into the on success pin so if this is true then again we don't have any sessions so i'm simply going to print something that says no sessions found and then also make sure you plug it into the reset notes over here for the search game button text and the border so no questions and then when we actually did find something we need to do some stuff so we're going to get a for each loop over here and we can plug in the array that came from the find sessions node hook this up to the pulse pin over here now for each entry in this array we're going to create a server row widget so we're going to create a widget and that's our server row that we just created so we're gonna plug this in like so so let's go into the server row widget because i forgot a little thing so let's open up our content drawer and open up our server row so in here we set the multiplayer menu reference and we need to make sure that it's instance editable and we also enable expose on spawn and if we do that and we compile and save it then we can go back to the multiplayer menu and refresh this node and now it will actually have a pin for that variable if we expose it on spawn so we can simply drag off here and type self as a reference for the multiplayer menu and for the owning player that's going to be our playercontroller getplayercontroller and that will create the widget so for this widget we want to set it up so we can drag over here and do update server row info so that's the custom event that we created and in here we can simply plug in the session result from the array so this will populate it with the correct name and the amount of players and the ping and then we need to make sure that we store this in an array so we can get rid of it later so we're gonna drag in our all server row widgets and we're gonna add a new item to it connect it up over here and the item we're adding is the widget that we just created and then all we need to do is make sure that it's actually inside of our scroll box so we're gonna get our scroll box server list and we're gonna add a child connect it up and the child is going to be the blueprint the widget that we just created so we can hook it up over here and this will populate the scroll box with all the servers that we found and then we can click on the little scroll box list thingy and that will load us into the game or that's the id actually now i think we only need to set up a little bit in our begin play so that's not beginplay but event construct in this case and in here we are going to reset a few things so if we open it up we know the menu is fresh and good to go so first of all we're gonna get our scroll box server list and we're going to clear all children plug it in here then we're also going to get our array of server info rows and we're going to clear it just to make sure and then we want to make sure that the text for the search game button is also correct so drag it off here set text so this is mainly when we have played a game for example and we go back to the main menu and then we open up the multiplayer menu again then we want to make sure that everything represents the correct values and texts again so that's what we're doing here so we're setting the text back to search game and we want to make sure that our menu buttons are enabled and also our border server list is enabled so drag both of them in here and set enabled to true and make sure you connect both of them and the last thing we want to do is hide the border server list though it only shows if you're actually searching for a game so set the visibility and we're gonna set this to hidden so i think this should do it and we could be ready to test it so let's make sure we save everything in case of a horrible crash and then let's set the number of players to 2 and the net mode should be standalone that's fine and let's launch this so we have two menus let's see how we're gonna align this so we have two of the same names that because they still use the same information so we could work our way around it by simply hosting a game first on one side and then we can change the name on the other side and then both of us will have different names so now i can search a game over here so the layout is meshed up because it's not full screen but oh now it's working and you can see the actual server is popping up over here and i can select it and then it should connect to it and here we go so now both of the players are in the lobby level and they are connected to each other unfortunately there's not really a whole lot we can do yet but we have the basic setup and we can create a session join a session and we have a little bit of server information on the screen so for this video i think we're gonna stop and in the next video we're gonna continue and we're gonna set up our lobby a bit more so we have a widget in the lobby we can start the game and we can also see the players that are connected to the lobby so thanks for watching everybody i hope you enjoyed the video and i hope everything made a little bit of sense if you like you can join the game dev raw discord and talk about game dev stuff or ask questions about videos or simply show off something of a project that you made and otherwise i hope to see you in the next video thanks for watching everybody talk to you later

Channel: GameDevRaw

Views: 35,325

Keywords:

Id: tfC7HtP1oKQ

Length: 49min 0sec (2940 seconds)

Published: Fri May 13 2022