# Loading Scenes Dynamically

**URL:** <https://phaser.discourse.group/t/loading-scenes-dynamically/2903>\
**Category:** Phaser 3\
**Created:** [June 26, 2019, 12:15am UTC](https://phaser.discourse.group/t/loading-scenes-dynamically/2903 "2019-06-26T00:15:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Meitou](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@Meitou](https://phaser.discourse.group/u/Meitou)\
**Post date:** [June 26, 2019, 12:15am UTC](https://phaser.discourse.group/t/loading-scenes-dynamically/2903/1 "2019-06-26T00:15:08Z")

</div>

Hi everyone, I’m trying to create a MMORPG using phaser. I’m still learning the framework so bear with me here. What i’m trying to do is to load the scenes in dynamically once the players moves to the new scene.

Currently, I have all my scenes extending the base scene which extends the phaser scene.

I have a function that checks if the player is on the portal, if it is then it calls the movePlayerToNextMap function.

The two issues I am facing is:

1. I am unable to dynamically create the scene without creating a class object of that scene.  
Lets say my next scene is **ForestScene** and I have a corresponding class called **ForestScene** which extends the Phaser.Scene. I am unable to add this scene to the scene manager, unless I create an instance of **ForestScene** and then pass this object into the SceneManager.

2. I have a function called movePlayerToNextMap inside the outter most child scene because I have it extend **BaseScene** which extends the Phaser scene. Therefore, I cannot put movePlayerToNextMap in the **BaseScene** class because if I have another scene called **DesertScene** which extends **BaseScene** , then i cannot create an instance of the **DesertScene** within the **BaseScene** since it is a child of **BaseScene**. However, all my Scenes should extend **BaseScene** and all **BaseScene** should have movePlayerToNextMap method.

Here is my implementation of movePlayerToNextMap

```
 movePlayerToNextMap(nextScenePortalObj) {
        const nextSceneKey = nextScenePortalObj.name;
        const sceneObj = new DesertScene();
        if (!this.scene.manager.getScene(nextSceneKey)) {
            this.scene.add(nextScenePortalObj.name, sceneObj, true);
            this.scene.remove('forestScene);
        }
    }
```

---

<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 26, 2019, 12:21pm UTC](https://phaser.discourse.group/t/loading-scenes-dynamically/2903/2 "2019-06-26T12:21:05Z")

</div>

Welcome Meitou,  
It sounds like you’re just trying to go through a portal in your game and load the corresponding scene, right? If that’s the case, you should load all of your scenes in your `main.js` class, right after you create your phaser game. Here’s an example:

```javascript
this.game.scene.add('Boot', new Boot());
this.game.scene.add('Preloader', new Preloader());
this.game.scene.add('DesertScene', new DesertScene());
this.game.scene.add('World', new World());

```

Once completed, in any of your scenes, you can progress to a different scene like so:  
`this.scene.start('Boot');`

So in your example, I would create a portal with a property such as `portal.sceneKey = "DesertScene"`. Once the player has interacted with the portal, you can simply do: `this.scene.start(portal.sceneKey);`.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [June 26, 2019, 7:07pm UTC](https://phaser.discourse.group/t/loading-scenes-dynamically/2903/3 "2019-06-26T19:07:48Z")

</div>

You can also use webpack to lazyload your scenes with code splitting. See the snippet below which is from my [phaser template](https://phaser.discourse.group/t/phaser-3-starter-templates-with-es6-esnext-or-typescript/954).

```javascript
export default class PreloadScene extends Phaser.Scene {
  constructor() {
    super({ key: 'PreloadScene' })
  }

  preload() {
    this.load.image('phaser-logo', 'assets/img/phaser-logo.png')
  }

  create() {
    this.scene.start('MainScene')

    /**
     * This is how you would dynamically import the mainScene class (with code splitting),
     * add the mainScene to the Scene Manager
     * and start the scene.
     * The name of the chunk would be 'mainScene.chunk.js
     * Find more about code splitting here: https://webpack.js.org/guides/code-splitting/
     */
    // let someCondition = true
    // if (someCondition)
    // import(/* webpackChunkName: "mainScene" */ './mainScene').then(mainScene => {
    // this.scene.add('MainScene', mainScene.default, true)
    // })
    // else console.log('The mainScene class will not even be loaded by the browser')
  }
}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 26, 2019, 7:57pm UTC](https://phaser.discourse.group/t/loading-scenes-dynamically/2903/4 "2019-06-26T19:57:26Z")

</div>

> [@Meitou](#):
>
> I am unable to add this scene to the scene manager, unless I create an instance of **ForestScene** and then pass this object into the SceneManager.

Can you explain? There’s no problem with adding multiple scenes from the same class as long as you use distinct keys, e.g.,

```
this.scene.add('DesertScene1', DesertScene, true); // …
this.scene.add('DesertScene2', DesertScene, true); // … etc.

```