Scripts in Editor not working

Hi to everyone :slight_smile:,
I’m a newbie of Babylon.js. I’m trying to understand how Editor works.

To make some tests I downloaded it and I’m following the official guide.

Even though I’m following the step by step guide, I can’t get the scripts work.

In particular, I’m referring to the “Adding a new script” paragraph.

By doing the same operations, I’ve created a new script called “rotation.ts” and I placed it in the path “src/scripts/rotator.ts”. The goal of this script is the same of the guide: rotate the cube in the scene as showed in the example.

import { Mesh } from "@babylonjs/core";
import { visibleInInspector } from "../scenes/decorators";

/**
 * This represents a script that is attached to a node in the editor.
 * Available nodes are:
 *      - Meshes
 *      - Lights
 *      - Cameas
 *      - Transform nodes
 * 
 * You can extend the desired class according to the node type.
 * Example:
 *      export default class MyMesh extends Mesh {
 *          public onUpdate(): void {
 *              this.rotation.y += 0.04;
 *          }
 *      }
 * The function "onInitialize" is called immediately after the constructor is called.
 * The functions "onStart" and "onUpdate" are called automatically.
 */
export default class rotator extends Mesh {

    @visibleInInspector("number", "RotationSpeed", 0.5)
    private _speed: number;

    /**
     * Override constructor.
     * @warn do not fill.
     */
    // @ts-ignore ignoring the super call as we don't want to re-init
    protected constructor() { }

    /**
     * Called on the node is being initialized.
     * This function is called immediatly after the constructor has been called.
     */
    public onInitialize(): void {
        // ...
    }

    /**
     * Called on the scene starts.
     */
    public onStart(): void {
        // ...
    }

    /**
     * Called each frame.
     */
    public onUpdate(): void {
        this.rotation.y += this._speed;
    }

    /**
     * Called on the object has been disposed.
     * Object can be disposed manually or when the editor stops running the scene.
     */
    public onStop(): void {
        // ...
    }

    /**
     * Called on a message has been received and sent from a graph.
     * @param message defines the name of the message sent from the graph.
     * @param data defines the data sent in the message.
     * @param sender defines the reference to the graph class that sent the message.
     */
    public onMessage(name: string, data: any, sender: any): void {
        switch (name) {
            case "myMessage":
                // Do something...
                break;
        }
    }
}

I tried different approaches to add the script:

  1. drag & drop. When I assign the script in this way, there is the loading symbol that rotates endlessly. I need to restart the Editor to stop it. The following image represents the final situation after the assignment:
    image
    I don’t understand why the Path is “Undefined”. In the official guide, after the assignment, the path is right:

  1. click on “None”. When I click on “None”, no script appears, compared to what is showed in the example gif.
    TickTick_NDeG0RFS9a
    Again, in the official guide (same gif above) the rotation script appears during the selection.

Assuming to arrive to the situation in the image below (script assigned with drag&drop), if I press Play button it should start to rotate

image

In the “Rotating the cube using the attached script” paragraph of the official guide it says:

All TypeScript files are packed using, by default, WebPack, including the scripts that are attached to objects. That means we have to watch (or build) the project to see the effect when running the game.
There are 2 ways to watch the project:
Watch automatically with the Editor
Watch using a command line that runs a script available in the package.json file or the project.

So I suppose that pressing Play button it should work (with the configuration in the image below) it should work right:

But nothing :confused:

Can anyone help me please?

Thank you :slight_smile:


Update

Ok, I noticed that placing the script in “scr/scenes/scene” now it is visible with both drag & drop and click on “None” methods. But always keep loading endlessly

TickTick_99bsXuWani image

Anyway, pressing play it still doesn’t work…


Update

Ok, probably the problem is related to “decorators” and “tools” files


Update

To solve these problems I ran the following terminal commands:

npm install
npm audit fix --force
npm fund

and then again:

npm run watch

Finally I restarted the Editor and now it’s all ok.

BabylonJS_Editor_jgWS2OMZr7

pinging @julien-moreau

Thank you for the reply :slight_smile:. I’ve updated the solution :slight_smile:

