# Implement multiple levels

**URL:** <https://phaser.discourse.group/t/implement-multiple-levels/8108>\
**Category:** Phaser 3\
**Created:** [November 12, 2020, 9:38pm UTC](https://phaser.discourse.group/t/implement-multiple-levels/8108 "2020-11-12T21:38:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhysdoescode](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rhysdoescode/32/4144_2.png) [@rhysdoescode](https://phaser.discourse.group/u/rhysdoescode)\
**Post date:** [November 12, 2020, 9:38pm UTC](https://phaser.discourse.group/t/implement-multiple-levels/8108/1 "2020-11-12T21:38:57Z")

</div>

For my game I want multiple levels using the same tileset, but different layouts (defined using tiled).

What is the best way to organise my game code to achieve this?

Right now I’m trying a weird approach where I add the player and particles in the ‘gameScene’ class and the level specific stuff in the ‘levelOne’ scene class and running them in parralel, but it’s pretty confusing.

Should I just make each level it’s complete own scene, even if it means repeating the preloading of images and defining physics groups (for tiled objects)?

I already have the player movement and controls in a seperate class, which definetly is a good first step.

TLDR: Just need some guidance on how to start organising my code for a level-based game using scenes and classes. Thanks!

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [November 13, 2020, 5:47am UTC](https://phaser.discourse.group/t/implement-multiple-levels/8108/2 "2020-11-13T05:47:21Z")

</div>

Hi,  
You can make a PreloadScene so you just preloads your assets once.  
You can make a scene per level, lot of people do it this way.  
I personnaly don’t create a scene per level, i just destroy the map and the enemies, load a new one and reset the player’s position. My tiled maps contains objects layers with enemies position and doors that contains the next map with the next player position.

---

<div class="post-metadata">

**Author:** ![rhysdoescode](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rhysdoescode/32/4144_2.png) [@rhysdoescode](https://phaser.discourse.group/u/rhysdoescode)\
**Post date:** [November 14, 2020, 3:58pm UTC](https://phaser.discourse.group/t/implement-multiple-levels/8108/3 "2020-11-14T15:58:47Z")

</div>

Thanks for your help @BlunT76!

I’ve tried to implement this method where the game can load the tilemap via a loadLevel() function, which works when the level is first made.

```
loadLevel(key){
    
    this.level = this.make.tilemap({key: key});

    this.tileset = this.level.addTilesetImage("tileset", "tiles")
    this.platforms = this.level.createStaticLayer("platforms", this.tileset)}. . . . .

```

And then when the player switches to a new level (currently by pressing ‘H’ for testing), I tried to destroy the previous level before calling the loadLevel() function.

This is in the update function.

```
if (Phaser.Input.Keyboard.JustDown(this.keyH)) {
      this.level.removeAllLayers()
      this.loadLevel(this.key)
  }

```

However, when I try and load the new level, I get the error “layerData is undefined”.

I also tried to use “this.level.destroy()” but got the same error.

Anyone have any idea where I’ve gone wrong?

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [November 14, 2020, 6:35pm UTC](https://phaser.discourse.group/t/implement-multiple-levels/8108/4 "2020-11-14T18:35:19Z")

</div>

Here’s what i do when changing the level, perhaps your problem comes from calling it in the update method, and don’t forget to preload all yours levels

```javascript
loadLevel(key){
  this.physics.world.colliders.destroy();
  this.level.destroy();
  this.level = this.make.tilemap({ key:key, tileWidth: 16, tileHeight: 16 });
  this.tileset = this.level.addTilesetImage(scene.map.tilesets[0].name, 'tiles', 16, 16); // only needed if you change the tileset
  this.platforms = this.level.createStaticLayer("platforms", this.tileset, 0, 0);
and recreate the colliders
}

```