Overlap in tilemap

Phaser 3
1

I want to select 1 object in my tilemap and check whether my player hits it or not, and I can give collision in this object propslayer, there is no problem with specific objects, but I cannot get it into condition.

All I want is for example: When I hit the object with id 36, I want to print text on the console.

import { Scene } from "phaser";

import Scenes from "./";
import { Player } from "../objects";

import GameManager from "../managers/gameManager";
import Level1Scene from "./level1scene";

export default class GameScene extends Scene {
  //actors
  private declare player: Player;
  private declare currentScene: Scene;
  // tilemap
  private declare map: Phaser.Tilemaps.Tilemap;

  // tilesets
  private declare propsTileSet: Phaser.Tilemaps.Tileset;
  private declare wallTileset: Phaser.Tilemaps.Tileset;
  private declare bgTileset: Phaser.Tilemaps.Tileset;
  // tilemap layers
  private declare propsLayer: Phaser.Tilemaps.TilemapLayer;
  private declare bgLayer: Phaser.Tilemaps.TilemapLayer;
  private declare wallsLayer: Phaser.Tilemaps.TilemapLayer;

  private declare currentMap: string;

  constructor() {
    super({
      key: Scenes.GameScene.key,
    });
    this.currentMap = "level-1";
  }

  init() {
    this.game.events.emit("react__onGameStart");
  }

  create() {
    console.log(this.currentMap);
    this.createTiles();
    this.createLayers();
    this.map.setCollision([1025, 1026]);
    this.createPlayer();
    this.createFullscreenButton();
    this.cameras.main.startFollow(this.player);
    this.cameras.main.setZoom(2);
  }

  private createFullscreenButton() {
    const fullscreenButton = this.add
      .sprite(this.cameras.main.width, this.cameras.main.height, "fullScreen")
      .setInteractive();

    fullscreenButton.on("pointerup", () => {
      this.toggleFullscreen();
    });
  }

  private toggleFullscreen() {
    if (this.scale.isFullscreen) {
      this.scale.stopFullscreen();
    } else {
      this.scale.startFullscreen();
    }
  }

  update(time: number, delta: number): void {
    this.player.update();
    this.physics.collide(this.player, this.wallsLayer);
    this.physics.collide(this.player, this.propsLayer);
    this.propsLayer.setCollisionBetween(36, 40);
  }
  private createTiles(): void {
    this.map = this.make.tilemap({
      key: this.currentMap,
    });
    this.propsTileSet = this.map.addTilesetImage("props")!;
    this.wallTileset = this.map.addTilesetImage("ground")!;
  }

  private createLayers() {
    this.add.image(0, 0, "bg").setOrigin(0, 0);
    this.propsLayer = this.map.createLayer("props", this.propsTileSet, 0, 0)!;
    this.wallsLayer = this.map.createLayer("ground", this.wallTileset, 0, 0)!;
  }
  private createPlayer(): void {
    this.player = new Player({
      key: "player",
      scale: 1,
      scene: this,
      tag: "player",
      texture: "atlas",
      x: 50,
      y: 0,
      afterCreate: () => {
        console.log("Player is created");
      },
    });
  }
}
2 
this.physics.collide(this.player, this.propsLayer, (player, tile) => {
  console.log('tile', tile.index);
});

Also, move this to createLayers():

3

I did it this way and it worked thanks.
“this.physics.add.collider(this.propsLayer, this.player, (player, tile) => {
if (tile.index == 37) {
console.log(“Collision with tile index 37”);
}
});”

I have one more question, I have more than 1 tilemap and I want to make a level system, simply as you can see in game.ts, I get the level-1 key i, so level-1.json gets my tilemap, what should I do to load level-2, is restarting the scene a solution?

Here’s my gameManger class:

import { Scene } from "phaser";
import { Player } from "../objects";
import Scenes from "../scenes";

export default class GameManager {
  getScene(currentLevelKey: string) {
    throw new Error("Method not implemented.");
  }
  private static _instance: GameManager;
  private player: Player | null;
  private declare levels: string[];
  private declare _currentLevelKey: string;
  private declare currentLevel: integer;
  private constructor() {
    this.player = null;
    this.currentLevel = 1;
    this.levels = ["level-1", "level-2"];
  }

  public static get instance(): GameManager {
    if (!GameManager._instance) {
      GameManager._instance = new GameManager();
    }
    return GameManager._instance;
  }

  public setPlayer(player: Player): void {
    this.player = player;
  }

