Having issues with Tiled infinite maps

Phaser 3
1

I am making a roguelike game and having issues with a map that is infinite size. For example, I have a portal object that’s location is (9,-6) on Tiled map editor, but that tile’s location in Phaser is actually (1050,2050).

I am loading the map like so:

  this.load.tilemapTiledJSON("game-map", "assets/maps/devground.json");

  this.map = this.make.tilemap({ key: "game-map" });

  // Get all tilesets from the map data
  const tilesetImages: Phaser.Tilemaps.Tileset[] = [];

  // Add all the tilesets
  this.map.tilesets.forEach((tileset) => {
    const tilesetName = tileset.name;
    const tilesetImage = this.map?.addTilesetImage(tilesetName, tilesetName);

    if (tilesetImage) {
      tilesetImages.push(tilesetImage);
    } else {
      console.warn(`Failed to add tileset: ${tilesetName}`);
    }
  });

  // Check if we have any valid tilesets
  if (tilesetImages.length === 0) {
    console.error("No valid tilesets found for the map");
    return false;
  }

  // Create all layers using all tilesets
  this.map.layers.forEach((layerData) => {
    const layer = this.map?.createLayer(layerData.name, tilesetImages);

    if (!layer) return;

    // Store references to important layers
    if (layerData.name === "ground-layer") {
      this.groundLayer = layer;
    } else if (layerData.name === "wall-layer") {
      this.collisionLayer = layer;
    } else if (layerData.name === "collision-layer") {
      // This is our dedicated collision layer
      this.collisionLayer = layer;

      // Set collision for ALL non-empty tiles in this layer
      layer.setCollisionByExclusion([-1]);

      // Make collision layer invisible in game
      layer.setVisible(false);
    }

    layer.setPosition(0, 0);
  });

  // Set physics bounds to match the visible area
  if (this.groundLayer) {
    this.physics.world.setBounds(
      0,
      0,
      this.groundLayer.displayWidth,
      this.groundLayer.displayHeight
    );
  }

  return true;

Is there a way I can have the Tiled and Phaser coordinates the same? There is one more issue too I am finding. Since the map is infinite and if I add tiles in to additional grids; the map grows and that previous (1050,2050) location I mentioned now becomes (1550,2550) for example.

I can’t find a solution to this problem, any ideas?

2

:waving_hand:

I think you’ll have to process the map data in Phaser, after loading and before make.tilemap(), to set absolute tile coordinates. Possibly @Antriel has done this.