Load background image in Phaser3 from Tiled Editor

Phaser 3
1

I’m new to phaser and could not find it anywhere… how can I load tile into phaser3 game as a background image ?
here are my init preload and create functions, nothing I tried worked:

 init() {
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  preload() {
    this.load.atlas(
      "penguin-animation-frames",
      "assets/penguin-animation/penguin-animation.png",
      "assets/penguin-animation/penguin-animation.json"
    );
    this.load.image("ice-world-tiles", "assets/sheet.png");
    this.load.image("bg", "assets/bg-icebergs-1@2x.png");

    this.load.tilemapTiledJSON(
      "penguin-game-tilemap",
      "assets/penguin-game-tile.json"
    );
  }

  create() {
    const map = this.make.tilemap({ key: "penguin-game-tilemap" });
    const tileSet = map.addTilesetImage("iceworld", "ice-world-tiles");

    const tilesetHeight = map.heightInPixels;
    this.cameras.main.setBounds(0, 0, map.widthInPixels, tilesetHeight);
    this.cameras.main.scrollY = tilesetHeight;
    const ground = map.createLayer("ground", tileSet);

    ground.setCollisionByProperty({ collides: true });

    const objectsLayer = map.getObjectLayer("objects");
    const backgroundObjectLayer = map.getObjectLayer("background");
    backgroundObjectLayer.visible = true;
    objectsLayer.objects.forEach((objectData) => {
      const { x = 0, y = 0, name, width = 0 } = objectData;
      switch (name) {
        case "spawn-position": {
          this.penguin = this.matter.add
            .sprite(x + width / 2, y, "penguin-animation-frames")
            .setFixedRotation();
          this.playerController = new PlayerController(
            this.penguin,
            this.cursors
          );

          this.cameras.main.startFollow(this.playerController.getSprite);

          break;
        }
      }
    });

    this.matter.world.convertTilemapLayer(ground);
  }

image
image1343×834 66.8 KB

2

What happens?

3

In create(), use only

const map = this.make.tilemap({ key: 'penguin-game-tilemap' });
const tileSet = map.addTilesetImage('iceworld', 'ice-world-tiles');
const ground = map.createLayer('ground', tileSet);

stop and check the game and console. If there are no errors and you still see no tiles at all, add

this.cameras.main.setZoom(0.1);