Displaying each tile data on tilemap efficiently

Phaser 3
1

Hi. I have a tilemap and I want to render on each tile the value of a particula property:

function renderData(scene) {
  let size = scene.map.width
  for (let j = 0; j < size; j++) {
    for (let i = 0; i < size; i++) {
      let t = scene.map.getTileAt(i, j).properties;
      scene.add.text(i * 4, j * 4, String(t.biome), {
        fontSize: '0.6rem',
        color: '#ffff00'
      });
    }
  }
}
  1. This is too slow.
  2. Creates thousandths of objects that impact heavily on performance.

How can I do this more efficiently?

Thanks!

**EDIT

Tried adding a single text object but is impossible to align each text to the cell:

export function renderData(scene,) {
  let size = scene.map.width;
  let someString = "";
  for (let j = 0; j < size; j++) {
    for (let i = 0; i < size; i++) {
      someString += scene.map.getTileAt(i, j).properties.biome + ' ';
    }
    someString += '\n';
  }
  scene.add.text(0, 0, someString, {
    fontSize: '0.5rem',
    color: '#ffff00'
  });
}
2

Have a look at

1 Like
3

Thanks a lot!