  public getPlayer(): Player | null {
    return this.player;
  }

  public get(): string {
    return this.levels[this.currentLevel];
  }

  public nextlevel() {
    if (this.currentLevel < this.levels.length - 1) {
      this.currentLevel += 1;
    }
  }
}

this is my game.ts class:

import { Scene } from "phaser";

import Scenes from "./";
import { Player } from "../objects";

import GameManager from "../managers/gameManager";
import Level1Scene from "./level1scene";

export default class GameScene extends Scene {
  //actors
  private declare player: Player;
  private declare currentScene: Scene;
  // tilemap
  private declare map: Phaser.Tilemaps.Tilemap;

  // tilesets
  private declare propsTileSet: Phaser.Tilemaps.Tileset;
  private declare wallTileset: Phaser.Tilemaps.Tileset;
  private declare bgTileset: Phaser.Tilemaps.Tileset;
  // tilemap layers
  private declare propsLayer: Phaser.Tilemaps.TilemapLayer;
  private declare bgLayer: Phaser.Tilemaps.TilemapLayer;
  private declare wallsLayer: Phaser.Tilemaps.TilemapLayer;

  private declare currentMap: string;

  constructor() {
    super({
      key: Scenes.GameScene.key,
    });
  }

  init() {
    this.game.events.emit("react__onGameStart");
  }

  create() {
    this.createTiles();
    this.createLayers();
    this.map.setCollision([1025, 1026]);
    this.createPlayer();
    this.createFullscreenButton();
    this.cameras.main.startFollow(this.player);
    this.cameras.main.setZoom(2);
  }

  private createFullscreenButton() {
    const fullscreenButton = this.add
      .sprite(this.cameras.main.width, this.cameras.main.height, "fullScreen")
      .setInteractive();

    fullscreenButton.on("pointerup", () => {
      this.toggleFullscreen();
    });
  }

  private toggleFullscreen() {
    if (this.scale.isFullscreen) {
      this.scale.stopFullscreen();
    } else {
      this.scale.startFullscreen();
    }
  }

  update(time: number, delta: number): void {
    this.player.update();
    this.physics.collide(this.player, this.wallsLayer);
    this.physics.collide(this.player, this.propsLayer);
    this.physics.add.collider(this.propsLayer, this.player, (player, tile) => {
      if (tile.index == 37) {
        console.log("Collision with tile index 37");
        GameManager.instance.nextlevel();
        GameManager.instance.currentLevelKey;
        this.scene.restart();
      }
    });
  }
  private createTiles(): void {
    this.map = this.make.tilemap({
      key: GameManager.instance.currentLevelKey,
    });
    this.propsTileSet = this.map.addTilesetImage("props")!;
    this.wallTileset = this.map.addTilesetImage("ground")!;
  }

  private createLayers() {
    this.add.image(0, 0, "bg").setOrigin(0, 0);
    this.propsLayer = this.map.createLayer("props", this.propsTileSet, 0, 0)!;
    this.wallsLayer = this.map.createLayer("ground", this.wallTileset, 0, 0)!;

    this.propsLayer.setCollisionBetween(36, 40);
  }
  private createPlayer(): void {
    this.player = new Player({
      key: "player",
      scale: 1,
      scene: this,
      tag: "player",
      texture: "atlas",
      x: 50,
      y: 0,
      afterCreate: () => {
        console.log("Player is created");
      },
    });
  }
}

but it does not work, first it opens level-1 again, then there is a level-1 map in the game even if the key is updated.

4

Use add.collider() in create() only, never in update(). You can use collide() in update().

You should be able to restart the scene with different data, yes. Have you verified that GameManager.instance.currentLevelKey is actually changing?

5

Yes is changing :
This is when start the game
game started
game.ts:38 level-1
game.ts:103 Player is created

This is when ı hit the box
game.ts:38 level-2
launcher.tsx:33 game started

level-1 and level-2 is : console.log(GameManager.instance.currentLevelKey); in create function

game.ts :

import { Scene } from "phaser";

import Scenes from "./";
import { Player } from "../objects";

import GameManager from "../managers/gameManager";
import Level1Scene from "./level1Scene";

export default class GameScene extends Scene {
  //actors
  private declare player: Player;
  private declare currentScene: Scene;
  // tilemap
  private declare map: Phaser.Tilemaps.Tilemap;

