getTileAtWorldXY() selects wrong tile on hex maps from Tiled

druerridge · May 6, 2022, 12:19am

Hey folks,

Been looking at this for hours and can’t figure out if I’m doing something wrong. I made a minimal example to reproduce - it adds a tint to the hex currently under the mouse, and loads the hexagon tile map example that is packaged with the Tiled map editor.

As you can see in the image, the “selected” tile is offset considerably from the point of the mouse.

Here’s a repo for the minimal repro

All the code is basically in this file:

github.com

druerridge/hexfail/blob/main/game.js

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()

This file has been truncated. show original

samme · May 6, 2022, 4:24pm

github.com/photonstorm/phaser

Incorrect world point in isometric map

opened 02:36PM - 18 Jul 21 UTC

benjamin-wilson

🗺️ Tilemap

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

druerridge · May 13, 2022, 5:39pm

I believe the shape it’s responding to is a square as well, instead of a hexagon. This, in combination with a couple other things (below) make hexagon tilemaps prettymuch unusable

getTileAtWorldX() always returns 0
once scaled, getTileAtWorldXY() returns even crazier answers

Topic		Replies	Views
Isometric hexagonal tilemap Phaser 3	0	501	February 11, 2020
Tiled tilemap not displaying correctly Phaser 3	7	796	February 2, 2021
Negative Coordinates on Tile Map Phaser 3	15	1170	December 2, 2021
Tiled map and draw offset Phaser 3	1	1511	July 8, 2019
phaser 3 titled map seems not working well on hexagonal mode Phaser 3	1	268	December 21, 2022

getTileAtWorldXY() selects wrong tile on hex maps from Tiled

Related Topics