Hysteria

Trouble changing Scenes in Phaser 3

Recommended Posts

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!~

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ~

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.