Output a web-optimized (WebGL) game

Verification environment

Windows

• Windows 10
• Windows 11

Unity Editor

• 2020.3.25f1

At first

Games created in the Unity Editor can run in the Unity Editor, but cannot run independently in other environments. This section describes how to output the game in WebGL, a format that runs the game on a web browser.

Since the output takes a certain amount of time, it is a good idea to do normal development and debugging in the editor, and output when you want to test in the target environment.

Modular installation of WebGL

Additional modules are required to use WebGL.

Launch the Unity Hub and select Install from the menu on the left. Click the gear icon for the version you want to install WebGL on, and select Add Module.

Check "WebGL Build Support" in the platform group to install.

Wait for the installation to complete.

About the game to be output

Outputs the "2D Platformer Microgame" as a game, which can be selected when creating a new project. Of course, if you have already created a game, please output that game.

The Unity Editor is launched and your project is loaded.

Game output for web

Select File > Build Settings from the menu.

When the "Build Settings" dialog is displayed, check all the scenes you want to use from "Scenes included in the build".

Select WebGL from the platforms on the left.

If there is no Unity icon to the right of the menu name, it is not active, so click the "Switch Platform" button at the bottom right with "WebGL" selected.

When you select "WebGL", the setting items are displayed on the right, so set them as follows.

When the setting is complete, press the "Build" button to output. If you want to run it immediately after output, click the "Build and run" button.

Specifies the output destination of the program. Some files will be created in the folder, so you can select any empty folder. If an existing file with the same name exists, it will be overwritten. It will take some time to build, so wait for a while.

If the following firewall setting screen is displayed, please grant permissions according to your environment. If you're not sure, check only "Private" to allow access.

When the build is complete, the file is created.

You cannot launch these files directly to run the game. You must always have a web server and place your game program on it before accessing it with a web browser.

However, if you press the "Build and Run" button when outputting the program, Unity will launch a simple web server and run the game after outputting the file. However, this is only a check of operation, so it is necessary to prepare a separate Web server when releasing it.

Create an uncompressed WebGL program

If you output without changing any settings when outputting the file, each file will be output in a gzip compressed form. This can significantly reduce the file size compared to uncompressed output.

However, some web servers that place your game may not be able to handle gzipped files correctly. In that case, the program is output uncompressed and deployed to a Web server.

To change the compression settings, select WebGL on the build settings screen and click the "Player Settings" button.

The Player menu should be selected on the Project Settings screen, so expand Visibility from WebGL Settings at the bottom.

There is an item called "Compression format", so select "Disabled" from there. By the way, there is also a more compressed format called "Brotli", but since it is a relatively new format, fewer web servers support it than gzip.

After selecting, build and output as before.

By the way, when 2D Platformer Microgame is output with or without these compression formats, the file size is as follows.