Integrating WebGL

Overview

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

Integration

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

  • Features cross-browser and cross-platform compatibility
  • Tight integration with HTML content
  • Hardware-accelerated 3D graphics

WebGL Drawbacks

  • Not every Unity feature works with WebGL. See Unity's WebGL docs for more info

Steps

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

Step 1. Create WebGL Build

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

  1. Build



• Unity → File → Build And Run

  1. Any build-time compiler errors?

• Resolve errors
• Repeat previous step

Step 2. Share WebGL Build

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

  1. Update Resolution



• Set Default Canvas Width as desired
• Set Default Canvas Height as desired

  1. Update Compression



• Set Compression Format to Disabled

  1. Build

• See Step 1. Create WebGL Build above for more info

  1. Commit all Unity Output to Git



• See GitHub's Getting Started for more info

  1. Update Git Settings



• Git → {Your Repo} → Settings→ Pages

Note: See GitHub's Pages Docs for more info

  1. Enjoy!

• See Results below

Results

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

As HTML Link

https://beamable.github.io/Beamable_SDK_Examples/Builds/WebGL/LeaderboardFlowExample/index.html

As HTML iFrame

Features

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

Name

Detail

Leaderboards

Allow player to manage leaderboard

Advanced

This section contains any advanced configuration options and workflows.


Did this page help you?