# Multiple scene with multiple physics config

**URL:** <https://phaser.discourse.group/t/multiple-scene-with-multiple-physics-config/2755>\
**Category:** Phaser 3\
**Created:** [June 12, 2019, 6:44am UTC](https://phaser.discourse.group/t/multiple-scene-with-multiple-physics-config/2755 "2019-06-12T06:44:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![krajkishore2](https://avatars.discourse-cdn.com/v4/letter/k/b782af/32.png) [@krajkishore2](https://phaser.discourse.group/u/krajkishore2)\
**Post date:** [June 12, 2019, 6:44am UTC](https://phaser.discourse.group/t/multiple-scene-with-multiple-physics-config/2755/1 "2019-06-12T06:44:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [June 12, 2019, 12:21pm UTC](https://phaser.discourse.group/t/multiple-scene-with-multiple-physics-config/2755/2 "2019-06-12T12:21:31Z")

</div>

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

```javascript
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();`

---

<div class="post-metadata">

**Author:** ![krajkishore2](https://avatars.discourse-cdn.com/v4/letter/k/b782af/32.png) [@krajkishore2](https://phaser.discourse.group/u/krajkishore2)\
**Post date:** [June 13, 2019, 6:25am UTC](https://phaser.discourse.group/t/multiple-scene-with-multiple-physics-config/2755/3 "2019-06-13T06:25:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [June 13, 2019, 12:29pm UTC](https://phaser.discourse.group/t/multiple-scene-with-multiple-physics-config/2755/4 "2019-06-13T12:29:38Z")

</div>

Try this:

```javascript
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 );`

---

<div class="post-metadata">

**Author:** ![shuazi](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/shuazi/32/3171_2.png) [@shuazi](https://phaser.discourse.group/u/shuazi)\
**Post date:** [April 17, 2020, 5:22am UTC](https://phaser.discourse.group/t/multiple-scene-with-multiple-physics-config/2755/5 "2020-04-17T05:22:34Z")

</div>

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

[//PlayScene.js](https://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 }  
}  
}  
})

}