Add scene from another scene with passing data

Phaser 3
1

I’m trying to add a scene from another scene with passing data.
I took as a basis http://labs.phaser.io/edit.html?src=src/scenes/add%20scene%20after%20game.js

Change the code

class MyScene extends Phaser.Scene {

    preload ()
    {
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    init(data)
    {
        // !!! print {}
        console.log(data)
    }

    create (data)
    {
        // !!! print {}
        console.log(data);
        this.face = this.add.image(data.x, data.y, 'face');
    }

}

class StartScene extends Phaser.Scene {

    create ()
    {
        // !!! Doesn't pass to Scene.init
        this.scene.add('myScene', MyScene, true, { x: 400, y: 300 });
    }

}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: [
        StartScene
    ]
};

var game = new Phaser.Game(config);

//game.scene.add('myScene', MyScene, true, { x: 400, y: 300 });

But instead of data comes an empty object.
Is that a mistake or did I miss something?

UPD
I added code to experiment
http://jsfiddle.net/sgLar7yo/

Phaser v3.15.1

2

Hello @OotzlyGootzly,
first of all as far as i know you should have a constructor function and then init preload create functions are working. Maybe just maybe cause of your constructor doesn’t exist, can you give it a try and let me know ?

constructor (config) { super(config); }

would do it i guess

Update: it’s working like this:

class MyScene extends Phaser.Scene {
    preload (){
        this.load.image('face', 'http://labs.phaser.io/assets/pics/bw-face.png');
    }
    create (data){
        this.face = this.add.image(data.x, data.y, 'face');
    }
}

class StartScene extends Phaser.Scene {
    create (data) {
        console.log(data);
        this.game.scene.add('myScene', MyScene, true, { x: 400, y: 300 });
    }
}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
};

var game = new Phaser.Game(config);
game.scene.add('StartScene', StartScene, true, {someVal: 132});

I dont know why but when i tryed to give scene: [StartScene] to config it didn’t work.
But when i add scene after game creat it worked.

also updated jsfiddle: http://jsfiddle.net/sgLar7yo/2/

And also you were right about constructor. Thanks for extra info @OotzlyGootzly

Also another thing: when you use this.game.scene.add you can pass the extra values but when you use this.scene.add it’s not passing the data to other scene.

1 Like
3

Good day @hcakar
If you do not write a constructor (or method), it will be called from the parent (Phaser.Scene)
In any case, I tried to call the constructor. But it didn’t help :^)

I added code to experiment http://jsfiddle.net/sgLar7yo/

4

Magic! :smile: It’s working!
Many of the examples use this.scene.add(...) I’m confused)

Thanks @hcakar

1 Like
5

Alright final one which also working

class MyScene extends Phaser.Scene {
    preload (){
        this.load.image('face', 'http://labs.phaser.io/assets/pics/bw-face.png');
    }
    create (data){
        console.log(data);
        this.face = this.add.image(data.x, data.y, 'face');
    }
}
class StartScene extends Phaser.Scene {
    create () {
        this.game.scene.add('MyScene', MyScene, true, { x: 400, y: 300 });
    }
}
var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: [ StartScene ]
};
var game = new Phaser.Game(config);

I’m just writing this to seperate from long topic.

1 Like
6

The add call didn’t pass the data object across in 3.15, this is fixed and works as expected in 3.16.

class MyScene extends Phaser.Scene {

    preload ()
    {
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create (data)
    {
        this.face = this.add.image(data.x, data.y, 'face');
    }

}

class BootScene extends Phaser.Scene {

    create ()
    {
        this.add.text(0, 0, 'Click to add new Scene');

        this.input.once('pointerdown', function () {
        
            this.scene.add('myScene', MyScene, true, { x: 400, y: 300 });

        }, this);
    }

}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: BootScene
};

var game = new Phaser.Game(config);
4 Likes
7

:+1: great!