Export to WebGL

Set Build Settings

*Always save any open files and fully test your assignments before exporting. The export process can be very time consuming on some machines, and you can avoid a lot of wasted time by finding bugs in the editor instead of finding them after export.

Besides exporting traditional .exe and .app games, Unity can export for devices and for web. We will be using the WebGL export specifically for its cross-platform compatibility and accessibility.

Open the Build Settings window using File->Build Settings.

Ensure that all playable scenes are listed under Scenes in Build. (Projects often have test scenes that are not meant to be distributed to players. Leave those out of this list.)

Select WebGL from the Platform list and click "Switch Platform". You may have to wait for Unity to recompile all assets to a format that is compatible with WebGL.

Test in Editor

The Unity Editor will now simulate your game differently because the platform has been changed. Playing your game at this point may reveal different execution than what you saw previously. Before you attempt an export, you can save a lot of headaches and time by making sure your game actually runs as expected in the Unity Editor. This avoids you wasting time compiling an export that was clearly already broken.

Sometimes functionality that was working on one platform does not work properly in another platform, which is why it is a good idea to test again after switching to WebGL.

Player Settings

Back in the Build Settings window, click the "Player Settings" button in the bottom left.

Normally, games will adapt to whatever screen they are played on. With web games, we set screen resolution manually so the game properly fits in its destination page. You should choose a screen resolution that matches your target aspect ratio. For our class, we target 16:9, which means a resolution of 1280x720 is a good fit.

For compatibility with the itch.io web servers that will be hosting the game, ensure that the compression mode is set to gzip and "Decompression Fallback" is turned on.

Export

With your platform switched to WebGL, the Switch button has been replaced by "Build". Click this Build button and select a folder to output your game.

Do NOT export into your current project folder. Doing so will just clutter your project with unusable or duplicate assets. Export into a separate build folder instead.

WebGL projects export as a folder of web content including an html page and various web assets. It will not export as a single self-contained file (such as an exe). The entire exported folder is necessary for running your game.

All of these files need to be uploaded as a bundle, so archive them together in a zip file.

Upload

Due to security restrictions, you cannot run WebGL pages directly from your local file system. Your exported web content must be delivered through an HTTP server. It is possible to run a web server locally, but that is beyond the scope of this class. A local web server also does not help you share your game with friends!

We will use a free games hosting service known as itch.io for class. itch.io is similar to services such as Steam or the App Store, but is more open and accessible. (It can take a really long time to get your games approved on Steam, but with itch.io, you simply upload and share your URL.)

itch.io accounts are free. Once you've created an account and are logged in, you can find the Upload link under your Profile navigation.

When creating a games page, make sure your game type is set to HTML. (NOT Unity v5, which is an old and discontinued format.)

Match the embed resolution to the game's target screen resolution. Add 40 extra pixels of height to accommodate Unity's footer bar.

Finalize any other settings you wish to configure, upload the ZIP archive of the game's files, and save your game page.

You will be brought to a page with your game!

You can use the Secret URL to share your game without making it fully public. Your normal URL might only be viewable to you depending on your settings.

Playtest!

WebGL can sometimes behave differently than other desktop and mobile platforms. As always, playtest your game to ensure it still performs as expected.