Phaser3 TileMap(.json) Multiple Level

If you are working with Phaser3 and want to create a game with multiple levels using TileMaps in .json format, you’re in the right place! In this blog post, we will explore different solutions to achieve this goal.

Solution 1: Using Phaser3 Scene Manager

One way to handle multiple levels in Phaser3 is by utilizing the Scene Manager. The Scene Manager allows you to create different scenes for each level and easily switch between them. Here’s an example:


// Level1.js
class Level1 extends Phaser.Scene {
  constructor() {
    super({ key: 'Level1' });
  }

  preload() {
    this.load.tilemapTiledJSON('level1', 'assets/level1.json');
    // additional assets loading
  }

  create() {
    const map = this.make.tilemap({ key: 'level1' });
    // additional level setup
  }
}

// Level2.js
class Level2 extends Phaser.Scene {
  constructor() {
    super({ key: 'Level2' });
  }

  preload() {
    this.load.tilemapTiledJSON('level2', 'assets/level2.json');
    // additional assets loading
  }

  create() {
    const map = this.make.tilemap({ key: 'level2' });
    // additional level setup
  }
}

// Game.js
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [Level1, Level2],
};

const game = new Phaser.Game(config);

In this solution, we create separate classes for each level (e.g., Level1, Level2) that extend Phaser.Scene. Each level class handles its own tilemap loading and level setup. The Game.js file defines the order of the levels to be loaded and played.

Solution 2: Using a Level Manager

Another approach is to create a Level Manager that handles the loading and switching of levels. Here’s an example:


class LevelManager {
  constructor(game) {
    this.game = game;
    this.levels = ['level1', 'level2'];
    this.currentLevel = 0;
  }

  loadLevel() {
    const level = this.levels[this.currentLevel];
    this.game.load.tilemapTiledJSON(level, `assets/${level}.json`);
    // additional assets loading
  }

  createLevel() {
    const level = this.levels[this.currentLevel];
    const map = this.game.make.tilemap({ key: level });
    // additional level setup
  }

  nextLevel() {
    this.currentLevel++;
    if (this.currentLevel >= this.levels.length) {
      // handle game completion
    } else {
      this.loadLevel();
      this.createLevel();
    }
  }
}

// Game.js
const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create,
  },
};

const game = new Phaser.Game(config);
let levelManager;

function preload() {
  levelManager = new LevelManager(this);
  levelManager.loadLevel();
}

function create() {
  levelManager.createLevel();
}

// When a level is completed
// levelManager.nextLevel();

In this solution, we create a LevelManager class that handles the loading and creation of levels. The Game.js file initializes the LevelManager and calls the necessary methods. When a level is completed, you can call the nextLevel() method to load and create the next level.

Conclusion

Both solutions presented here provide ways to handle multiple levels using TileMaps in Phaser3. The choice between them depends on your specific needs and preferences. Feel free to experiment with both and see which one works best for your game.

That’s it! You now have the knowledge to implement multiple levels in your Phaser3 game using TileMaps in .json format. Happy coding!

Phaser3 TileMap(.json) Multiple Level