  // tilesets
  private declare propsTileSet: Phaser.Tilemaps.Tileset;
  private declare wallTileset: Phaser.Tilemaps.Tileset;
  private declare bgTileset: Phaser.Tilemaps.Tileset;
  // tilemap layers
  private declare propsLayer: Phaser.Tilemaps.TilemapLayer;
  private declare bgLayer: Phaser.Tilemaps.TilemapLayer;
  private declare wallsLayer: Phaser.Tilemaps.TilemapLayer;

  private declare currentMap: string;

  constructor() {
    super({
      key: Scenes.GameScene.key,
    });
  }

  init() {
    this.game.events.emit("react__onGameStart");
  }

  create() {
    console.log(GameManager.instance.currentLevelKey);
    this.createTiles();
    this.createLayers();
    this.map.setCollision([1025, 1026]);
    this.createPlayer();
    this.createFullscreenButton();
    this.cameras.main.startFollow(this.player);
    this.cameras.main.setZoom(2);
    this.physics.add.collider(this.propsLayer, this.player, (player, tile) => {
      if ((tile as Phaser.Tilemaps.Tile).index == 37) {
        GameManager.instance.nextlevel();
        GameManager.instance.currentLevelKey;
        this.scene.restart();
      }
    });
  }

  private createFullscreenButton() {
    const fullscreenButton = this.add
      .sprite(this.cameras.main.width, this.cameras.main.height, "fullScreen")
      .setInteractive();

    fullscreenButton.on("pointerup", () => {
      this.toggleFullscreen();
    });
  }

  private toggleFullscreen() {
    if (this.scale.isFullscreen) {
      this.scale.stopFullscreen();
    } else {
      this.scale.startFullscreen();
    }
  }

  update(time: number, delta: number): void {
    this.player.update();
    this.physics.collide(this.player, this.wallsLayer);
    this.physics.collide(this.player, this.propsLayer);
  }
  private createTiles(): void {
    this.map = this.make.tilemap({
      key: GameManager.instance.currentLevelKey,
    });
    this.propsTileSet = this.map.addTilesetImage("props")!;
    this.wallTileset = this.map.addTilesetImage("ground")!;
  }

  private createLayers() {
    this.add.image(0, 0, "bg").setOrigin(0, 0);
    this.propsLayer = this.map.createLayer("props", this.propsTileSet, 0, 0)!;
    this.wallsLayer = this.map.createLayer("ground", this.wallTileset, 0, 0)!;

    this.propsLayer.setCollisionBetween(36, 40);
  }
  private createPlayer(): void {
    this.player = new Player({
      key: "player",
      scale: 1,
      scene: this,
      tag: "player",
      texture: "atlas",
      x: 50,
      y: 0,
      afterCreate: () => {
        console.log("Player is created");
      },
    });
  }
}
6

How are level-1.json and level-2.json getting downloaded?

7

export from Tiled : https://www.mapeditor.org/

When I don’t change the level, they both work on their own, now they only stay at level-1, my game does not switch to level-2, more precisely, it does not take the level-2 tilemap, it stays at level-1

this is level-1.json :

{ "compressionlevel":-1,
 "height":22,
 "infinite":false,
 "layers":[
        {
         "id":3,
         "image":"bg.png",
         "name":"bg",
         "offsetx":4,
         "offsety":-88,
         "opacity":1,
         "type":"imagelayer",
         "visible":true,
         "x":0,
         "y":0
        }, 
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            1025, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026,
            1041, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1043,
            1041, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1043,
            1041, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1043,
            1041, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1043,
            1057, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1059],
         "height":22,
         "id":1,
         "name":"ground",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":40,
         "x":0,
         "y":0
        }, 
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 475, 476, 477, 478, 479, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 507, 508, 509, 510, 511, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 162, 163, 164, 539, 540, 541, 542, 543, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 194, 195, 196, 0, 572, 573, 574, 0, 0, 37, 0, 0, 0, 0, 0, 0, 7, 239, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 226, 227, 228, 0, 0, 605, 0, 0, 0, 37, 37, 0, 0, 0, 0, 0, 39, 39, 0, 0, 0, 0, 0, 0, 588, 589, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         "height":22,
         "id":2,
         "name":"props",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":40,
         "x":0,
         "y":0
        }],
 "nextlayerid":4,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.10.2",
 "tileheight":32,
 "tilesets":[
        {
         "columns":32,
         "firstgid":1,
         "image":"props.png",
         "imageheight":1024,
         "imagewidth":1024,
         "margin":0,
         "name":"props",
         "spacing":0,
         "tilecount":1024,
         "tileheight":32,
         "tilewidth":32
        }, 
        {
         "columns":16,
         "firstgid":1025,
         "image":"ground.png",
         "imageheight":512,
         "imagewidth":512,
         "margin":0,
         "name":"ground",
         "spacing":0,
         "tilecount":256,
         "tileheight":32,
         "tilewidth":32
        }],
 "tilewidth":32,
 "type":"map",
 "version":"1.10",
 "width":40
}

