Multiple scene with multiple physics config

Phaser 3
1

Hi,

Can any one please help me to add or create a scene or pass the unique config to different scene while starting/calling the new scene.

For Example:
SceneA should have Physics{matter}
SceneB should have Physics{default}
SceneC should have Physics{arcade}

How to do it? Can you please refer me a link or way to resolve this issue.

Thanks in advance.

-RajKishore

2

Hey kraj,
In your scene’s config, just add all of the physics options like so:

physics: {
    arcade: {
        debug: true,
        gravity: { y: 200 }
    },
    matter: {
        debug: true,
        gravity: { y: 0.5 }
    },
    impact: {
        gravity: 100,
        debug: true,
        setBounds: {
            x: 100,
            y: 100,
            width: 600,
            height: 300,
            thickness: 32
        },
        maxVelocity: 500
    }
}

Now in your individual scenes, use whatever engine you would like.

Ex:
this.matter.add.image();

this.impact.add.image();

this.physics.add.image();

2 Likes
3

I tried this but dint work…

I have one js file where i have my config:

var config = {
type: Phaser.AUTO,
width: 1136, height: 640, parent: ‘gameholder’,
physics: {
arcade: { gravity: { y: 60 } },
matter: { debug: true, gravity: { y: 0.5 } }
},
scene:[Main,GravityGame1,GravityGame2]
};
var game = new Phaser.Game(config);

So how to use the physics arcade for GravityGame1 and how to use physics matter for GravityGame2?

I am using below method and getting errors:
Code Snippet:

var group = this.physics.add.group({
defaultKey: ‘block’,
bounceX: 1,
bounceY: 1,
collideWorldBounds: true
});
Error: Uncaught TypeError: Cannot read property ‘add’ of undefined

Code Snippet:

this.matter.world.setBounds(100,100,300,300);

Error: Uncaught TypeError: Cannot read property ‘world’ of undefined

Thanks,
RajKishore

4

Try this:

var config = {
    type: Phaser.AUTO,
    width: 1136, height: 640, parent: ‘gameholder’,
    scene:{
        physics: {
            arcade: { gravity: { y: 60 } },
            matter: { debug: true, gravity: { y: 0.5 } }
        }
    }
};

var game = new Phaser.Game(config);
var main = new Main();
var gravityGame1 = new GravityGame1();
var gravityGame2 = new GravityGame2();

game.scene.add('main ', main );
this.game.scene.add('gravityGame1 ', gravityGame1 );
this.game.scene.add('gravityGame2 ', gravityGame2 );

NOTE: You will no longer need a constructor in your scene classes. When you want to go to a scene, you will reference it by the first parameter in this.game.scene.add('gravityGame1 ', gravityGame1 );

5

you can du like this:
new Phaser.Game({
…
scene: [BootScene, PlayScene]
})

//PlayScene.js
export default class PlayScene extends Scene {

constructor() {
super({
key: ‘PlayScene’,
physics: {
arcade: {
debug: true,
gravity: { y: 200 }
},
matter: {
debug: true,
gravity: { y: 0 }
}
}
})

}