Incorrect world point in isometric map

[benjamin-wilson]

Version

3.55.2

Description

When trying to grab a tile under the mouse pointer, there is some offset grabbing the wrong tile.

Example Test Code

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    pixelArt: true,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var controls;

var game = new Phaser.Game(config);

var layer1;
var cursorTile;

function preload ()
{
    this.load.image('tiles', 'assets/tilemaps/iso/iso-64x64-outside.png');
    this.load.image('tiles2', 'assets/tilemaps/iso/iso-64x64-building.png');
    this.load.tilemapTiledJSON('map', 'assets/tilemaps/iso/isorpg.json');
}

function create ()
{
    var map = this.add.tilemap('map');

    console.log(map);

    var tileset1 = map.addTilesetImage('iso-64x64-outside', 'tiles');
    var tileset2 = map.addTilesetImage('iso-64x64-building', 'tiles2');

    this.layer1 = map.createLayer('Tile Layer 1', [ tileset1, tileset2 ]);
    var layer2 = map.createLayer('Tile Layer 2', [ tileset1, tileset2 ]);
    var layer3 = map.createLayer('Tile Layer 3', [ tileset1, tileset2 ]);
    var layer4 = map.createLayer('Tile Layer 4', [ tileset1, tileset2 ]);
    var layer5 = map.createLayer('Tile Layer 5', [ tileset1, tileset2 ]);

    var cursors = this.input.keyboard.createCursorKeys();

    this.cameras.main.setZoom(2);

    var controlConfig = {
        camera: this.cameras.main,
        left: cursors.left,
        right: cursors.right,
        up: cursors.up,
        down: cursors.down,
        acceleration: 0.04,
        drag: 0.0005,
        maxSpeed: 0.7
    };

    controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
}

function update (time, delta)
{
    controls.update(delta);
    if (this.cursorTile != null) {
        this.cursorTile.setVisible(true);
    }

    this.game.input.mousePointer.updateWorldPoint(this.cameras.main);
    const foundTile = this.layer1.getTileAtWorldXY(this.game.input.mousePointer.worldX, this.game.input.mousePointer.worldY, false, this.cameras.main);


    if (foundTile != null) {
        this.cursorTile = foundTile;
    }
    this.cursorTile.setVisible(false);
}

[samme]

https://codepen.io/samme/pen/YzrzWea?editors=0010

[douglasg14b]

Have any of you managed to solved for or work around this?

This kind of entirely breaks selecting things on an isometric map :/

[weswes]

Don't know exactly why but by removing 50 to pointer.worldX the result is correct...

var tile = map.getTileAtWorldXY(pointer.worldX-50, pointer.worldY);

(My tiles are 52px height and 100px width, maybe the value is related)

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/gettileatworldxy-selects-wrong-tile-on-hex-maps-from-tiled/11643/2

[JernejHabjan]

Maybe pointer can be offset like this:
https://codepen.io/jernejhabjan/pen/poVdRaE

this.input.on(
  Phaser.Input.Events.POINTER_UP,
  (pointer: Phaser.Input.Pointer) => {
    const { worldX, worldY } = pointer;

    const searchedWorldX = worldX- map.tileWidth / 2;
    const searchedWorldY = worldY- map.tileWidth / 2; // note tileWidth and not height

    const foundTile = this.tilemapLayer.getTileAtWorldXY(
      searchedWorldX,
      searchedWorldY
    ) as Phaser.Tilemaps.Tile;
    // ...

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[douglasg14b]

@photonstorm When will this be released? Isometric grids are all but broken for interactivity with this bug, and I see the last stable release was ~2 years ago.

[photonstorm]

@photonstorm When will this be released? Isometric grids are all but broken for interactivity with this bug, and I see the last stable release was ~2 years ago.

It was fixed 4 months ago. Whatever Beta release of 3.60 was published back then (plus all since)

[douglasg14b]

ohh, gotcha, the beta releases. My bad, thanks.

[DitaXoXo]

Is this bug still active ? I've set a codepen here, open the console and click on the tile up - it will say undefined. The tile under (which should be 1, 1), returns that it is located at 0, 0.... It feels like the tilemap is offset by tile still ?

https://codepen.io/raviolifetus/pen/abrxQMM

[samme]

@DitaXoXo https://codepen.io/samme/pen/VwONVoL?editors=0010 looks correct in v3.80.1.

[beeCwright]

I'm using almost the exact same code. It took me days to figure this out.

1. You need to use getIsoTileAtWorldXY
2. The map in @DitaXoXo example is 64x32, but the tiles are 64x64. A hack I did to make it work was to set the layers LayerData.baseTileHeight to 32.

I can't recommend doing this as it'll probably have consequences for anything else that references baseTileHeight.