WebGL / HTML5 - Free Multiplayer Web Game Servers & Hosting - Tutorial (Full)

Hi,

In this video, we will cover step by step how to set up game server hosting for any multiplayer WebGL / HTML5 web game in Unity using the Edgegap plugin, as to get your game online and playable worldwide, in minutes.

Let’s get to it!

Chapter 1: Requirements

Before you can take your WebGL game online, there are three requirements to ensure everything works.

First, we recommend using a netcode. While not mandatory, it makes things much easier as it enables you to use a transport without having to program and implement your own networking solution. In this example, we will use Mirror Networking. Make sure to download the latest version from the Unity asset store. A direct link is in the description. We will also use one of Mirror’s sample projects for this example.

Once you have downloaded Mirror from the store, import it by selecting “Window” from the top menu, then select “Package Manager.” From the drop down select “My Assets” to find the Mirror plugin. For new users, we strongly recommend watching the amazing community tutorials to use Mirror to its full capabilities.

Second, within Unity, head over to Unity’s Hub to confirm you have installed both the “Linux Dedicated Server Build Support” module and “WebGL Build Support” modules in your project. If not, simply click on the package and install it. Make sure to restart Unity to avoid errors.

The third and final prerequisite is to install and run Docker. It containerizes your game servers to help it deploy and run faster. If you haven’t yet, you can go watch our Docker installation video, or head over to Docker dot com and follow the installation procedure. It’s easy and takes just a few minutes.

Chapter 3: Editing your WebGL Project

In your project’s assets, open the game scene you want to use. In this example, ours is located under “Mirror > Examples > Tanks > Scenes.”

Once the scene is selected, click on the “Network Manager” game object. Its inspector tab appears, and in our case, on the right.

Scroll down until you find the “KCP Transport” component and remove it. Replace it with the “Simple Web Transport, which you can drag and drop from your assets under “Mirror > Transports > Simple Web.”

Take note of the port value here, as we will need it for the Edgegap plugin.

Finally, make sure to update the transport value of the “Network Manager” script with that new component too.

Additionally, ensure the “Auto Start Server Build” option is enabled within the “Network Manager” script.

Chapter 2: Game Server Hosting with Edgegap

Now, let’s use the Edgegap plugin to get your game online.

First, open the Edgegap plugin from the navigation bar’s “Edgegap” option, then select “Edgegap Hosting.”

To function, you will have to generate a token. To do so, you must create an Edgegap account. Click on the “Get a Token” button which will open up your browser.

Signing up is free and takes just a few seconds.

First, select “Get Started” at the bottom, then from the login screen, input your email and a password and opt into our terms. You’ll then instantly get a verification email. Click on “Confirm Your Email” to validate your account. Finally, input your organization’s name and confirm.

This is Edgegap’s application dashboard. We strongly recommend exploring it with the tour, but we’ll skip it for this video. Automatically, a pop up with your unique OneClick Token appears. Simply copy it by clicking on the clipboard icon and paste it directly in the plugin’s text box.

Then, select verify which confirms the token is valid. The “Application Info” tab now opens automatically.

Should you already have an application on our platform, input its name in the text box and load it as an existing app. If not, which is the case in this tutorial, simply enter your project’s name. It must be in lowercase, with no space.

The “Create Application” button is now enabled. Select it. This opens the “Container Registry” and the “Deployment” tabs.

Container registry is where your game server’s container is stored. All you need to do is make sure the port and protocol types are accurate to your netcode transport’s as to ensure the server adequately listens for connection.

In this example, make sure that the port value is the same as the one in the “Simple Web Transport” component. For the protocol type, select “WS”, meaning Web Socket, for WebGL projects.

Of note, the Edgegap plugin also sets the TLS Upgrade option automatically to ensure the connection is secure.

“New Version Tag” refers to the unique version of your server. This field requires your manual input. We recommend changing the value whenever you proceed with updates to your game server.

For advanced users, Edgegap provides the option to use a “Custom Container Registry”. For this tutorial, we will use the Edgegap’s default one.

The second to last step is to select “Build and Push”. This automatically compiles the project into a dedicated Linux server, then creates a Docker container which is deployed to Edgegap’s registry.

The last step is to create a new deployment. Under “Status”, you will see its progress. Once ready, an URL appears. Copy it by clicking the clipboard button, then paste the information within the network manager’s inspector tab. Under “Network Information”, replace the current “Network Address” by pasting the URL. Make sure to remove the port number and colon.

Under the “Server Setting” section, enter the port value in “Port” field, and make sure to enable the “Client Use W S S” option in the “Client Settings” section.

Unselect the “Auto Start Server Build” option, as this allows you to connect as a client directly from Unity’s editor.

Finally, start your game scene by clicking the play button atop the editor.

Congratulations, your project is now ready for the world to play!

Chapter 3: Testing

Evidently, test things first!

Make sure the values are properly set in the HUD, then click on “Client.” The game will then connect to the server we deployed with the Edgegap plugin.

Once you’ve confirmed it works, you can close the game and stop the deployment with the plugin.

If you want to put your game on Itch.io, you just go to the “Build Settings,” select the “WebGL” platform and in your project settings under “Player > Publishing Settings,” make sure to have the “Compression Format” set to “G ZIP” and the “Decompression Fallback” option to be enabled.

Save your project using “Control + S” keyboard shortcut.

Then build your project, and zip your files then upload them to Itch.io!