ES6 class overwrite methods

Questions
1

Hey everbody,

i’am trying to create an Class inhereting from BABYLON.Mesh but i cant make something like an init() and update() function work. Has anyone had any experience with that topic?

here’s my class in a playground scene: https://playground.babylonjs.com/#YXVUTT

2

Why can you not inherit from it ?

3

inheriting works, but not the overwriting of the onReady() and registerAfterRender()

4

But there are no onReady or registerAfterRender function to override on Mesh, those are only available on Scene.

I am totally not sure of what you are trying to achieve ?

5

Mesh has an onReady Function.
https://doc.babylonjs.com/api/classes/babylon.mesh#onready
In cause of registerAfterRender, your’re right… i got something wrong.

but let me explain, what iam trying to achieve. If you add a script to a gameobject in engines like godot you get some methods to overwrite when the object gets created, updated, destroyed etc. As soon as you add such an object to your scene the engine take care of calling this methods. In Babylon i usually implement my own init und update methods and call them “by hand”. For example, when i want to update an object i call myObject.update() in the registerAfterRender() callback of the scene object. Which works, but it gets complicated when dynamicly add objects while your scene in running.

6

It is not a function in Node but just a property. You can not override it, but you can assign it.

/**
  * Callback raised when the node is ready to be used
  */
public onReady: Nullable<(node: Node) => void> = null;
7

This is exactly what the BABYLON.SceneManager and BABYLON.ScriptComponents do… Get script component life cycle. Check out: Script Components (Unity exporter) - Babylon.js Documentation

Legacy Getting Started Video

Example Legacy Mesh Component

module PROJECT {
    export class NewMeshComponent extends BABYLON.MeshComponent {
        public constructor(owner: BABYLON.AbstractMesh, scene: BABYLON.Scene, tick: boolean = true, propertyBag: any = {}) {
            super(owner, scene, tick, propertyBag);
        }

        protected start() :void {
            // Start component function
        }

        protected update() :void {
            // Update render loop function
        }

        protected after() :void {
            // After render loop function
        }

        protected destroy() :void {
            // Destroy component function
        }
    }
}

There is a new version of the Babylon Toolkit in the works now

1 Like
8

yes, thats what i mean. What is the babylon-toolkit? Can i achieve something simular with “vanilla” babylon?

9

There are many ways to achieve that in babylon, you will need to decide on a method and implement it yourself.

Babylon is reactive, observer oriented. The best example is the scene class - Scene - Babylon.js Documentation from this method on you can see the observables available for you. You could register a callback for each mesh when constructing it (for example using the scene. onNewMeshAddedObservable) along with a help class, just like Mackey suggested:

scene.onNewMeshAddedObservable.add((mesh) => {
    const helper = meshHelperManager.getHelper(mesh);
    if(!helper) return;
    helper.onCreate();
});
scene.onBeforeRenderObservable.add(() => {meshHelperManager.updateAll()});
scene.onBeforeRenderObservable.add(() => {meshHelperManager.afterAll()});
scene.onMeshRemovedObservable.add((mesh) => {
    const helper = meshHelperManager.getHelper(mesh);
    if(!helper) return;
    helper.onDestroy();
});

// create a mesh
const helper = meshHelperManager.createHelper(meshId);
helper.onCreate = () => { /* whatever here */ };
helper.onDestroy = () => { /* */ }
helper.onUpdate = () => {};
const mesh = new Mesh(meshId, .....);

this is one way to implement that, there are others, but it all depends on your architecture. And of course, you will need to implement the mesh helper manager :slight_smile: . but this is rather straight forward.

Using the same architecture you could build an event-baset architecture to any type of object in babylon. We don’t support it, but offer you a lot of observables that you can register to. I like doing it myself (i wouldn’t create this meshHelper class), as i like the flexibility. having said that, whenever i create a complex babylon scene, i always create a meshContainer class, that takes care of most of those things. not automatically, but manually when needed.

2 Likes