Calling another function inside preload/update/create

[no1no]

Hi. I followed this tutorial to create a game. The example works but when I tried to add some code to it I got a problem.

class SimpleGame {
constructor() {
        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create });
    }

    game: Phaser.Game;

    preload() {
        this.game.load.image('logo', 'phaser2.png');
        this.preloadGroup1(); // error 'this.preloadGroup1' is not a function
        this.preloadGroup2();
    }

    preloadGroup1(){
        this.game.load.image('group1', 'group1.png');
    }

    preloadGroup2(){
        this.game.load.image('group2', 'group2.png');
    }
}

I got an error: 'this.preloadGroup is not a function'. It seems Phaser State call this inside it and can't find preloadGroup() which it's understandable because 'this' refer to SimpleGame object and not Phaser.State object. Strangely, calling this.game or any property work flawlessly. Any way to work around this? Please don't tell me to write everything into preload function, I'd prefer not doing that.

[drhayes]

For the fifth argument to the Phaser.Game constructor, pass "this" instead of "{ preload: this.preload, create: this.create }". When you do it the second way JavaScript loses track of what you mean by "this". One way to think of it is you're passing it the function "this.preload", not the SimpleGame object that has a method named "preload".

[no1no]

Thank you very much. It's working

[Skeptron]

Then please mark the post as solved

[no1no]

I'm not sure how to mark it as solved so I added the tag "solved" to the thread. It doesn't seem like there is any thread with this tag though.