How to Host Unity Games on the Web
Creating an executable file to run the game is nice, but Unity can go even further than that with its build settings. We can build for consoles, mobile devices, and even for web pages! Today we’ll look at how to play this game directly on a website, hosted by itch.io.
First, we should return to the build settings (File -> Build Settings) and we can see all the other platforms we can build to. Select WebGL and click Switch Platform.
WebGL is a graphical rendering system used for web browsers. To use it, Unity will take a few minutes to properly change the format of some assets. Afterwards, we can see there is an error here.
WebGL 1.0 isn’t compatible with Linear color space, so we can just remove it from the Graphics APIs. By only using WebGL 2.0, this will allow us to continue using the color grading post-process effect that I covered here. Some other weird problems might happen, so it’s a good idea to check the console window. I had to change the settings on my anti-virus to get rid of some errors that were causing the sounds to import incorrectly (I don’t think I’ll ever know why).
There’s a few other Player project settings we want to change to make web hosting as smooth as possible. It’s a good idea to use the Resolution and Presentation options to set the default canvas width and height to something that will have the correct aspect ratio (16 by 9 in this case) and small enough to comfortably fit in a web browser.
Another extremely important step is changing the compression format of the assets. We want to disable them in the Publishing Settings below. Otherwise, the assets might not load properly when the game is run, which causes the game to be stuck loading forever.
Now we can build the game just like we did for the standalone version. Build it into a new folder (I named mine WebGLBuild) and Unity will produce two folders and an executable HTML file. Select all three of these and compress them into a zip folder by right clicking them.
In order to properly run this game, we have to host it online. As mentioned before, a great website that can host this game for free is itch.io. We can make an account and create a new project.
There’s lots of important settings to change here, like the Title, Classification, and Kind of project (which we should set to HTML to allow the game to play in the browser.
It’s also vitally important to actually upload the game properly! We want to upload the entire zip folder that contains the HTML file and both folders generated by Unity. Otherwise, the game won’t play at all since it won’t have access to the assets.
Also, there’s important options here for the window size. The dimensions I picked in the Unity Player settings was 960 by 540, but we actually want a little more height to make room for the Unity text and full screen option that appears in the web browser.
Now just save the project, and view the page to make sure everything works!
Not only can we see the game played through a web page, but now that it’s accessible online, you can play the game yourself! Good luck shooting down those enemy spaceships!
