phaser icon indicating copy to clipboard operation
phaser copied to clipboard

Incorrect world point in isometric map

Open benjamin-wilson opened this issue 4 years ago • 4 comments

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);
}

benjamin-wilson avatar Jul 18 '21 14:07 benjamin-wilson

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

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

douglasg14b avatar Apr 07 '22 03:04 douglasg14b

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)

weswes avatar Apr 20 '22 17:04 weswes

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

photonstorm avatar May 06 '22 16:05 photonstorm

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;
    // ...

JernejHabjan avatar Sep 25 '22 10:09 JernejHabjan

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.

photonstorm avatar Nov 24 '22 00:11 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.

douglasg14b avatar Apr 02 '23 22:04 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.

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

photonstorm avatar Apr 03 '23 07:04 photonstorm

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

douglasg14b avatar Apr 04 '23 05:04 douglasg14b