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 the web. We will be using the WebGL export for its cross-platform compatibility and accessibility.

Open the Build Profiles window from the menu bar using File > Build Profiles. Switch to the "Scene List" view.

Any scenes you intend for your users to play should be present in the Scene List. (Projects often have test scenes that are not meant to be distributed to players. Leave those out of this list.) You can add scenes to the list by dragging them from the Project files tab into the Scene List. The top item in this scene list will also be the first scene that loads upon execution. You can drag items to rearrange their order.

Click the "Add Build Profile" button in the Build Profiles window. Select the "Web" build category and choose "Desktop - Development" because of its focus on fast build times for rapid development iteration. Click "Add Build Profile" to add this configuration to the Build Profiles list.

Back in the Build Profiles window, select your Web build configuration and click the Switch Profile button. You may have to wait for Unity to recompile your project to a format that is compatible with WebGL.

Test BEFORE Exporting

Now that you've switched build profiles, the Unity Editor may simulate your game differently because the platform has changed. It is very important that you thoroughly test your game when switching platforms because new bugs or unintended functionality may be present that were not apparent in other build targets.

The process of converting a game from one release platform to another is known as "porting". Major platforms each have their own unique quirks and user experience constraints, which means porting is rarely as simple as just switching build modes.

Playing your game at this point may reveal different execution than what you saw previously. It's best to fix these unintended behaviors now before spending time waiting for an export. Fixing bugs before export can save you the time of having to repeatedly export your game.

Player Settings

Return to the Build Profiles window, and within your Web build profile, expand Player Settings. Under Player Settings, further expand the Resolution and Presentation category.

Normally, we build fullscreen games to adapt to a variety of potential screens. When a game is placed within a web page, we also specify an intended size for the game to fit within the content of the page when the game is not yet fullscreen. You should choose a resolution that matches your target aspect ratio and size on the page. Most of my assignments target a 16:9 aspect ratio, which means a resolution of 1280x720 is a good fit unless you have made alternate creative decisions for your own project.

Next, expand the Publishing Settings category. Since we will be using a service called itch.io to host games for class, we must work within their file upload constraints. Enabling the Gzip Compression Format and Decompression Fallback will help ensure our games work on their servers.

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 your WebGL build back into the Unity assets folder. Doing so can cause Unity to re-import the same files it just exported and clutter your project with unusable or duplicate assets. Organize your exports into a separate build folder outside the Unity assets 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 usually 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 private 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. (Other services require a paid developer account and take time to approve your games. With itch.io, you simply upload your game and share your URL for free.)

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.)

Under Pricing, please select "No payments". Upload the ZIP archive of the game's files and select "This file will be played in the browser".

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

Use the Description box to inform players of your game's controller scheme. It is important to let players know how to control and play the game until the game tutorializes this within its own content. Please also update the description each week with a brief changelog of what is new to try in the game. This will help guide feedback during project reviews.

Near the bottom of the configuration page, it is ok to leave your game in "Draft" visibility. Save your game page.

You will be brought to a page with your game!

Although we configured your project as a private draft, you can use the Secret URL to share your game without making it public. Your normal URL might only be viewable to you depending on your settings. You MUST share your Secret URL for grading. If you send us an inaccessible link, then we will have nothing to grade, and you will receive no credit on the relevant assignment.

Playtest!

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