Tilemap Layer doesn't rerender when the camera position is changed

Phaser 3
1

Introduction
Hey there, im pretty new to game dev and maybe i just need a keyword to find the solution. But after many hours of google i didn’t find something. I followed a tutorial for creating a dynamic tilemap Phaser - Examples - Tilemaps - Create From Array
Problem
In this example there is a method called “layer.resizeWorld()”( in line 52 in this example). This method doesn’t exist anymore and i cant find the change notes that relates to this.
Code

export class MapScene extends Phaser.Scene {
  private cursors: Phaser.Types.Input.Keyboard.CursorKeys;
  // @ts-ignore
  private layer: Phaser.Tilemaps.TilemapLayer;

  private map: Phaser.Tilemaps.Tilemap;
  constructor() {
    super({key: SceneKey.MAP});
  }
  create() {
    /**this.add.image(
      this.cameras.main.centerX,
      this.cameras.main.centerY,
      'map_textures',
    );*/
    const data: {array: number[][]} = this.cache.json.get('map');
    this.map = this.make.tilemap({
      data: data['array'],
      tileWidth: 50,
      tileHeight: 50,
    });
    const tileset = this.map.addTilesetImage(
      'map_textures_json',
      'map_textures',
      50,
      50,
      0,
      0,
      0,
    );
    this.layer = this.map.createLayer(0, tileset);
    this.cursors = this.input.keyboard.createCursorKeys();
    // set the zoom doesnt change anything
    this.cameras.main.setZoom(0.1);
    this.input.keyboard.addCapture('W,S,A,D');
  }

  preload() {

    this.load.json('map_textures_json', 'assets/textos.json');
    // returns a huge 2d number array
    this.load.json('map', 'http://localhost:3000/map');
    this.load.image('map_textures', 'assets/textos.png');
  }

  update(time: number, delta: number): void {
    if (this.cursors.left.isDown) {
      this.cameras.main.setPosition(
        this.cameras.main.x - 1,
        this.cameras.main.y,
      );
    } else if (this.cursors.right.isDown) {
      this.cameras.main.setPosition(
        this.cameras.main.x + 1,
        this.cameras.main.y,
      );
    }
    if (this.cursors.up.isDown) {
      this.cameras.main.setPosition(
        this.cameras.main.x,
        this.cameras.main.y - 1,
      );
    } else if (this.cursors.down.isDown) {
      this.cameras.main.setPosition(
        this.cameras.main.x,
        this.cameras.main.y + 1,
      );
    }
  }
}

I wish i could explain more or better, so sorry if informations are missing. No erros or warning in the console and it renders a part of the map initialy

2

:wave:

Follow tilemap/create-from-array (v3) instead. Phaser 3 doesn’t really have a resizeWorld() equivalent but you can do something like

const { widthInPixels, heightInPixels } = this.map;

this.cameras.main.setBounds(0, 0, widthInPixels, heightInPixels);
this.physics.world.setBounds(0, 0, widthInPixels, heightInPixels);

The camera method setPosition() controls the viewport position. You want to use setScroll() or scrollX, scrollY instead.

1 Like
3

Thanks for the fast answer! The setBounds method disabled the movement from the camera, i guess the height and width is the rendered value. But i changed setPosition with setScroll and now it renders! Thanks!