WebGL JavaScript to Unity

Unity Engine
,
1

I am trying to understand from here - Unity - Manual: Interaction with browser scripting how we can trigger a js function from Unity.

I have followed that and edited my html file such as:

var myGameInstance = null;
     var script = document.createElement("script");
     script.src = loaderUrl;
     script.onload = () => {
       createUnityInstance(canvas, config, (progress) => {
         progressBarFull.style.width = 100 * progress + "%";
       }).then((unityInstance) => {
         myGameInstance = unityInstance;
         loadingBar.style.display = "none";
       }).catch((message) => {
         alert(message);
       });
     };
    

     function CheckAlert() {
       alert("MessageReceived");
     }

and my C# code is as:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;

public class Bridge : MonoBehaviour
{

#if UNITY_WEBGL && !UNITY_EDITOR
   [DllImport("__Internal")]
   private static extern void SendMessage(string message);
#endif

   void Start () {
     Invoke("SendToJS", 2.0f);
   }

   public void SendToJS () {
       Debug.Log ("Sending message to JavaScript");
#if UNITY_WEBGL && !UNITY_EDITOR
       SendMessage ("Ok");
#endif
   }
}

and my js.jslib library is as follows:

mergeInto(LibraryManager.library, {

   SendMessage: function (message) {
       CheckAlert();
   },

});

But unfortunately nothing gets sent through, I never receive an alert message which I should.

How do I fix this?

2

I notice is that your variable has a lower case “m” in “myGameInstance”… whereas your CallToUnity function expects it to be upper case… “MyGameInstance”.

3

Hey that was an error from my side. I have updated my question. Please take a look at this.

4

The new issue you’re mentioning is easiest to work around by using window., for example, window.CheckAlert = function(){ alert("MessageReceived"); }. Then in your jslib, say window.CheckAlert(); …at least, this approach has solved the same kind of issue for me anyway.

Something else to be wary of in your original post… in case you still do it, you were expecting the game has always finished loading within 5 seconds. Your timeout may fire before the game has loaded though, in which case that would also likely throw an exception. You could move your setTimeout into the “then” part of your loading, so it doesn’t start counting down until the game has loaded first.

5

Thank you i will try that out.
Then how would i know if my game has finished loading?

6

The place where it says loadingBar.style.display = "none"; is where it hides the loading bar because the game has finished loading, so anywhere immediately before or after that line should be appropriate. However, you might want to do it from C# instead (through your .jslib) to be sure any in-game initialization has been done beforehand as well. Otherwise there’s still a chance the game has loaded but maybe the browser has lost focus of the tab/window and stops processing it at the rate you’re expecting, or the Unity logo is still displaying because some kind of other initialization took a bit longer than expected… etc.

7

Thank you, that worked :slight_smile:
I have one more query, how do I access JavaScript modules and its events from Unity?

8

Depends on what exactly you want to do - you could search for examples of how to do that in particular… but if you want C# functions to be called from events in JavaScript, as far as I know you have to add your listeners in JS then use SendMessage from those. You can add those listeners either in your page or in your .jslib, for example if you wanted to listen for a click event on a specific DOM element. Given the choice, keeping as much in the .jslib as possible helps make it easier to switch between templates without breaking things. You can access whatever scripts are loaded in the page from your .jslib the same way as usual, but might find it doesn’t always work (or work the same) without adding window. before some things. For example in the page, maybe you call eval(some_js_code), but in .jslib you would need to say window.eval(some_js_code) or it won’t execute within the expected scope.

Edit: Also, one last tip… if you’re going to add lots of functions and data to window, you might consider creating an object to hold all of that, i.e. at startup, window.mydata = {}; then later you do like window.mydata.something =… instead of directly like window.something =… This way it’s much easier to debug with console (you can just type “window.mydata.” and it auto-suggests/drops down a list showing all the stuff you’ve added), also this way keeps the window object tidy and makes resetting/clearing your extra stuff easy by just setting window.mydata = {} again :slight_smile:

9

Hey!
Late reply, but just dropping this here - maybe it’ll be useful for someone.
You can send and receive messages between Unity and HTML from anywhere using this tool: WebPontis: Easy WebGL & WebGPU Integration | Integration | Unity Asset Store
It simplifies everything and integrates Unity into the JavaScript event system.