Multiplayer character selection - UNITY & PHOTON 2 Tutorial!

welcome back to black thumb prods in this game dev tutorial we'll continue developing the foundations for a solid multiplayer video game using unity and photon 2. in the first part we began creating the lobby system players can connect to an online server and create and join rooms so they can play with friends or strangers from around the world today we'll see how to list the player names in this menu as well as customize their character and finally spawn them all together in a game scene before we begin though this video is sponsored by xola 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 xola 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 jump right into it with step number one which is to list the current players that are in a room so we went ahead and created this prefab called player item it just has this nice little rectangular background and inside of it we've got a text element which will display the name of our player we have a image element for the poor avatar and finally we've got these two arrow buttons that we'll use later on to select the character skin that we want to play with but for now we'll deactivate those buttons we also created and attached to the support item prefab a brand new c sharp script called player item now inside of the room panel we've created this game object called player listing has the name suggests so this is the place that we're going to show the current players that are in the room so we're going to instantiate our poor items in here however at the moment if we drag and drop a couple per items in the player listing game objects they all stack one on top of the other which is the same problem that we had with the room listing in part one of this series so to fix this we'll add to our pure listing game object the horizontal layout group component this will make everything get displayed correctly feel free to tweak the settings of this component to make it look exactly the way you want okay so our job now is to instantiate these pro items for each priorities in the room so let's open up the lobby manager script we're going to start out by creating three different variables the first one will be a list of per items called player items list that will be equal to a new list of per items so this will be the list that will store the current poor items that are in our per listing next off we're going to create a public per item variable called prayer item prefab which will store as you probably guessed the player item prefab finally the last variable will be a public transform called per item parents which will be the game object that will parent or put items to let's now go ahead and make a void function called update per list now like for the update room list function it will be divided into two steps the first step is to delete all the current poor items and to clear the poor items list and the second step is to spawn in a per item for each player that's in the room and to add that player item to the list okay so let's loop through our poor items list with a forage trip so for each put item item in player items list we'll destroy item.gameobjects and then after this loop we'll clear out our list by using the dot clear function on our pro items list ok so now step 1 is complete all the old items have been destroyed and the list is clear we now have a clean slate to work with so now for step 2 in this function let's start off by just checking that we're actually in a room we should always be in the room when this function will get cold but it's good practice to do this check anyway so just to be on the safe side and to avoid any unexpected bugs so we'll just check if photon network dot current room is equal to null and if so then we'll just return out of this function which just means that all the code underneath this if statement will not run now let's create this for each loop so this one is a little weird but we're basically looping through the photon network dot current roon.players so this statement will retrieve the current players that are in a room but instead of getting those prayers in a form of a basic array or lists like we're used to work with they come in the form of a key value pair which is basically a double list where each item has a key so in this case an integer which represents an id and a value so in this case the actual photon per component which is what matters to us because it's this prayer component that we'll use to retrieve the player's username for example so now in this forge loop we'll instantiate our player item prefab and we will parent it to our prayer item parent game objects let's also store this newly instantiated game object inside of a player item variable called new player item finally let's add this new pro item to our pro items list with the dot add function and with that our update per list function is complete all we need to do now is call this function in the right places so the first place where we want to call this function is when we join a room so in our unjoined room callback function i'll call update player list now let's create two new callback functions the public override void on player entered room and on pure left room so the names of these functions suggest the emperor entered room function will get called automatically by photon when a new player enters the room we are in and the enter left room will get called when a player leaves the room we are in so in both of these callback functions i'll call my update player list function and that's all we need at the moment so let's save the script and head over back to unity in here let's select our lobby manager game objects and drag and drop or put item prefab into the slots and then we'll drag and drop the per listing game objects into the pre-item pairing slots so now if you simulate another player by creating a build of the game by pressing ctrl b or command b if you're on a mac you'll see that everything is working perfectly number of player items represents exactly the number of players that are in the room great job guys let's now move on with step two which is to display the correct username for each player to do so we'll start off inside the pure item script i'm going to import the unity engine.ui namespace once that's done i'll create a public text variable for the player name now i'm going to create a public void function called set player info they'll take in as a parameter a photon prior variable called underscore player at the moment inside of this function we'll just set our playername.txt to be equal to underscoreplayer.nickname that's all we need here now let's go back to lobbymanager script and come to the place where we instantiate our new poor item right underneath that line we'll say new player item dot set player info and we'll pass in player.value which refers to the player value in the key value pair where it's rating through and that's all we need to make it work so let's save the script and go back to our game engine let's not forget to select our per item prefab and drag and drop the per name text into the slots if you now test it out you'll see that the correct usernames are getting displayed for each per item that's really cool to see okay let's tackle step 3 which is to make a few modifications to our personal per item so basically what i mean by that is that it would be nice to differentiate our player from the others in the room by slightly changing the background color of our player item for example we will also want to activate the arrow buttons on our player to do so i'm going to open up the pro item script let's create a private image variable called background image then let's make a public color variable called highlight color finally we'll make two public game object variables for the two arrow buttons so one for the left arrow and another for the right arrow now instead of the start function we'll set our background image variable to be equal to the image component that is attached to this game objects now let's make a public void function called apply local changes so this is a function that we want to call inner lobby manager scripts only on our player item so the one that represents our player in here we'll set the background image.color to be equal to the highlight cutter then underneath this so we'll just activate both of our arrow buttons by saying set active true okay with this function complete we'll head over to lobby manager scripts so right underneath the place where we are setting the prior info we'll create an if statement and check if player.value is equal to photonnetwork.localplayer so we are basically checking if the value in the key value pair we are is rating through is the local player in other words our personal player if that's the case they will call the applied local changes function on our new per item and that should do the trick so let's save the script and jump back to unity before testing it out we need to select our pure item prefab and choose a nice highlight color as well as drag and drop both of the arrow buttons into the slots and as expected it's working great we can now easily see who's our character and the arrow buttons have now been activated okay moving on with step number four which is all about changing our prayer avatar so we want to be able to click on these hour buttons to change the character we're going to be playing with in the game and of course we want this to sync across the network so that all the other players in the room can see what character we have chosen so we've went ahead and created these three different character sprites so we just need to change the sprite of our prayer avatar image so let's open up our pur item script let me just quickly warn you that the code we're about to write is a little more complex than what we have done so far so take your time and try to understand most of it but if you don't that's completely fine when you're just getting started out with a new topic like multiplayer game development it's okay not to understand everything right away just copy what i'm doing and you'll learn stuff without even knowing it and it will be clearer and clearer the more you get exposed to this kind of cults so to be able to synchronize across the network the modifications that we make tour prayer avatar inside of the room we are going to be using what photon calls custom properties so the first step is to make this really weird looking variable so it's exit games.client.fulton.hash table and we will call this variable prior properties and we will set it equal to a new exit games.client.fourton.hashtable so this might seem already a bit complex but i promise you that it's not it's basically just photons version of a hash table and for those who don't know what a hash table is it's just like an array or a list but instead of referring to the items with their index we refer to the items with a name so for example i could set prayer properties name to be equal to liam or pro properties h to be equal to 19 and so on and to retrieve the value we just say player properties and then inside of square brackets type the name of what we want to get so in this case either name or age okay so with that cleared out we will also create a public image variable for our player avatar and so let's also make a public sprite array called avatars that will store all three of our different player sprites now let's create a public void function called on click left arrow of course this is the function that will get called when we click on our left arrow button so basically we're going to be working with the prayer properties player avatar item it's going to contain a value between 0 and 2 which will represent which character that player has chosen so if we hit the left arrow key we will first of all check if the print properties player avatar is equal to zero note that you'll have to cast this into an integer otherwise you'll get a bug if it is then we'll set our player avatar property to be equal to the size of the avatar's array minus 1. that way if we have three elements in our array like we will then our parameter property will be set to two else so in any other case then we'll just decrement our peer avatar property by one to do so we'll just set it equal to itself minus one so for example if our prayer avatar property is at two and we hit the left arrow button then we'll go down to one okay now we're going to create the public void on click right arrow function and we'll just copy all the code from the first function and paste it in here we'll just change the if statements to check if our property is equal to the length of the avatar's array minus one and if it is then we will set our property to be equal to zero otherwise so in any other case then we'll just increment our property by one by setting it equal to itself plus one okay so with that done we are now successfully modifying our player avatar property when we are pressing on the arrow buttons but all these changes are still local they will not get transmitted to all the other players in the room to make this happen at the end of our function we will say photon network dot set player custom properties and in between the parentheses we'll pass in our entire prayer properties hash table this line will effectively notify all the other players in the room that a custom property has been changed on one of the players of course copy this line and paste it at the end of the other function as well now that we have passed our property to the network we're going to inherit from monobehaviour pun callbacks then let's create the public override voice on player properties changed callback function this function will occur on every one of our prayer items each time a property has been modified on the network the player who got his property modified is stored in this target player variable now let's quickly come back go to the top of our scripts and let's make a player variable called player now if you're confused about where this prayer variable type comes from it's just a pre-made photon type that describes the different players that are in our game so then inside of our set period info function we'll just set our player variable to be equal to the underscore player parameter like that we have now stored the photon player that this per item represents now back to our callback function we'll check if the target player is equal to this player items player we're doing this check since we only want to update the player avatar image for the player who modified his avatar if it is then we'll call a function called update player item and we'll pass in our target player let's now create that update per item function and it will take it as a parameter a player variable called player in here we'll check with an if statement if player.custom properties dot contains key player avatar so we're just checking to make sure that the player has a custom property called prayer avatar linked to him if he does then we will set his pre-avatar sprites to be equal to the avatars array within index of player the custom properties of per avatar and then we'll cast that value into an integer otherwise we'll get a little error message so now our pre-avatar will get changed on all prayer computers we also want to save the avatar that we choose so imagine we pick avatar 2 and then leave the room when we join back the room we still want to have avatar 2 picked to do so we'll just set our local player properties per avatar to be equal to the synchronized player the custom properties player avatar but if this pro doesn't have a synchronized custom property yet then we'll just set his prayer properties per avatar to 0. this just makes sure that the property exists otherwise it will cause an error message when we start clicking on the arrow buttons let's finally make sure to call our update player function inside of our setplayerinfo function and we'll pass in our prayer parameter this way we'll update the avatar once at the very start when we just join a room there is one last thing that we need to do to make it all work and that's just to come to the place where we are creating our rooms let's just add another room option after our max players called broadcast props changed to all and we'll set it equal to true this just lets photo know that we want to be able to send out and receive other players property changes within this room so this might be a little confusing to you at the moment and we did cover this quite advanced multiplayer topic relatively quickly but this is sort of a deep dive into this topic if you're interested in learning more about custom properties or any other topic let me know in the comment section and we'll do our best to try and cover them but for now just try to reread all the codes here and break it down slowly but shortly anyways let's save the script and head over back to unity let's not forget to drag and drop our pro avatar image in the slot as well as all three of our different prayer sprites inside of the avatars array we'll also select our left arrow button and add a on click event to it drag and drop the per item script and choose the on click left arrow function of course repeat the same process for the right arrow button but this time select the on click right arrow function instead so now if you test it out you'll see that your character selection is working flawlessly and is getting beautifully synced to all players amazing work the hardest part is now over so congrats to you and let's tackle the next task so step five is to be able to press a play button and bring every player that was in the room to the game scene so we went ahead and created this new button in our room panel so let's open up our lobby manager script and make it work so the first thing that we want to do is to only show the play button for the master client in other words for the player who created the room of course if the player created the room leaves then the first person that joined the room will get assigned to the master client title and he will be able to see the play button and so on so let's create a public game object variable for the play button then let's just create an update function and check if photo network dot is master client if that's the case then we'll set play button dot set active true else so if we are not the master client then we'll type play button dot selector false we also probably don't want to be able to play the game if we are alone in a room we would like to have a minimum number of players before being able to play so i will say and and photo network the current room the prayer count has to be greater or equal to two so now we'll only display the play button for the master clients if we are at least two players in a room okay let's now create the public void on click play game function this is the function that we'll call from our on click event on the button in here i'll simply say photonetwork.loadlevelgame so instead of using the classic scenemanager.loadsin function we need to use this photon version to load the actual game scene now the problem is that at the moment the master clients so the one that will click on the play button is the only player that will get transitioned to the game scene all the other players in the room will remain in the lobby so to fix this we only need to add one line of chords so let's open up the very first script that we created in part one of the series which was the connector server scripts and inside this on click connect function i'll say photo network the automatically sync scene equals true and there we go that's now fixed so let's save the script and head over back to unity let's drag and drop the play button inside the slots on our lobby manager scripts then we'll go ahead and add the unclick events to the play button then drag and drop the lobby manager object and select the on click play game function on the lobby scripts we've also went ahead and created this new scene called game so let's quickly open up the build settings under fail build settings and then just drag and drop that new scene alright so now once the master client presses play you'll see that all of our other players in the room get nicely transitioned to the game worlds great step six which is our final task of the video is to spawn inner pro characters depending on which avatar we chose inside of the lobby alright so inside of a folder called resources we've got our three player prefabs now it's really important that these prayer prefabs are inside of a folder called exactly resources one of the prerequisites of photon is that any objects that get spawned over the network needs to come from the resources folder the second prerequisite is that any object that gets spawned over the network needs to have a photon view component attached to it so that's exactly what we did each one of our prefabs has this photon view on it okay so remember that any object that gets instantiated over the network needs to come from the resources folder and a photon view component on it we also created a bunch of empty gum tanks that we scattered around our game scene they'll act as our spawn points so now let's create a new empty game object called player spawner now once it's been created we'll create an add to it a brand new c drop script also called player spotter okay so in here let's start off by importing the photon.pun namespace now we'll make a public game object array called prayer prefams they'll store our three different player prefabs next we'll have a public transform array called spawnpoints they'll contain all of her different spawn points now inside of the start function we'll begin by generating a random number so i'm going to create an integer variable called random number that'll be equal to a random number between 0 and spawnpoints.length underneath this i'll create a transform variable called spawnpoints that will be equal to the spawnpoint array with an index of random number we have now gotten a random spawnpoint from our array it's now stored in a game check variable called prayer to spawn the correct prayer character that we need to spawn for this player so i'll use my prayer prefabs array and for the index we'll of course use our custom property to fetch it we just need to say photonetwork.localplayer the custom properties of playeravatar and that's it let's now actually spawn in our prayer character to do so i'll use the photon network.instantiate function this function is pretty much the same as the classic instantiate function the only difference is that with this photon version the object that we spawn will also appear on all other players computers as well which is of course what we want the first parameter we need to pass in is the name of the object in the resources folder that we want to spawn so i'll use my prayer to spawn variable dot name then the second argument is at what position do we want to spawn them at so i will of course use my spawnpoint variable.position and lastly we need to specify a rotation and so we'll type quaternion.identity which just means no rotation and that's all we need so let's save the script and head over back to unity one last time let's try and drop all three of our prayer prefabs into this array and then all of our spawn points into the spawn points array and there we go our lobby is now completely finished we can connect to a server create join and list existing rooms we can view the players that are in a room change our avatar and even enter the game world and spawn in the correct player hopefully you've enjoyed this mini two-part series on the creation of a multiplayer lobby system in unity from here if you wish to deepen your knowledge and understanding of multiplayer game creation perhaps watch this video or even better we have a full beginner course on youtube where you'll create an entire multiplayer game from a to z thanks so much for watching subscribe and stay tuned

Channel: Blackthornprod

Views: 12,674

Keywords: blackthornprod, unity, tutorial, c#, programming, art, animation, game dev, multiplayer, character selection, photon 2, lobby, unity lobby, match making, how to make a multiplayer game, Multiplayer character selection - UNITY & PHOTON 2 Tutorial!, photon 2 tutorial, coding tutorial unity

Id: D28Drg9MCi4

Length: 26min 5sec (1565 seconds)

Published: Thu Sep 30 2021