{"id":86675,"date":"2020-03-10T21:14:47","date_gmt":"2020-03-10T21:14:47","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=86675"},"modified":"2021-07-29T19:44:05","modified_gmt":"2021-07-29T19:44:05","slug":"creating-multiplayer-games-with-unity-and-pun","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/creating-multiplayer-games-with-unity-and-pun\/","title":{"rendered":"Creating Multiplayer Games with Unity and PUN"},"content":{"rendered":"

Playing a game with others across the world is a common desire for the average video game user. In fact, there are some games that don’t even have a single player mode and opt to be multiplayer only. Creating games is already a complex process, so how does one create their game so it can be played by multiple people at once? For the Unity developer, there is a helpful plugin that makes the multiplayer game creation a much easier process. That plugin is PUN (Photon Unity Networking) created by Exit Games. This plug-in specializes in easing the multiplayer game creation process by handling aspects such as matchmaking, client to server architecture, and cracking down on issues such as latency.<\/p>\n

Though PUN does simplify the process, creating any multiplayer game can still be a daunting task. Some projects have been created to help you get started using PUN. The first project<\/a> is largely codeless, with only the player object’s movement being programmed ahead of time. All required assets have been created in advance with the only item missing is the plug-in itself. You’ll see how to add PUN to the project in a moment. The second project<\/a> is the complete version of what this article covers with all code in their corresponding scripts and the plug-in already imported.<\/p>\n

The article will assume that you’ve downloaded the codeless project. To load it into Unity simply open the Unity Hub application and click the Add <\/em>button as shown in Figure 1.<\/p>\n

<\/p>\n

Figure 1: Adding a new project<\/p>\n

Navigate to your project directory and choose Select Folder <\/em>to add it to the list of projects in Unity Hub. Once done, you can open the project and begin.<\/p>\n

Project Overview<\/h2>\n

First, it’s recommended to get familiar with the project. There are two scenes, one title screen and another multiplayer scene. (You can switch between scenes in the Asset window under Scenes.) As you may have guessed, the multiplayer scene is where players can move around and see each other. The title screen consists of a simple user interface that asks the player to join a multiplayer game. Under the hood, there are three controllers in the title screen: the network, room, and lobby controllers. A lobby is typically an area where players can socialize, change their settings, or view the results of the previous game. This project’s lobby will remain simplistic, with it just being in the title screen and simply handling room creation. Speaking of room creation, a room will be the place where the main multiplayer game takes place. Over in the multiplayer scene, there is only a GameSetup <\/em>object which focuses on the creation of player objects.<\/p>\n

There are a total of five scripts that will be worked on throughout the course of this project. Most of these scripts relate to objects in the two scenes such as the LobbyController <\/em>script going to, you guessed it, the LobbyController <\/em>object. You can also see the PhotonPlayer <\/em>prefab placed within Resources PhotonPrefabs<\/em>. This the path that PUN will take to find and spawn the player object. Once the PUN plug-in is added to the project, you’ll need to come back here and add a few components to PhotonPlayer<\/em>.<\/p>\n

Finally, the project is set up in advance to open a resolution dialog. In order to properly test the multiplayer functionality, you’ll need to run two copies of the game, one in the editor and one from an exe that will be built later. The resolution dialog will give you the option to open the game in windowed mode which will in turn makes the multiplayer functionality easier to view and test. If you want to see how this was put together, navigate to Edit Project Settings <\/em>then select Player <\/em>on the left hand side of the Project Settings<\/em> window. From there make sure you’re looking at PC, Mac, and Linux Standalone<\/em> settings and have a look at the Resolution and Presentation <\/em>section. Note: according to the Unity editor itself, the resolution dialog will be phased out at some point in the future.<\/p>\n

Photon PUN Setup<\/h2>\n

Before getting too deep into the project, you will need to create a Photon app id for the project to connect to the Photon servers. You get this by visiting the Photon website, photonengine.com<\/a>, and either signing in to an existing account or creating a new one. Both options are found under Sign In <\/em>on the website.<\/p>\n

After you’ve logged in, you’ll be in the apps screen. You will naturally need to create a new app to get an app id, so go ahead and select the Create New App <\/em>button. New accounts will have this button in the center of the screen as shown in Figure 2.<\/p>\n

<\/p>\n

Figure 2: Creating a new Photon app.<\/p>\n

Fill out the form, making sure that the Photon Type <\/em>field has Photon PUN <\/em>entered. The name of the project can be whatever you like, and description and url fields are optional. The screen should look something like Figure 3.<\/p>\n

<\/p>\n

Figure 3: App creation screen<\/p>\n

After creating the app you’ll see a new app on the app screen with your app name on it. In it lies the app id shown in Figure 4. Keep this handy, because you will need it shortly.<\/p>\n

<\/p>\n

Figure 4: Getting your app id<\/p>\n

With the app id created, you can move on to setting up PUN into Unity itself. To import PUN into Unity you will first need to open the Unity Asset Store, which can be accessed from the top menu by navigating to Window Asset Store<\/em> as shown in Figure 5.<\/p>\n

<\/p>\n

Figure 5: Opening the Asset Store<\/p>\n

Once opened, search for PUN in the search bar, then select PUN 2 \u2013 Free<\/em>.<\/p>\n

<\/p>\n

Figure 6: Accessing the PUN plug-in<\/p>\n

Click the Download<\/em> button to download the plug-in to your system. After the download is complete, the button will change to Import<\/em>. Click this button and a new window appears showing all the different assets you’re about to import. If you want to, you can leave out the Demos <\/em>folder, but otherwise be sure to import everything. The plug-in is imported but now a new window has appeared asking for an app id. Copy the app id you received earlier from the Photon website into the app id field in the Unity editor. Then click the Setup Project <\/em>button shown in Figure 7.<\/p>\n

<\/p>\n

Figure 7: Completing the Photon setup<\/p>\n

With the app id set up, you are now ready to begin the coding process, starting with the NetworkController <\/em>script. Find the script in the Assets<\/em> window and double-click it to open in Visual Studio.<\/p>\n

NetworkController<\/h2>\n

To begin, you will need using Photon.Pun<\/code> at the top of every script, including this one. From there, change NetworkController<\/code>‘s inheritance from MonoBehaviour<\/code> to MonoBehaviourPunCallbacks<\/code>. Then you can either comment out or delete the Update<\/code> method. This takes care of the setup portion of the script. In the Start<\/code> method you enter the following code:<\/p>\n

PhotonNetwork.ConnectUsingSettings();<\/pre>\n
This code is responsible for connecting the game to the Photon master server using whatever settings are defined in your project. Once the game connects to the server, a simple message will be printed to the Unity console stating which region server the game connected to.<\/p>\n
public override void OnConnectedToMaster()\r\n{\r\n\tDebug.Log(\"Connection made to \" + \r\n        PhotonNetwork.CloudRegion + \" server.\");\r\n}<\/pre>\n
The server you connect to is based on your location. For instance, in this example the connection is being made to the USA East server, signified by the \u201cus\u201d token. There’s also USA West (usw), Europe (eu), Canada East (cae), and many others. The full list of regions and corresponding tokens can be found here<\/a>.<\/p>\n
NetworkController <\/em>is now complete. Now is a good time to double check your code using Figure 8 and save your work. When you’re ready the next script will be LobbyController<\/em>.<\/p>\n
<\/p>\n
Figure 8: The complete NetworkController <\/em>script<\/p>\n
LobbyController<\/h2>\n
In addition to Photon.Pun<\/code>, <\/em>you’ll also need using Photon.Realtime<\/code> and using UnityEngine.UI<\/code> to complete this script. Like in NetworkController <\/em>you also must make sure the script is inheriting from MonoBehaviourPunCallbacks<\/code>. As for Start<\/code> and Update<\/code>, <\/em>you may delete or comment those out. Then declare the following variables:<\/p>\n
[SerializeField]\r\nprivate Text buttonText;\r\n[SerializeField]\r\nprivate int roomSize;\r\nprivate bool connected;\r\nprivate bool starting;<\/pre>\n
The buttonText<\/code> and roomSize<\/code> variables were given the SerializeField<\/code> attribute to make them visible to the Unity editor without needing to make the variables public. Then two bools were declared that will help keep track of the game’s status such as connection to the master server and loading the game room. Speaking of connections, another OnConnectedToMaster<\/code> function is needed in this script, but this one has more going on than in NetworkController<\/em>.<\/p>\n
public override void OnConnectedToMaster()\r\n{\r\n\tPhotonNetwork.AutomaticallySyncScene = true;\r\n\tconnected = true;\r\n\tbuttonText.text = \"Begin Game\";\r\n}<\/pre>\n
First the game synchronizes the current scene with the Photon network. Then we set connected<\/code> to true and change the buttonText<\/code>‘s text to Begin Game<\/em> where before it would say Loading…<\/em> as it was trying to connect. Now that the game is connected, the button in the title screen needs to be able to start the game. To do this, you enter the following:<\/p>\n
public void GameButton()\r\n{\r\n  if (connected)\r\n    {\r\n        if (!starting)\r\n        {\r\n            starting = true;\r\n            buttonText.text = \"Starting Game. Click Again to Cancel\";\r\n            PhotonNetwork.JoinRandomRoom(); \/\/ attempt joining a room\r\n        }\r\n        else\r\n        {\r\n            starting = false;\r\n            buttonText.text = \"Begin Game\";\r\n            PhotonNetwork.LeaveRoom(); \/\/ cancel the request\r\n        }\r\n    }\r\n    else\r\n        Debug.Log(\"Not connected to server!\");\r\n}<\/pre>\n
At the start, the function checks to make sure the game has connected to the master server. If it isn’t, it’ll print a message to the debug console. So long as the game is connected it then checks if the game has been told to start. Assuming it hasn’t, it will begin the game. The button text will change to let the user know that they can cancel the request if desired. Finally, PhotonNetwork.JoinRandomRoom<\/code> will attempt to connect the player to a pre-existing room. Currently, LobbyController <\/em>should look something like Figure 9 below.<\/p>\n
<\/p>\n
Figure 9: The LobbyController <\/em>so far<\/p>\n
Of course, you’re the only one that currently owns a copy of this game at this point. There shouldn’t be any rooms to join. What do you do then? At that point, you must create your own. First, print out a message letting you know that the game failed to join a room. Then, call a soon to be created method that will create a new room.<\/p>\n
public override void OnJoinRandomFailed(short returnCode, string message)\r\n{\r\n\tDebug.Log(\"Failed to join a room... creating room\");\r\n\tCreateRoom();\r\n}<\/pre>\n
The room creation process involves getting a random room number. Then the game makes sure the room is visible to other copies of the game in the network, lets it know that the room is open and limits the number of players allowed in the room to the value of roomSize<\/code>. After that’s set up, the game asks the Photon network to create the game room. In the event that the room number is already taken, a method similar to the one above will be called, and the room creation process will start again.<\/p>\n
void CreateRoom()\r\n{\r\n\tDebug.Log(\"Creating room now\");\r\n\tint randomRoomNumber = Random.Range(0, 10000);\r\n\tRoomOptions roomOps = new RoomOptions() { IsVisible = true, \r\n             IsOpen = true, MaxPlayers = (byte)roomSize };\r\n\tPhotonNetwork.CreateRoom(\"Room\" + randomRoomNumber, roomOps); \r\n\tDebug.Log(randomRoomNumber); \r\n}\r\npublic override void OnCreateRoomFailed(short returnCode, \r\n        string message) \r\n{\r\n\tDebug.Log(\"Failed to create room... trying again\"); \r\n\tCreateRoom();\r\n}<\/pre>\n
LobbyController’s <\/em>room creation portion of the script should look similar to Figure 10.<\/p>\n
<\/p>\n
Figure 10: The room creation portion of LobbyController<\/em><\/p>\n
Everything is now in place for lobby creation, but the game hasn’t quite started yet. Most of the pieces are in place, but the game won’t move on to the multiplayer scene from here. This is where RoomController <\/em>will step in. It will help the game properly join the current room and load the scene where the real action takes place.<\/p>\n
RoomController<\/h2>\n
Remember to include using Photon.Pun<\/code> and inherit from MonoBehaviourPunCallbacks<\/code>. <\/em>In addition, you can also delete or comment out the Start<\/code> and Update<\/code> methods. Then declare a private int, serializing it so you can still edit the value in the Unity editor.<\/p>\n
[SerializeField]\r\nprivate int multiplayerSceneIndex;<\/pre>\n
Next, you’ll need to make the script a callback target. This is being done because a callback function in this script will be triggered in the LobbyController <\/em>script. The code to get that setup looks like this:<\/p>\n
public override void OnEnable()\r\n{\r\n\tPhotonNetwork.AddCallbackTarget(this);\r\n}\r\npublic override void OnDisable()\r\n{\r\n\tPhotonNetwork.RemoveCallbackTarget(this);\r\n}<\/pre>\n
Now with the setup portion out of the way, a new method will be needed for when a room is successfully created. This function will print a message stating that the player has joined a room before calling a StartGame<\/code> method which, as the name implies, will start the game.<\/p>\n
public override void OnJoinedRoom()\r\n{\r\n\tDebug.Log(\"Joined Room. Multiplayer game has begun.\");\r\n\tStartGame();\r\n}\r\nprivate void StartGame()\r\n{\r\n\tif (PhotonNetwork.IsMasterClient)\r\n\t{\r\n\t\tDebug.Log(\"Starting Game\");\r\n\t\tPhotonNetwork.LoadLevel(multiplayerSceneIndex);\r\n\t}\r\n}<\/pre>\n
In StartGame<\/code>, <\/em>you can see that first the game checks if it is the master client (the one hosting the game). If it is, then a message will be printed to the Unity console and the multiplayer scene will be loaded. Scene loading in this instance is a little different from how you might normally load a scene in Unity. It calls LoadLevel<\/code> from the PhotonNetwork<\/code> class and is given the multiplayerSceneIndex<\/code> variable as input. Over in the build settings of the project, there are the two game scenes, the title and multiplayer scene. This list of scenes is like an array, so the title scene is index 0 and the multiplayer scene is index 1. Eventually you’ll tell Unity what element in the list of scenes to load by giving the multiplayerSceneIndex<\/code> variable a value of 1.<\/p>\n
The full RoomController <\/em>script can be seen below in Figure 11.<\/p>\n
<\/p>\n
Figure 11: The complete RoomController <\/em>script<\/p>\n
GameSetupController<\/h2>\n
Congratulations! The hardest parts of this project are behind you. It’s all downhill from here. In the GameSetupController <\/em>script you’ll want both using Photon.Pun<\/code> and using System.IO<\/code>. This time you do not need to inherit from MonobehaviourPunCallbacks<\/code>, so leave the inheritance as is. You’ll also want to keep the Start <\/em>method, but you can do whatever you want with Update<\/code>. Start<\/code> does only one thing, and that’s call a method named CreatePlayer<\/code>. Right below the Start<\/code> method you’ll create the CreatePlayer<\/code> method proper:<\/p>\n
private void CreatePlayer()\r\n{\r\n\tDebug.Log(\"Creating Player\");\r\n\tPhotonNetwork.Instantiate(Path.Combine(\"PhotonPrefabs\", \r\n            \"PhotonPlayer\"), Vector3.zero, Quaternion.identity);\r\n}<\/pre>\n
All this script is doing in the end is creating the player object. The game is told to find this player object under a PhotonPrefabs <\/em>folder and to look for the prefab named PhotonPlayer<\/em>. Everything is setting the starting position and rotation values. The full script can be seen below in Figure 12.<\/p>\n
<\/p>\n
Figure 12: The complete GameSetup <\/em>script<\/p>\n
PlayerMovement<\/h2>\n
While most of the PlayerMovement <\/em>script has been setup in advance, there are some parts that are missing. If you were to try to play the game with other players now, you’d run into an issue where one player could control all the player objects at once. That is an obscene amount of power for one player to have, so some code will be entered in to prevent this issue. Once again, you’ll need using <\/strong>Photon.Pun<\/code> but you do not<\/em><\/strong> need to inherit from MonobehaviourPunCallbacks<\/code>. Next you need to declare a new variable:<\/p>\n
private PhotonView PV;<\/pre>\n
Over in the Start<\/code> method you’ll set the value of PV<\/code> to the player object’s PhotonView<\/code> component.<\/p>\n
void Start()\r\n{\r\n\tPV = GetComponent<PhotonView>();\r\n}<\/pre>\n
After that, head to the Update<\/code> method. At the top you’ll add the following:<\/p>\n
if (PV.IsMine)\r\n\tMovement();<\/pre>\n
What is a PhotonView<\/code> and how does it help? PhotonView<\/code> is a component that goes to an object. It’s responsible for identifying objects in the scene. When the component is attached to the player object later, you’ll effectively give it an id that the network will use to identify which player object goes to what player. In code, this works with the IsMine<\/code> variable. In the above example, you’re simply checking if the current player belongs to this specific instance of the player object. If it does, then move the object like normal.<\/p>\n
<\/p>\n
Figure 13: The complete PlayerMovement <\/em>script<\/p>\n
Finishing Touches<\/h2>\n
All the code for the project is now complete. The various scripts need to go to their corresponding objects, and some modifications need to be made to the PhotonPlayer <\/em>prefab. Starting in the title screen, first add the NetworkController, RoomController, <\/em>and LobbyController <\/em>scripts to their respective objects. Figure 14 shows adding the NetworkController script to the NetworkController object.<\/p>\n
<\/p>\n
Figure 14: Attaching a script to an object<\/p>\n
After adding the RoomController script to the RoomController <\/em>object, edit the value of MultiplayerSceneIndex <\/em>to 1 as shown in Figure 15.<\/p>\n
<\/p>\n
Figure 15: Changing the value of Multiplayer Scene Index<\/em><\/p>\n
In the LobbyController <\/em>assign a room size limit of your choosing. The example below sets it to four.<\/p>\n
Next, fill in the Button Text <\/em>field by expanding (clicking the small arrow) Canvas <\/em>in the Hierarchy <\/em>then expanding GameButton<\/em>. Click and drag the Text <\/em>object into the field as shown in Figure 16.<\/p>\n
<\/p>\n
Figure 16: Editing the values of the Lobby Controller <\/em>script component<\/p>\n
Select GameButton <\/em>from the Hierarchy <\/em>and scroll down in the Inspector <\/em>until you see the OnClick <\/em>event. Click the plus button shown in Figure 17 to add a new event.<\/p>\n
<\/p>\n
Figure 17: Creating a new OnClick <\/em>event<\/p>\n
Then click and drag the LobbyController <\/em>object from the Hierarchy <\/em>into the Object <\/em>field in OnClick<\/em>.<\/p>\n
<\/p>\n
Figure 18: Specifying LobbyController <\/em><\/p>\n
Finally, select the drop-down menu that currently says No Function. <\/em>Navigate to LobbyController GameButton <\/em>to assign the GameButton <\/em>function to this button’s OnClick <\/em>event. Now, whenever the button is clicked, any code in the GameButton <\/em>function will be performed. Figure 19 shows how to set this up.<\/p>\n
<\/p>\n
Figure 19: Setting the button’s function<\/p>\n
Switch to the Multiplayer scene it by finding it in Assets \uf0e0 Scenes<\/em>. Double-click the Multiplayer scene to switch scenes. Select the GameSetup<\/em> object and attach the GameSetupController <\/em>script as shown in Figure 20.<\/p>\n
<\/p>\n
Figure 20: Setting up the GameSetup object<\/p>\n
Finally, in the Assets <\/em>folder navigate to Resources PhotonPrefabs <\/em>and find the PhotonPlayer <\/em>object. Click it and navigate to the Inspector <\/em>window. Two more components will be added to complete the player object. Click the Add Component <\/em>button shown in Figure 21.<\/p>\n
<\/p>\n
Figure 21: Adding new components<\/p>\n
In the window that appears, search for Photon View <\/em>and Photon Transform View<\/em> as in Figure 22.<\/p>\n
<\/p>\n
Figure 22: Adding the Photon View <\/em>and Photon Transform View <\/em>components<\/p>\n
Click and drag the Photon Transform View <\/em>component into the Observed Components <\/em>box in the Photon View <\/em>component as shown in Figure 23. Once you’ve finished that, the game is ready to play.<\/p>\n
<\/p>\n
Figure 23: Setting PhotonPlayer’s Photon Transform View <\/em>component as the observed component<\/p>\n
Save your work, navigate to File Build and Run <\/em>from the top menu, and choose where you want the exe file to be saved. Make sure that it is an empty folder. In order to properly test the multiplayer functionality, two copies of the game will need to be opened. One will be run from the editor and another will run from an exe. Make sure the editor version has the title screen opened before playing. As a reminder, you open different scenes in the Unity editor by navigating to the Scenes <\/em>folder in the Assets <\/em>window and double clicking your scene of choice. In this case, the scene you need to open is MenuScene<\/em>. When the exe is finished building, the game will start. A configuration window will appear before the game begins properly. Tinker with the settings as you wish, but it is recommended to at least keep the game in windowed mode so you can easily go back and forth controlling the two games. If everything is correct, there will be two player objects loaded into the multiplayer scene, one being controlled from the editor and one from the exe. Move the player in one game by using the arrow keys and notice that the other game will update accordingly. Figure 24 shows the game in action.<\/p>\n
 Figure 24: The multiplayer game in action<\/p>\n
Conclusion<\/h2>\n
What’s normally a daunting, difficult to perform task has now been rendered simpler thanks to the PUN plug-in. For those with bigger ambitions for their multiplayer works, this is only the beginning. A simple room and lobby controller were put together with the ability to have multiple players in a game at once. Of course, the game is simplistic in its current state. All the players can do right now is move around the scene. Perhaps they’ll be fighting each other in some kind of combat situation, or maybe they’ll work together. At that point, it is up to the creator to decide. Regardless of what the game turns out to be, PUN makes it easier to create.<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Many games today involve more than one player, but creating a multiplayer game is not easy. In this article, Lance Talbert show how the PUN plugin takes care of the difficult parts for you.…<\/p>\n","protected":false},"author":317499,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538,53],"tags":[5134],"coauthors":[52549],"class_list":["post-86675","post","type-post","status-publish","format-standard","hentry","category-dotnet-development","category-featured","tag-sql-prompt"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/86675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/317499"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=86675"}],"version-history":[{"count":3,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/86675\/revisions"}],"predecessor-version":[{"id":86701,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/86675\/revisions\/86701"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=86675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=86675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=86675"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=86675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}