WebGL / HTML5 - Multiplayer Web Game Servers & Hosting - Tutorial
Hi,
In this tutorial, we will cover every step on how to easily deploy and host a game server for any Unity WebGL multiplayer game as to make it playable online. Dedicated servers, unlike relays, reduce latency, are cross-platform compatible and avoid common NAT issues.
We’ll also highlight how to publish the game to Itch.IO
Let’s get to it.
We strongly recommend following our documentation tailored for this sample. The following is to help you follow-along the video above.
There are two main requirements to this project. First is to download and install Docker, to help containerizing the game server. Docker is used by millions of users and the world’s largest companies.
Second, is to download our Mirror WebGL project on GitHub. Using the link in our description, comments or documentation, click on the green “Code” button once on the page and select “Download ZIP”.
In your folder, simply extract the file.
Disclaimer
Make sure to add Edgegap's Unity plugin using the "Add project from Git" to ensure you use the latest version of the project.
Select "Window" then "Package Manager"
Click on the "+" icon, then select "Add Project from Git"
Paste Edgegap's Unity plugin URL: "https://github.com/edgegap/edgegap-unity-plugin.git"
Select "Install"
Now in Unity.
Starting from an all-new project from Unity’s HUB, select "Install Editor" and select the latest “Unity 6 LTS” version. As of recording, Unity 6.0 is the current “long-term release” or LTS.
Newer versions may have incremental improvements but are very likely to break certain functionalities. As such, we strongly recommend using the latest, main LTS version to ensure that compatibility works on this sample, and your development project in general.
Click on “Install” and make sure both the “Linux Build Support” modules of “(Mono)” and “(IL2CPP)” are selected, alongside “Linux Dedicated Server Build Support” and “Web Build Support” modules. Install it.
Now, return to the project’s menu, select “Add” and then “Add from Disk”. Locate the WebGL project and select its main folder.
Here, Unity is likely going to warn you about a missing Unity version. As previously stated, the latest LTS as of recording is “6000.0.56.f1”. Ignore this warning and select the latest LTS version. While you can use the latest recommended version, be aware it could break the project. Same thing once the editor loads, select “Continue” and ignore the warning.
After some loading time, another warning about deprecated packages is issued by Unity. You may investigate it, but for this project, we’ll simply ignore it. Close the “Build Profile” menu if it appears, we’ll clear the console errors to start fresh.
Now, select “Project” at the bottom left, then head over to the “Mirror” folder, then “Examples” and select “Billiards.” We’ll open the “Billiards” sample as our base project.
The first step is to open “NetworkManager” on the left. Within the inspector, make sure to remove the “KCP Transport (Script)” by clicking on the three dots and selecting “Remove Components”.
Then, select “Add Component” we’ll add the “Simple Web Transport” which is meant for use with WebGL projects.
Then, select the “Network Manager” menu, make sure “Don’t destroy on Load” is selected, and that “Headless Start mode” is set to “Auto Start Server”.
You’ll also notice that the “Transport” is missing. Add it by selecting hexagon icon and selecting Mirror’s “Transport Manager (Simple)”.
The easiest way to add game server hosting directly within Unity’s editor is by adding Edgegap's plugin’s Git project through Unity’s Package Manager.
From the top navigation bar select “Window”, then “Package Manager”.
If Edgegap already exist in your project, remove it by selecting “remove”.
Edgegap plugin is hosted on GitHub. Copy this URL, making sure it includes the ".git" at the end:
https://github.com/edgegap/edgegap-unity-plugin.git
In Unity, select the “plus” icon in the Package Manager, and then “Install package from Git URL”.
Then, paste the URL above and select “Install”.
After a few seconds, the Edgegap plugin will automatically be installed. Simply open it under “Tools”.
Within the sample, open “Tool” from the top navigation menu then “Edgegap Server Hosting” which opens the plugin.
Click on “Signin to Edgegap” to create a free Edgegap account. Select your sign-in method such as Google or GitHub as shown here and create your organization.
This is Edgegap application's dashboard. Copy the OneClick Token by selecting the clipboard icon.
Return to Unity. Select “Validate Token”.
Automatically, the “Build your Game Server” tab opens automatically.
First, you can validate if the Linux dependencies are functional by selecting “Install”. As we did this earlier, it displays “requirements installed”.
Then, we must ensure our game scene is selected. Under “Unity Build Settings”, select “Edit Settings” and under “Scene List” select the “Add Open Scenes” button. Here as you can see, Mirror’s Billards scene is now be included in the game server.
Select “Build Server” which compiles the game server. Select “save” to confirm it includes the latest changes to the scene.
After a few seconds, the build successfully compiles.
Under “Containerize your Server”, confirm that Docker Desktop is running by selecting “Validate”. If not, open Docker.
We’ll skip all optional parameters for this video, but for power users, details for their use is in our documentation.
Let’s move ahead and select “Containerize with Docker”.
After a short period, containerization is successful.
The next step is to test our game server locally. There are additional optional parameters, but for this video, we’ll simply select “Deploy Local Container”.
Once complete, we can confirm it is running locally within Docker Desktop.
To make it available online, the next step is to upload the game server to Edgegap’s platform.
Make sure the correct application is selected and click on “Upload Image and Create App Version” button.
After a few seconds, a web browser opens to the platform. This “Create version” page is prefilled, yet you can configure optional settings, including vCPU resource usage, memory and more, but we’ll create a new version with default settings.
Scroll down and select “Submit”.
The “Create Port” pop-up opens up. Here, make sure to change the port to 7778 which is from the Simple Web Transport set by Mirror. This may be different with other netcodes. Make sure to review your Netcode documentation for the accurate port to your use case.
Then, select the protocol type to “WS” used for web games. We’ll also select TLS Upgrade to add a proxy container to upgrade your application to a secure port.
Back in Unity, we must deploy the actual game server containerized earlier. Select the correct application version from the list which is viewable by selecting the “Application Version” field.
Finally, select “Deploy to Cloud” which automatically deploys the game server to Edgegap’s platform. After a few seconds of loading, you game server is ready. Congrats, you game is now online for the world to play!
Evidently, test things first. Start by selecting the deployment.
This is your game server’s deployment detail page.
It includes loads of information, but for us to be able to connect to the game server, we’ll scroll down and copy the External Port, here in our example it is 32360 but this is unique to each deployment.
Return to Unity and open the Network Manager’s inspector tab.
Select “Simple Web Transport” and under “Port”, paste your new External Port.
Return to the deployment page and copy the “Host” URL. Paste it in the “Network Address” field.
Return to the game scene, and start it by selecting the “play” button.
As you can see, the URL and Port are already present. Select “Client”, the game scene is connecting successfully to the cloud server deployed by Edgegap.
Congrats, you’re playing your multiplayer online!
If you want to publish your game to Itch.io and genuinely test your game from a web browser, select “Files” from the top menu.
Within “Build Profiles”, select the “Project Settings” tab. Select “Player” from the menu on the left. While you can input your organization name and versions, the one requirement is to select “GZIP” as a compression format under “Publishing Settings” section.
Finally, return to the Build Profile, and under “Web”, select “Build” to build the game for publishing. Save your project in a folder of your choice.
Once the build process is complete, create a “.zip” archive of the folder.
Head over to Itch.io. If you haven’t already, create an Itch account.
Now, select “Create a New Project” and fill in the title, then select “HTML” as the project’s kind. Scroll down and upload the zip archive to Itch.io.
Once the file is uploaded, select the option “This file will be played in the browser” and, under the “Embed Options”, select “Click to Launch in Full Screen”. Finally, select the visibility you want, here we’ll select “Public” and click on “Save & View Page” button.
Once the page loads, select “run” to launch the game. We’ll open a second browser using the same URL as the initial game.
Congrats, you’re now playing your multiplayer WebGL online on Itch.io!
That is all for the Edgegap plugin for Unity for WebGL, which empower game developers with automated game server and simple hosting.
The likely next step in your game development will be to connect players automatically. For more information on Edgegap’s simple and fully automated matchmaker, you can check out our tutorial.
Thanks!
