classes/class_javascriptobject

[giscus[bot]]

classes/class_javascriptobject

Inherits: RefCounted< Object A wrapper class for web native JavaScript objects. Description: JavaScriptObject is used to interact with JavaScript objects retrieved or created via JavaScriptBridge.g...

https://docs.godotengine.org/en/stable/classes/class_javascriptobject.html

[j-sea]

Thought I would spare any C# developer a fair bit of trouble due to the current lack of C# documentation of the JavaScript or JavaScriptObject classes. It took me a bit to figure out the Godot 3.6 C# equivalent to this example because I was trying to adapt some code I already wanted to be the callback function. If you're coding for Godot 4+, at the moment of this comment, Godot 4 cannot export C# to web; so figuring how to get it to work is pointless. If you're in the future where it works in Godot 4 now, you'll likely have to adjust the code to use the JavaScriptBridge class which now likely exists. The way it works probably hasn't changed though.

The key to getting the C# function to work in JavaScript is that the callback function must have only an "args" array parameter (hence my original issue getting my existing callback function, which had multiple parameters, to work). Also notice how the callback name string is spelled the same as the defined method. Lastly, you should notice how the return value of the CreateCallback was stored and used directly in JavaScript to call the C# function. You could .Set() properties on the DOM window object that are the return values of these CreateCallback functions to create globally-accessible methods which can call your C# functions.

In this example, you'll also see how you can get/set an indexed value from/on a JavaScript array, taking advantage of the fact that the indexes are stored as properties under the hood.

You'll also see how to use an object returned by a .Call() to perform a new .Call() on the new object. From this, you can extrapolate how you can chain .Get() calls instead to navigate property trees.

One final key piece of info I had originally missed was that JavaScriptObject literally represents the actual JavaScript object which you can utilize inherited Godot.Object properties and methods to interact with the actual JavaScript object.

using Godot; // version 3.6

public class BasicExample : Node
{
    JavaScriptObject _my_js_callback;
    JavaScriptObject console;

    public override void _Ready()
    {
        _my_js_callback = JavaScript.CreateCallback(this, "MyCallback"); // This reference must exist when it is called, or else it won't be called
        console = JavaScript.GetInterface("console");

        JavaScriptObject buf = JavaScript.CreateObject("ArrayBuffer", 10) as JavaScriptObject; // new ArrayBuffer(10)
        GD.Print(buf); // Prints [JavaScriptObject:OBJECT_ID]
        JavaScriptObject uint8arr = JavaScript.CreateObject("Uint8Array", buf) as JavaScriptObject; // new Uint8Array(buf)
        uint8arr.Set("1", 255);

        GD.PrintS(uint8arr.Get("1"), uint8arr.Get("length")); // Prints "255 10"

        // Prints "Uint8Array(10) [ 0, 255, 0, 0, 0, 0, 0, 0, 0, 0 ]" in the browser's console.
        console.Call("log", uint8arr);

        // Equivalent of JavaScriptBridge: Array.from(uint8arr).forEach(myCallback)
        (JavaScript.GetInterface("Array").Call("from", uint8arr) as JavaScriptObject).Call("forEach", _my_js_callback);
    }

    public void MyCallback(params object[] args)
    {
        // Will be called with the parameters passed to the "forEach" callback
        // [0, 0, [JavaScriptObject:1173]]
        // [255, 1, [JavaScriptObject:1173]]
        // ...
        // [0, 9, [JavaScriptObject:1180]]
        GD.PrintS(args);
    }
}