putTileAt into createBlankLayer on hex map from Tiled renders wrong

[wwoods]

Version

• Phaser Version: 3.60.0-beta.4
• Operating system: Pop! OS
• Browser: Chrome

Description

See below image; base map is colored hex squares. If I dynamically add a layer via createBlankLayer, and then use putTileAt to populate this layer, the result is off-centered rendering of the tiles in the blank layer:

Example Test Code

// Preload
this.load.image('tiles', assetHexMini);
this.load.tilemapTiledJSON('map', assetHexMap);

// Create
const map = this.make.tilemap({key: 'map'});
const tileset = map.addTilesetImage('hexmini-6x', 'tiles');
const platforms = map.createLayer('Ground', tileset);

// Now, as a UI layer, circle two tiles using tile ID 2
const uiLayer = map.createBlankLayer('beep', tileset);
uiLayer.putTileAt(2, 2, 2);
uiLayer.putTileAt(2, 3, 2);

The map:
hexagonal-mini-6x.json.tar.gz

The tileset image:

Additional Information

This issue was worse with 3.55; I found some bugs which were fixed regarding putTileAt, hence tried the 3.60 beta.

[wwoods]

Workaround: (see bottom for real workaround)

const uiLayer = map.createBlankLayer('beep', tileset,
    // Until https://github.com/photonstorm/phaser/issues/6074 is fixed
    0, platforms.layer.tileHeight * 0.5);

Nevermind, if I try to highlight every tile, it's clear that the vertical distances are half what they should be:

for (const t of platforms.getTilesWithin()) {
  if (t.index < 0) continue;
  uiLayer.putTileAt(2, t.x, t.y);
}

Possible cause?

It looks like uiLayer.layer.hexSideLength is not being set correctly. It starts at zero. If I run the following code immediately after allocating uiLayer, the printed positions match, but this does not appear to affect the subsequently placed tiles:

uiLayer.layer.hexSideLength = platforms.layer.hexSideLength; // commenting this prints 2 different numbers.
console.log(platforms.tileToWorldXY(2, 2));
console.log(uiLayer.tileToWorldXY(2, 2));

Actual workaround

Ok, it is the hexSideLength issue. Can fix as follows:

const uiLayer = map.createBlankLayer('beep', tileset);
// Until https://github.com/photonstorm/phaser/issues/6074 is fixed
uiLayer.layer.hexSideLength = platforms.layer.hexSideLength;
for (const t of uiLayer.getTilesWithin()) {
  t.updatePixelXY();
}
// End fix

// All locations now render correctly
uiLayer.putTileAt(2, 2, 3);

[klm127]

In my case, with North/South hexes, I also had to set staggerAxis to "x" before updating pixelXY. Thanks for the workaround re: updatePixelXY.

[zekeatchan]

Hi @wwoods. Thanks for submitting this issue. We have fixed this and pushed it to the master branch. It will be part of the next release. Do test it out and let us know if you encounter any issues.