1 Like

I have another problem and I need help :persevere:.

I added to the previous code a particle system “rain”:

import { Mesh, Particle } from "@babylonjs/core";
import { fromParticleSystems, visibleInInspector } from "../decorators";
import { ParticleSystem } from "@babylonjs/core";

/**
 * This represents a script that is attached to a node in the editor.
 * Available nodes are:
 *      - Meshes
 *      - Lights
 *      - Cameas
 *      - Transform nodes
 * 
 * You can extend the desired class according to the node type.
 * Example:
 *      export default class MyMesh extends Mesh {
 *          public onUpdate(): void {
 *              this.rotation.y += 0.04;
 *          }
 *      }
 * The function "onInitialize" is called immediately after the constructor is called.
 * The functions "onStart" and "onUpdate" are called automatically.
 */
export default class rotator extends Mesh {

    @visibleInInspector("number", "RotationSpeed", 0.5)
    private _speed: number;

    @fromParticleSystems("rain")
    private _rain: ParticleSystem;

    /**
     * Override constructor.
     * @warn do not fill.
     */
    // @ts-ignore ignoring the super call as we don't want to re-init
    protected constructor() { }

    /**
     * Called on the node is being initialized.
     * This function is called immediatly after the constructor has been called.
     */
    public onInitialize(): void {
        // ...
    }

    /**
     * Called on the scene starts.
     */
    public onStart(): void {
        this._rain.start();
    }

    /**
     * Called each frame.
     */
    public onUpdate(): void {
        this.rotation.y += this._speed;
    }

    /**
     * Called on the object has been disposed.
     * Object can be disposed manually or when the editor stops running the scene.
     */
    public onStop(): void {
        // ...
    }

    /**
     * Called on a message has been received and sent from a graph.
     * @param message defines the name of the message sent from the graph.
     * @param data defines the data sent in the message.
     * @param sender defines the reference to the graph class that sent the message.
     */
    public onMessage(name: string, data: any, sender: any): void {
        switch (name) {
            case "myMessage":
                // Do something...
                break;
        }
    }
}

…but when I press Play it says:

Uncaught TypeError: Cannot read properties of undefined (reading ‘start’)
at Mesh.webpack_modules…/src/scenes/scene/rotator.ts.rotator.onStart (rotator.ts:50:20)
at Observer.callback (tools.ts:190:19)
at Observable.notifyObservers (observable.js:288:1)
at Scene.render (scene.js:3439:1)
at index.ts:47:52
at Engine._renderFrame (engine.js:807:1)
at Engine._renderLoop (engine.js:822:1)

I have simply added the script of the “From Particles Systems” paragraph of the official guide.

Can anyone explain to me why it doesn’t work? Thank you :slight_smile:

1 Like

Hi @g.pad !

Cool that you fixed your first issue! I’m adding a way to put scripts anywhere in the src folder, this is known issue and I’m on it

For you latest issue, this is a problem I solved and not yet released. You decorated the speed property with a default value but this default value is not applied. Just set private _speed: number = 0.5; so it has a default value.

If you never select the objects attached to the script the default value is not applied :frowning:

I’m releasing the editor using babylonjs v5 ASAP so these issues will be fixed

1 Like

Hi @julien-moreau,
thank you for the answer and for all your great work! Its amazing!

I think that the problem is not associated to the default value of _speed variable but is associated to the _rain variable.

Even if I set a default value to the variable as you suggested, I get the same error.

BabylonJS_Editor_eyQ1uaS0MF

...
...
export default class rotator extends Mesh {

    @visibleInInspector("number", "RotationSpeed", 0.05)
    private _speed: number = 0.05;

    @fromParticleSystems("rain")
    private _rain: ParticleSystem;
...
...

Oh, another thing. What do you mean with “select” the objects? :thinking:

Hi @g.pad

@Limes2018 is having the same kind of issue I’m working on. It’ll be released with the editor using Babylon.JS v5

2 Likes

@g.pad i think the problem is solved. Waiting for @Limes2018 to tell us if it works in his project.

1 Like