How can I check or receive a message when the a Unity WebGL app is finished with loading and ready for use? What I want is to run a JavaScript function of my Webinterface after the WebGL App is ready.

How can I check or receive a message when the a Unity WebGL app is finished with loading and ready for use? What I want is to run a JavaScript function of my Webinterface after the WebGL App is ready.

• javascript
• unity-game-engine
• unity-webgl

3 Answers 3

If you're looking into using a front-end framework, you might want to look into this library I've made. It adds functionality for two way munication between your webpage and Unity content. To send messages from your Unity content, back to the web page, you can create JavaScript listeners which can be triggered from your CSharp code, and even pass data.

// Create a new Unity Content object (using the library)

this.unityContent = new UnityContent(
  "MyGame/Build.json",
  "MyGame/UnityLoader.js" );

// Then add a new listener to the object.
this.unityContent.on("GameOver", score => { 

    // Do somehting...

});

In order to trigger the event we've just created, you have to create a JSLib file to bind the munication. The listener registered in React is now available in the ReactUnityWebGL object in any JSLib file. You can now create a JSLib file and get started. We're going to create a new JSLib file in the following directory. Assets/Plugins/WebGL/MyPlugin.jslib.

mergeInto(LibraryManager.library, {

  // Create a new function with the same name as
  // the event listeners name and make sure the
  // parameters match as well.

  GameOver: function(score) {

    // Within the function we're going to trigger
    // the event within the ReactUnityWebGL object
    // which is exposed by the library to the window.

    ReactUnityWebGL.GameOver(score);
  }
});

Finally, to trigger to event within your CSharp code. We have to import the JSLib as following.

using UnityEngine;

public class GameController : MonoBehaviour {

  // Import the JSLib as following. Make sure the
  // names match with the JSLib file we've just created.

  [DllImport("__Internal")]
  private static extern void GameOver (int score);

  // Then create a function that is going to trigger
  // the imported function from our JSLib.

  public void GameOver (int score) {
    GameOver (score);
  }
}

I use a different approach. This is especially helpful because you can define callbacks in whatever part of your Unity code you wish i.e. you can react to async events.

//in your html|js
function OnAppReady(){
    console.log("### application is loaded")
}

//in Unity
void Start()
{
    //js callback when application is loaded
    Application.ExternalEval("OnAppReady()");
}

I've found a solution that works for me. There is a JavaScript file UnityProgress.js in the Build folder of your WebGL build. Inside you can find a variable progresswhich will be set to 1.0 after the loading / downloading progress is finished. You can place your code after that if-statement at the bottom to run your JavaScript code (Don't forget the brackets^^). But there is some initialization time that the Unity App needs to start. So you probably have to set a delay time. For me 2500ms worked well.

 function UnityProgress(gameInstance, progress) {
    ...

    if (progress == 1.0) {
      gameInstance.logo.style.display = gameInstance.progress.style.display = "none";

      // call of my function:

      console.log("#### WebGL is ready now ####");
      setTimeout(function() {
        myFunction();
      }, 2500);

    }
}