Fishnet WebGL
Last updated
Was this helpful?
Last updated
Was this helpful?
This guide will help you use FishNet's Websocket Transport, Bayou, and create a headless server on Edgegap for a Unity project.
You can find the final sample project on our GitHub, under the Fishnet_v4.1.6R_WebGL folder. This guide should work with any version of Fishnet, so long as you use the appropriate version of Bayou for it.
Since FishNet version 4.1.6R comes with the Edgegap plugin included, we will use it to automatically build and containerize our game server, even if it is possible to do so manually using a Dockerfile.
For more information on the plugin, you can read our documentation here.
You will need to have Docker running for it to work properly.
This project is tested on Unity version 2021.3.16f1. You will need the following modules to be installed with it:
WebGL Build Support;
Linux Dedicated Server Build Support;
Linux Build Support (IL2CPP).
Download the Unity package for Bayou on this GitHub. Import the package in the game project with the toolbar under Asset/Import Package/Custom Package....
Open the MainMenu scene located under Assets/SpaceEdge/Scenes. In the NetworkManager gameObject, remove the Tugboat transport component. Replace it with the Bayou transport, located under Asstes/FishNet/Plugins/Bayou. Take note of the port value that's set, in this case 7770.
Make sure to enable the Start On Headless option for the server build.
Open the Edgegap plugin with the Edgegap/Edgegap Hosting toolbar menu. Verify your Edgegap API Token and either create or load an application for the game. Make sure the port value matches that of the Bayou transport. Select the WS protocol, then enter a New Version Tag.
Once this is properly set up, click on Build and Push, which will automatically containerize your game server and create a new application version on the Edgegap dashboard after a short waiting period.
Back in the project, select the MatchmakingSystem gameObject and change the following fields:
AppName: Set it to the “Application name” you used with the Edgegap plugin.
AppVersion: Set it to the “Version name” you used with the Edgegap plugin.
AuthHeaderValue: Set it to your Edgegap API token that you used with the Edgegap plugin.
Remove the token word from the API token because we are setting this as the Authentication Header schema during the Awake() method of the MatchmakingSystem.
Open the MatchmakingSystem script, located under Assets/SpaceEdge/Scripts/Systems, where you may also update those same values. Search for "UDP_PORT" and replace it with "Game Port".
Previous versions of this sample would manually create the application via the Edgegap dashboard, and the name UDP_PORT would be used for the port used by the server.
The Edgegap plugin automatically names the port Game Port instead, which is why we must make sure to update the script. The game will not work otherwise.
Make sure that you uncheck the Start On Headless option in the NetworkManager gameObject as well.
Once this is done, click Play in the editor, then enter a name in the text box and click on Start Game. The game will check for any available server, or automatically have one get deployed if none exist, before connecting to it.
If there is a ConnectionFailed error on the client side, it may be because the Start On Headless option was not enabled in the server build, which means the deployment is not in a state to accept connections since the server never properly started. Make sure the option is enabled before trying again by creating a new container image and app version.
It may also be because app version's port name is not the same as in the MatchmakingSystem script. Make sure that both have the same name, in this case "Game Port", before trying again.
Once you've confirmed the game client works in the editor, it should also work in Itch.io. To upload your game there, you will need to make a client build in the Build screen of the Unity Editor, under File -> Build Settings. Select the following options:
Set Platform to WebGL;
Open up the Player Settings. Under Player -> Publishing Settings, set the Compression Format to Gzip and make sure the Decompression Fallback option is selected. Save these settings, and close the window.
Then press build and select a new empty folder named build as the file destination. Compress the files of this build folder into a zip folder, making sure that they are at the root of it. Then you simply need to upload the zip folder to your Itch project, and make sure to select the option for the file to play in the browser. The game should then work the same way as in the editor.
