How to remove Event Listeners & Binding other class methods in JS using NPM OpenFl ES6

JavaScript
1

Hi,

So because of the NPM version of OpenFL , i decided to make a simple project using Javascript, which i never tried to use nor i got any chance to work in it for a complete project.

But now OpenFL is also available there and with the SWF library support which is the only reason :smiley: i motivated myself to make something using pure JS.

My simple project structure is like :

app.js
Main.js
SimpleView.js

Usually i add Event.ADDED_TO_STAGE event when ever i initialize a Sprite object.

So i added the event in every class which is extending the Sprite class :

Main.js

this.addEventListener(Event.ADDED_TO_STAGE, () => 
{
    console.log("MAIN ADDED");
});

SimpleView.js

this.addEventListener(Event.ADDED_TO_STAGE, () => 
{
    console.log("SIMPLE VIEW ADDED");
});

First problem :

when i add the SimpleView object in the Main class using:

const simpleView = new SimpleView();
this.addChild(simpleView);

the simpleView object’s constructor is getting called twice one when it calls new keyword and when it is adding it to the display list.

when i removed Event.ADDED_TO_STAGE event from it’s SimpleView class constructor it was working as expected. calling it only once.

  • So how to remove the event listener once the object is added to the stage. ?
  • Because of this the simpleView constructor is being called before the Main object. the flow is getting out of order.

Second problem

How do i call the simpleView object methods from the Main class where it’s child is added.

after doing some googling i found that i need to bind the methods of the SimpleView class in the constructor like this:

this.kill = this.kill.bind(this);

but after adding this line in the constructor i am unable to access the kill method of the simpleView object.

image

so i am stuck here in simplest problem of JS :stuck_out_tongue: i am really excited about OpenFl npm package along with the SWF loading support it just opens another portal for me and to finally try the JS Mess.

thanks

2

Perhaps you could use a class-level method, I think that would allow you to add a this.removeEventListener reference within the method:

this_onAddedToStage = () => {
    console.log ("MAIN ADDED");
    this.removeEventListener (Event.ADDED_TO_STAGE, this.this_onAddedToStage);
};

Another thing to consider, when you add a class name in your new Stage, it adds your instance to the stage before your code is called. Therefore:

class Test {
    constructor () {
        console.log (this.stage != null); // true, already on stage
    }
}

var stage = new Stage (550, 400, 0xFFFFFF, Test);

If you prefer not to have it added, you could do something like this instead:

class Test2
    constructor () { 
        console.log (this.stage != null); // false, not added to stage yet
        this.addEventListener (Event.ADDED_TO_STAGE, () => {
            console.log (this.stage != null); // true, called after addChild
        });
    }
}

var stage = new Stage (550, 400, 0xFFFFFF);
stage.addChild (new Test2 ());
1 Like
3

After the recent update - both of my problems are solved.

any way i now know about the js modules and import export things ; what a mess :smiley:

Thank you :blush: