Learning Unity — Building Games For The Web
In the last article, we learned how to build Unity games for the platform we are developing for (PC, Mac, or Linux). In this article we will be learning how to transfer our games from the desktop to the world wide web. Let’s get started!
Building the Game in WebGL
Our first step is to open the Build Settings of the project. This can be done by going to the File menu and selecting the Build Settings option.
Within the Build Settings window, find the WebGL platform in the list of platforms on the left. With WebGL selected, we should see the Build button in the lower right change to read as Switch Platform. Click on the Switch Platform button to reconfigure your project for the new platform. This will take a few moments.
Once the platform has been changed, we can now see the new build options that are available for WebGL.
Also, if we go into the Player Settings menu like we did in the previous article, we can see new configurable options specific to the WebGL platform.
Configure options as desired, but the default settings are adequate for continuing our example. Click the Build button to build the game for the web. This will take a bit of time.
When the project is finished building, we will then have a folder with just a few things in it. We have two folders, one is Build and the other is TemplateData, and we have an index.html file.
The Build folder contains all of the assets of the Unity project. Everything is contained within files that Unity accesses when the game is started. The TemplateData folder contains the files that make up the presentation of the game as a web page. For example, the page’s icon is in the TemplateData folder. Finally, the index.html file acts as the entry point for the Unity game itself.
Now that we have built the project, next we will need a place on the web to host our game.
Hosting the game using Itch.io
For this example, we are going to make use of itch.io. Itch.io is an open, online marketplace designed with independent game developers in mind. It also just so happens to be a place where we can host Unity WebGL projects and run them right from our browsers.
Before we get started with itch.io, we will first need to put the project build into a ZIP file. Itch.io requires that HTML based games are either zipped and contain an index.html file, or that the entire game is contained within a single HTML file. Our Unity project build has multiple files, so we will need to do the former.
After we have gotten our build files into a ZIP file, we will need to register an account with itch.io, and then find the Create New Project page. We can see a lot of options to configure here.
This is just an example, so for right now we only need to configure a few options to make the game run.
- Title and Project URL: These fields are required.
- Kind of project: This field needs to be changed to HTML.
- Uploads: Here we need to upload our project ZIP file.
- Viewport dimensions: This field represents the resolution of the game, and it may not match with our Unity project’s settings. Check the resolution settings for the project in Unity, then configure the dimensions in itch.io as needed.
With these settings configured, we should see at the URL for our project a button labeled Run Game. If we have done everything correctly, clicking this button will run the game right in our browser. Now our game is on the web for the whole world to play!
That wraps up our look at building games for the web, but one last issue remains for our look at the Unity build process. If you had followed my previous article about building games for home computers, you may have noticed if you configured your project for full screen presentation that there was no nice way to exit the game. Well, in the next article, we are going to learn how to programmatically exit our Unity games. Until then, good luck and happy coding!
