How to Make a Multiplayer Game - The Lobby

welcome back to blackthorne prods this is the first tutorial in a two-part series where we will create a quality multiplayer lobby system using unity we'll begin by connecting to an online server which will then bring us to the scene where we can create rooms or join existing ones which are listed right here once you're in the room you'll be able to see who is in it with you and choose a unique character's skin this is a blueprint to allow players to experience your game with friends or strangers from all over the world lots of fascinating things to learn and cover here but first this video is sponsored by xsola they've recently created a powerful partner networking tool for example you could reach out to various youtubers offering them a revenue share if they promote your creation and successfully get people to buy it you don't need to contact each one personally your program will be listed among others ready to be joined by a massive community from 40 plus countries and territories this is an easy to use and flexible system with lots of control over who gets access to your program detailed performance indicators that show you how much revenue is being driven by each influencer in your community and cherry on the cake extra handle all legal agreements and payouts this is basically a golden marketing opportunity content creators help sell your work and in return gets a small share of the pie everyone wins check out the link in the description where you can register a publisher account and start using the partner network alright so let's get right into it with step number one which is to connect photon to a brand new unity project so for those who don't know photon is a very popular service they let us create quite easily and quickly multiplayer games inside of unity the first thing we need to do is to head over to the unity asset store that's asset store.unity.com in here just search for photon 2 and look out for the free version of photon 2. once you have found this you can click on the add to my assets button then open it up inside of unity you will see that photon 2 has now appeared inside of the package manager so now just download it and import that package into your project once you're done you'll get prompted to add an app id so we need to create first of all a photon app let's head over to photonengine.com if you have an account go ahead and sign in otherwise go through the quick process to create a free account once you're logged in go to the dashboards this is the place where you can see all your existing photon apps let's create a new one by clicking on this button here we'll change the photon type from photon real time to photon pan and then just name your app whatever you like i'll call mine's black thumb prod tutorial then just click creates now let's just copy the secret app id of the app we just created back into the viewing tv we will just paste it in here and click on the setup button all right perfect photon is now correctly installed and linked to our projects step 2 is to create our first scene that lets us type in our username and then click on a button to connect us to the server once it's successfully connected we'll get moved to the lobby scene so we've went ahead and prepared this very simple little scene called connect to server the scene basically just has two important elements which is this input field for the username and this button so now let's create a new empty game object to the alcohol connector server once it's been created i will add to this object a brand new c-sharp script also called connect to server first thing to do is to import the photon.pan namespace so we can use all the multiplayer functionalities of photon within the scripts we'll also import the umt engine.ui namespace so we can access ui from the scripts let's then create two variables the first one will be a public input field variable called username inputs and the second will be a public text variable for the button text so let's now create a public void function called on click connect so we're going to want this function to get called when we click on our button that's why we need to make this a public function so we only want to connect to the server if we have typed in a actual username so i'll quickly check if usernameinput.txt.length is greater or equal to 1. if that's the case then we'll say photonetwork.nickname and we'll set it equal to usernameinput.txt so this line basically sets this player's username or nickname has photon call sets to whatever we typed in our input fields later on we'll be able to list all the players in a room and display their nicknames thanks to this line okay moving on once we click on the button we would like to change the text of the button from connect to connecting so the player gets informed of what's happening since the connection process can take a couple of seconds depending on your internet speeds so i'll simply say button text dot text and set it equal to connecting finally the last line of code that we need inside of this function is the line that actually connects us to the photon server that's extremely simple to do we just need to type photonnetwork.connect using settings and that's it okay so when we click on our button we are going to call this function that will connect us to the photon server and as a quick reminder a server is the essential element in any multiplayer game is what lets us pass information from player to player we now need a way to know if we have successfully connected to the server and if so we would like to go to our next scene which is the lobby this is super simple to do let's just inherit from model behavior pan callbacks so a photon callback is a special function that gets called automatically by photon when a certain event happens so in our case we'll create the public override voids unconnected to master function note that the naming has to be exactly the same as mines as the name suggests this function will get called automatically by photon when we have successfully connected to the main server and so in here we just want to load our lobby scene so i'll quickly come up to the top of my script and import the unity engine scene management namespace so now we can type inside over callback cmanager.loadscene and i'll call my next scene lobby and that's all the code that we need at the moment so let's save the script and head over back to unity first of all i'll drag and drop my input field and my button into the respective slots i'll then select my button and add to it a on click events we can now drag and drop the connected server empty gear objects then select the connect to server scripts and find the on click connect function that we created i've also went ahead and made a completely empty scene called lobby let's now go to file build settings and drag and drop both of my scenes in there okay so let's press play i'll type in my name and then click on the connect button and after a couple of moments we'll get transitions to our empty lobby scene which means that we've successfully connected to the server great job alright so now step three is to be able to create a room inside of the lobby so we've went ahead and prepared the lobby scene a little bit so inside of a canvas object we've got two different empty gear objects the lobby panel and the room panel at the moment the room panel is deactivated so that we can only see the lobby panel this panel has got another game object called the create section that just contains an input field so that we can type the name of the room that we want to create and a create button if we now deactivate the lobby panel and activate the room panel all we've got at the moment is a text element where we will read the name of the current room that we're in later on this will be the place where we will be able to list the players that are in the room and select our characters okay so the goal of step 3 is to be able to create a room and in photon when we create a room we automatically join the room that we created so we will also want to deactivate the lobby panel and activate the room panel and display the name of the current room we are in so with that said i'll go ahead and create a empty object called lobby manager and once it has been created i'll add to it a brand new c-sharp script also called lobby manager we'll start off with the other scripts by importing the photon.pan namespace but this time we'll also import the photon.realtime namespace that gives us some extra multiplayer functionalities to work with and finally i'll import the unity engine.ui namespace let's begin by creating a public input field variable that you guessed we'll store our create room input fields we'll also create two public game object variables that will store both the lobby panel and the room panel so we can activate and deactivate them when we need lastly i'll make a public text variable called room name they'll store the text elements that will display the name of the current room we are in okay so inside of the start function so when the lobby scene loads up for the first time we'll type photonetwork.join lobby we're doing this because we need to be inside of a photon lobby in order to create a room now let's create a public void on click create function they'll get called whenever we click on our create button in here we'll first of all check if our createinputs.txt.length is greater than or equal to one so we're just checking that the name of the room we're trying to create is not empty if it's not then we'll call the photon network dot create room function in here we need to pass in the name of the room that we want to create so i'll type createinput.txt and there we go it's as simple as that we can also add room options to the room that we create for example we can assign a max number of players so if you want your game to only allow three players max then you could type new room options and set max players to three like i mentioned before when we create a room we automatically join the room that we created so let's switch from the lobby panel to the room panel once we join the room to do that we're going to need a photon callback so like for the previous script i will inherit from model behavior pan callbacks this will give me access to the public override void on joint room function as the name suggests that this function will get called automatically by photon once we join a room and so also when we create a room in here i'll deactivate the lobby panel by saying lobbypanel.setactivefalse and i'll activate instead the room panel by saying room panel.setactivetrue let's also set the roomname.txt to display the current name of the room we are in to get that we just need to type photonnetwork.currentroom.name let's also add before that the string room name okay so that's all the code we need at the moment so save the script and head over back to unity in here i will assign all my public variables let's drag and drop the input fields both the lobby panel and the room panel and of course the room name tanks inside of the respective slots we also need to select our create button and add a on click event to it i'll then drag and drop my lobby manager object into this slot then select the lobby manager script and finds the on click create function that we just created and that's it so now let's press play and test it out so i will call myself liam and then connect to the server and now i will type in test for the room name and then click on the creates button perfect so we're now inside of the room panel and the name of the room is getting correctly displayed great work guys let's keep this up okay so step four is to display in the lobby the list of all the rooms that are currently available so let's make a couple of changes to our lobby panel let's create a scroll view that i'll call room list then just resize it and place it wherever you would like in your scene we don't want to be able to scroll horizontally so i'll uncheck this horizontal checkbox as well as delete the horizontal scroll box i'll replace this placeholder art with some art that we made we also went ahead and created this room item button that we turned into a prefab these are the elements that we will be spawning that will represent the different rooms that are available that we can click on to join the room so these room items are going to get instantiated inside of the viewport content object in our scroll view the problem is that at the moment they are not displayed correctly since they are stacking one on top of the other to fix this we're going to add a vertical layout grip component to the content objects and now you'll see that they are all getting displayed perfectly i'm now going to add a new c-sharp script to my room item prefab called room item this script will be in charge of displaying the correct room name for each room item and then later to join the correct room when we click on the button so i'll start off by importing the unity engine.ui namespace i'm going to create a public text variable called room name they'll just store this room items text so let's create a public void function called set room name they'll take in has a parameter a string that i will call underscore room name then like the name of the function suggests we will simply set our roomname.txt to be equal to the underscore roomname parameter okay that's all we need to do in the script for the moment now inside of the lobby manager we need to instantiate in our view a room item for each room that is currently available so we're going to create a public game object variable that will store our room item prefab then we'll create a list of room items that i will call room items list that will set it equal to a new list of room items finally we'll make a public transform variable called content object they'll store the object in our scroll view that we're going to parent our room items to so to retrieve the list of all the available rooms we're going to use the public override void on room list update callback function like the name suggests this function gets called automatically by photon whenever there has been a change in the room list so whenever a room has been created modified or destroyed this function will get calls we can retrieve the list of rooms thanks to this room list parameter so inside of this callback i'll just call a function named update room list that'll pass in has a parameter the room list that we have retrieved from the callback so let's now create that void update room list function that takes in has a parameter a list or room infos called list so inside the function we want to do two things the first step is to destroy all the current group items in the scene and then the second step is to repopulate the scene with the newly updated room items so i'll loop through my room items list with a for each loop so for each room item item in room items list will destroy item docky object once that is done we'll just completely clear out our room items list by using the dot clear function on the list okay so we have finished step one all the old room items have been destroyed and the list is now completely empty so now step two is to instantiate a room item for each room that is available and then we also want to add that room into our list so let's look through the list of rooms that we retrieved from the photon callback so for each room info room in list we'll instantiate a room item prefab and has a second parameter we can pass in the object that we want to be parented to so i'll use my content object variable we will store this newly instantiated room item inside of a room item variable called new room that way i can now say new room dot set room name which i remind you is the function we created a couple of moments ago and we can pass in has a parameter room.name which refers to the name of the room we are iterating through at the moment finally we'll add the new room to our room items list by using the dot add function on the list so this bit of code is a little more complex than what we have done so far but if you break it down and understand the technique we are using it's pretty straightforward we're just keeping a list of room items and then each time we get an update from photon thanks to this on room list update callback function we were just destroying all the current elements in our list and clearing the list out and then we are instantiating a room item for each different room available changing the name to the correct name and adding that new room into our list okay so let's save the script and head over back to unity in here i'll drag and drop the room item prefab inside of the slot as well as the content object in my scroll view inside of this slots let's not forget to select our room item prefab and drag and drop the text elements inside of the room name slots okay so with that done we can test if our system is working to do so i'll hit ctrl b or command b if you're on the mac to create a build of the game that will simulate another player so once both players have connected to the server i'll create a room with this player called test and perfect the other player can see that there is a new room available called tests we are really advancing well on the slow lobby projects so let's continue with step 5 which is to actually be able to click on a room item to join that room so let's open up the room item scripts we'll start off by creating a lobby manager variable called manager then inside of the start function we'll set manager to be equal to find object of type lobby manager this line will search our scene for the game object that has the lobby manager script attached to it and it will store that component inside the manager variable now let's create a public void function called on click item this function will get called when we click on a room item inside of this function i'll simply call manager.join room they'll pass in has a parameter or roomname.txt now of course this function doesn't exist yet on a lobby manager so let's go ahead and create it now so i'll make a public void function called join room that will take in has a parameter a string for the room name all this function we'll do is call the photonnetwork.join room function we'll pass in the room name parameter since that's the name of the room we want to join then once we join the room our own joint room callback function bullet calls and we'll hide the lobby panel show the room panel and modify the room text to the correct room's name okay so let's save the script and head over back to nothing if we select our room item prefab we can add a on click event to it drag and drop our room item script and then select the join room function let's now test it out so i'll create a room with this player called test and he goes straight to the room panel now with this player the test room appears in the scroll view and if we click on it we're also in the test room that's some excellent progress guys okay with step 6 we want to be able to click on a button to leave the room we are currently in so we went ahead and created this leave room button let's now open up our lobby manager scripts i'm going to create a public void function called on click leave room this is the function that will get called when we click on our button in here we'll simply call photonetwork.leave room it's as simple as that now let's use the public override void on leftroom callback function as you probably guessed that this function will run automatically once we leave a room in here we'll want to deactivate the room panel and activate the lobby panel since we want to go back to our lobby okay so let's go back to unity i'll select my button and add a on click event to it let's drag and drop your panel and select your scripts and then find the on click leave room function we test it out so you'll see that we can nicely leave the current room that we are in and head over back to the lobby however if you test everything you'll notice that there are some bugs for example if one player creates a room called a and other player creates a room called b and then that player leaves his room a you'll notice that he doesn't see room b appear in the lobby and there are a few more bugs like that thankfully for us they're all very quickly solved so step 7 which is our last step in this tutorial is going to be about fixing these annoying bugs so the first problem lies in the fact that when we create and join a room we leave the photon lobby but when we leave a room so when we call this photon network dot leave room function we don't join back the lobby we simply get connected back to the photon server and that's a problem since we need to be in a fulltime lobby in order to get updates about the current rooms available to fix this we'll add a public override void unconnected to master callback function and in it we'll join our lobby by saying photonetwork.joindope okay so now when we leave a room we get automatically connected to the photon master server and so our callback will get called we will successfully rejoin our lobby great the second problem is that for a unknown reason sometimes the on room list update callback function gets called twice or more in a very quick succession and that tends to bug the room list so to be on the safe side it's better that we add some kind of timer so that we only allow an update every 1.5 seconds for example so i'll create a public float variable called time between updates now set it to 1.5 seconds by default then let's create a float variable called nextupdatetime so now in our room list update callback function i'll check if the current time in the game so time.time is greater than or equal to our next update time if it is then we are allowed to update our room lists now let's just set our next update time to be equal to the current time in the game plus our time between updates variable and that says you should have now a completely working and bug-free lobby where you can set yourself a username create rooms check out the available rooms join existing ones and leave the current room very soon we'll be able to list the players which are in the room through this menu as well as customize their appearance finally we'll spawn the players inside the game scene hopefully this tutorial was helpful remember to hit the like button and stay tuned for lots more game development content cheers

Channel: Blackthornprod

Views: 3,878

Rating: 4.9519038 out of 5

Keywords: blackthornprod, unity, tutorial, c#, programming, art, animation, multiplayer game dev, lobby, multiplayer lobby, photon 2, network, connect to server, create and join rooms, list rooms, make a multiplayer game in unity, online, multiplayer tutorial, c# tutorial, beginner, basics, intro to multiplayer, How to Make a Multiplayer Game - The Lobby

Id: y69wBS13wwA

Length: 24min 47sec (1487 seconds)

Published: Mon Sep 20 2021