Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect world point in isometric map #5781

Closed
benjamin-wilson opened this issue Jul 18, 2021 · 9 comments
Closed

Incorrect world point in isometric map #5781

benjamin-wilson opened this issue Jul 18, 2021 · 9 comments

Comments

@benjamin-wilson
Copy link

benjamin-wilson commented Jul 18, 2021

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
Copy link
Contributor

samme commented Nov 29, 2021

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

@douglasg14b
Copy link

douglasg14b commented Apr 7, 2022

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

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

@weswes
Copy link

weswes commented Apr 20, 2022

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
Copy link
Collaborator

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
Copy link

JernejHabjan commented Sep 25, 2022

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
Copy link
Collaborator

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
Copy link

douglasg14b commented Apr 2, 2023

@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
Copy link
Collaborator

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants