Custom JavaScript Components

We continue where we left off in Getting Started.

Overview

Goal of this tutorial will be to get you familiar with how to add custom logic to your project.

We will be creating two script that allow counting the number of frames an object was looked at.

One script will be added to the camera, which will raycast for counting objects. The second is added to an object to do the counting.

Add a Script Path

We need tell the Wonderland Engine where to look for scripts. Create a new folder js in your project root directory.

Then open the “Project Settings” and find “Scripting”. With “Add Folder” you can select the newly added directory.

Watch JavaScript

To make our workflow as smooth as possibly, we next enabled “Watch JavaScript” to make the editor aware of changes to the scripts when we save.

You find this option in the “Launcher” view.

Add a Component

Right click the empty space in the “Asset Browser” and add a new JavaScript component. Name the component counting-gaze.js Make sure to add “.js” when renaming.

By double clicking, the file will be opened with the application you configured your system to open .js files with.

Code!

And finally, we fill the component with life. The following code sends out a raycast into the scene every frame:

WL.registerComponent('counting-gaze', {}, {
    init: function() {
        console.log('Counting gaze initialized');
    },
    update: function() {
        /* Get the translation of this object */
        let origin = [0, 0, 0];
        glMatrix.quat2.getTranslation(origin, this.object.transformLocal);

        let dir = [0, 0, -1];
        /* Rotate the dir vector by the rotation of this object
         * to get the camera view direction.
         *
         * transformWorld is a dual quaternion:
         * Floats 0-3 are rotation, 4-7 are translation.
         * transformQuat only uses 0-3, so this does rotation only. */
        glMatrix.vec3.transformQuat(dir, dir, this.object.transformWorld);
        let rayHit = WL.scene.rayCast(origin, dir, (1 << 8) - 1);
        if(rayHit.hitCount > 0) {
            for(let i = 0; i < rayHit.hitCount; ++i) {
                /* Currently, you need to wrap the hit objects into the
                 * JavaScript class yourself! */
                let o = new WL.Object(rayHit.objects[i]);

                // TODO: We will count up the counter on the
                // hit object here later instead!
                console.log('Raycast hit object:', o.name);
            }
        }
    },
});

For now we are just printing the hit objects.

Add It to An Object

This component isn’t just run automatically. We need to add it to the camera!

Run

To see the component in action, “Package”, “Start Server” and “Open Browser”.

If you open the JavaScript console with Ctrl+Shirt+C, you will notice the component has been initialized.

No object names are being printed, though. WL.scene.rayCast() uses the collision system, which only works with collider components. To make sure the raycast hits something, we need to add more components!

Colliders

Add a child to the postbox object as shown in the following screenshot. Add a collision component to it and reduce the radius to roughly match the present.

With this set up, we can “Package” and see that the raycast works.

Counting and Displaying

We need to keep track of counts and finally display them in a text component.

Add a “text” component to our “Collider” object and change the text to 0.

Then add a new JavaScript source file with the name gaze-counter.js.

WL.registerComponent('gaze-counter', {
    msg: {type: WL.Type.String, default: 'i'}
}, {
    init: function() {
        this.count = 0;
        this._oldCount = -1;
        console.log('Gaze counter initialized');
    },
    update: function() {
        /* In case the count changed, update the text
         * component. Avoid unnecessary updates for better
         * performance. */
        if(this._oldCount != this.count) {
            console.log("Updated gaze count!");
            let textComp = this.object.getComponent('text', 0);
            textComp.text = this.msg + " " + this.count.toString();
            this._oldCount = this.count;

            console.log(textComp.text);
        }
    },
});

You will notice the msg param here. It will automatically generate an input field for us when we add the component to the “Collider” object:

Finally, replace the // TODO comment in counting-gaze.js with the following:

    let counterComp = o.getComponent('gaze-counter', 0);
    if(counterComp) {
        counterComp.count++;
    }

Result

“Package” and check the browser. You will now see the final result!