this is level-2.json :

{ "compressionlevel":-1,
 "height":22,
 "infinite":false,
 "layers":[
        {
         "id":3,
         "image":"bg.png",
         "name":"bg",
         "offsetx":4,
         "offsety":-88,
         "opacity":1,
         "type":"imagelayer",
         "visible":true,
         "x":0,
         "y":0
        }, 
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            1025, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026, 1026,
            1041, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1043,
            1041, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1043,
            1041, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1043,
            1041, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1042, 1043,
            1057, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1058, 1059],
         "height":22,
         "id":1,
         "name":"ground",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":40,
         "x":0,
         "y":0
        }, 
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 475, 476, 477, 478, 479, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 507, 508, 509, 510, 511, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 539, 540, 541, 542, 543, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 572, 573, 574, 0, 0, 37, 0, 0, 0, 0, 0, 0, 7, 239, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 605, 0, 0, 0, 37, 37, 0, 0, 0, 0, 0, 39, 39, 0, 0, 0, 0, 0, 0, 588, 589, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         "height":22,
         "id":2,
         "name":"props",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":40,
         "x":0,
         "y":0
        }],
 "nextlayerid":4,
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.10.2",
 "tileheight":32,
 "tilesets":[
        {
         "columns":32,
         "firstgid":1,
         "image":"props.png",
         "imageheight":1024,
         "imagewidth":1024,
         "margin":0,
         "name":"props",
         "spacing":0,
         "tilecount":1024,
         "tileheight":32,
         "tilewidth":32
        }, 
        {
         "columns":16,
         "firstgid":1025,
         "image":"ground.png",
         "imageheight":512,
         "imagewidth":512,
         "margin":0,
         "name":"ground",
         "spacing":0,
         "tilecount":256,
         "tileheight":32,
         "tilewidth":32
        }],
 "tilewidth":32,
 "type":"map",
 "version":"1.10",
 "width":40
}

both have the same layer names, they use the same tilesets, if I open level-2 as a priority, it opens smoothly, there is a problem with the transition.

8

Where is load.tilemapTiledJSON(…)?

9

preload in asset.json

{
  "preload": {
    "files": [
      {
        "type": "tilemapTiledJSON",
        "key": "level-1",
        "url": "/assets/games/monkeygo/tiles/level-1.json"
      },
      {
        "type": "tilemapTiledJSON",
        "key": "level-2",
        "url": "/assets/games/monkeygo/tiles/level-2.json"
      },
      {
        "type": "image",
        "key": "grass",
        "url": "/assets/games/monkeygo/tiles/grass.png"
      },
      {
        "type": "image",
        "key": "32tile",
        "url": "/assets/games/monkeygo/tiles/32tile.png"
      },
      {
        "type": "image",
        "key": "wall",
        "url": "/assets/games/monkeygo/tiles/wall.png"
      },
      {
        "type": "image",
        "key": "fullScreen",
        "url": "/assets/games/monkeygo/sprites/expand.png"
      },
      {
        "type": "image",
        "key": "bg",
        "url": "/assets/games/monkeygo/tiles/bg.png"
      },
      {
        "type": "image",
        "key": "banana",
        "url": "/assets/games/monkeygo/tiles/banana.png"
      },
      {
        "type": "image",
        "key": "ground",
        "url": "/assets/games/monkeygo/tiles/ground.png"
      },
      {
        "type": "image",
        "key": "props",
        "url": "/assets/games/monkeygo/tiles/props.png"
      },
      {
        "type": "spritesheet",
        "key": "spritesheet",
        "url": "/assets/games/monkeygo/sprites/ddd.png",
        "frameConfig": {
          "frameWidth": 64,
          "frameHeight": 64
        }
      },
      {
        "type": "atlas",
        "key": "atlas",
        "textureURL": "/assets/games/monkeygo/sprites/ddd.png",
        "atlasURL": "/assets/games/monkeygo/sprites/ddd.json"
      }
    ]
  }
}