Trouble changing Scenes in Phaser 3

[Hysteria]

Hi there fellow coders!

I'm in the making of a new game and I've run into some issues while trying to implement multiple scenes.

When I run the following code I get the error " TypeError: this.scene.start is not a function ".

    var SceneMainMenu = new Phaser.Class({
        Extends: Phaser.Scene,
        initialize:
        function SceneMainMenu ()
        {
            Phaser.Scene.call(this, { key: 'sceneMainMenu' });
        },

        preload: function ()
        {
            this.load.image('imgButtonStartNormal', 'img/button-start-normal.png');
            this.load.image('imgButtonStartHover', 'img/button-start-hover.png');
            this.load.image('imgButtonStartClicked', 'img/button-start-clicked.png');
        },

        create: function ()
        {
            this.add.text(75, 170, 'Coffee Island', { fontSize: '100px', color: '#0000FF' });

            // Start Button
            btnStart = this.add.sprite(790, 160, 'imgButtonStartNormal').setInteractive();
            btnStart.setDisplaySize(32,32);
            btnStart.on('pointerover', function (event) { btnStart.setTexture('imgButtonStartHover');/* Do something when the mouse enters */ });
            btnStart.on('pointerout', function (event) { btnStart.setTexture('imgButtonStartNormal');/* Do something when the mouse exits. */ });
            btnStart.on('pointerdown', function(event){
              btnStart.setTexture('imgButtonStartClicked');
              this.scene.start(SceneMainGame);}); // Start the main game.
        }
    });

I believe the cause is that "this" in this context is a reference to the sprite, not the actual scene, but I''ve also tried to do something like "SceneMainMenu.scene.start(SceneMainGame); and it doesn't work either.

Any sort of help will be appreciated.

Thanks!~

[samme]

btnStart.on('pointerdown', function (event) {
  // ...
  this.scene.start(SceneMainGame);
}, this);

 

[Hysteria]

Thanks for the quick answer samme!

Now the scene actually changes, but the preload function for the new scene doesn't seem to be loading, and I'm stuck with a black screen.

var SceneMainGame = new Phaser.Class({
        Extends: Phaser.Scene,
        initialize:
        function sceneMainGame ()
        {
            Phaser.Scene.call(this, { key: 'sceneMainGame' });
        },

        preload: function ()
        {
            // ...
            console.log("This is never displayed!");
    	    this.load.image('imgBackground', 'img/background.png');
            // ...
        },

        create: function ()
        {
            // ...
            console.log("This is never displayed either!");
            this.add.image(480, 320, 'imgBackground');
            // ...
        }
});

Edit 1: I forgot to had that the console doesn't display any error messages.

Edit 2: I've tried to change the order of the scenes and the MainGame scene loads just fine, which indicates that the error source it's something to do with the scene transition.

[Hysteria]

I still have no idea why the black screen keeps on showing and the second scene doesn't load properly. Any help would be appreciated. ?

[rich]

Use the Scene key to swap to it:

this.scene.start('sceneMainGame');

and make sure that your main game Scene has been added to your list of Scenes in your game config.

[Hysteria]

Thanks rich, that did the trick!

The issue was that I thought the parameter "this.scene.start();" needed was the Phaser.Scene class, but it was the key for the Phaser.Scene class.

Everything works like a charm now ~