JavaScript API

By default, Unity Forma comes with a runtime UI that lets you select from a predefined set of options, such as the current product, different environments, and active features on the product. You can also use the Standard UI in all build types.

WebGL builds offer an additional layer of flexibility using a JavaScript API. The JavaScript API offers similar functionality as the Standard Runtime UI and can be used by any JS code on the HTML page that contains the WebGL build.

You can hook the API to any JavaScript event or HTML element, or use it to build a custom UI. The Unity Forma package includes a sample UI, created using React, that you can use as an example.

Preparing images from Unity Forma

By default, Unity compresses all images. If you want any thumbnails you added in Unity Forma to display correctly in your WebGL build, you must uncompress them before they are displayed on the JavaScript side.

To uncompress a thumbnail, follow these steps:

  1. In the Unity Editor, in the Project window, select find and select the thumbnail you need to decompress.
  2. In the Inspector panel for the thumbnail, select Advanced and find the Compression drop-down menu.
  3. In the Compression drop-down menu, select None.

Get it working

The JavaScript API is included in the Unity Forma package. It has multiple parts:

  • A C# assembly configured so that the Unity Editor and WebGL builds include it automatically.
  • JavaScript plugins that you need to set up manually.

Enable the JavaScript API in a project

  1. To import the JavaScript plugins, select the Forma menu and then go to Forma > Advanced > Import WebGL API. This will also automatically add the required WebGLAPI component to the GameObject that has the Configurator component.
  2. In the Configurator window, select the Build tab.
  3. Create a WebGL build profile. If necessary, use the button in the lower left to switch the Editor to the WebGL platform.
    Now you can make your build.

Make your build

To make your build, in the Build Setup tab of the configurator, select your WebGL build profile and then select Build and Launch.
When the build is ready, the system opens a tab in your web browser that points to localhost:8000.

Opening a build

To open an existing build without launching the Unity Editor, follow these steps:

  1. Launch an external webserver, such as python http.server and point a browser to localhost:8000.
  2. Use the following Python 3 command in a terminal:
    -m http.server 8000 -d /path/to/your/webgl/build