Integrating WebGL

Build your Unity Beamable project to target WebGL [IDEN-WebGL-01]

Overview

The purpose of this guide is for game makers to export a Beamable Unity project to the target of WebGL.

Beamable integrates with this technology.

The WebGL technology is for cross-platform, royalty-free, 3D graphics in a Web browser within an HTML5 canvas element.

WebGL Benefits

WebGL Drawbacks

Follow these steps to get started: This process will export a Beamable Unity project to the target of WebGL.

Name	Detail
1. Set Unity Build Target to WebGL	• Unity → File → Build Settings → WebGL Note: Not every Unity feature works with WebGL. See Unity's WebGL docs for more info
2. Build	• Unity → File → Build And Run
3. Any build-time compiler errors?	• Resolve errors • Repeat previous step

There are many solution paths to share the WebGL build. The steps below cover one solution path.

Here are steps to host the files on Github. This is quick and useful during development, but not likely appropriate for production.

Name	Detail
1. Open Unity Project Settings	• Unity → Edit → Project Settings... → Player
2. Update Resolution	• Set Default Canvas Width as desired • Set Default Canvas Height as desired
3. Update Compression	• Set Compression Format to `Disabled`
4. Build	• See Step 1. Create WebGL Build above for more info
5. Commit all Unity Output to Git	• See GitHub's Getting Started for more info
6. Update Git Settings	• Git → {Your Repo} → Settings→ Pages Note: See GitHub's Pages Docs for more info
7. Enjoy!	• See Results below

Here is the resulting Unity WebGL output. It is fully interactive and running within the HTML page.

Here is a partial list of Beamable feature pages which demonstrate WebGL embeds.

	Name	Detail
	Leaderboards	Allow player to manage leaderboard

This section contains any advanced configuration options and workflows.

Updated about 1 year ago