Incorrect world point in isometric map
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);
}
Have any of you managed to solved for or work around this?
This kind of entirely breaks selecting things on an isometric map :/
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)
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
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;
// ...
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 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 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)
ohh, gotcha, the beta releases. My bad, thanks.