How to get X Y in isometric tilemap

Question

Im new to Phaser. I created a isometric map from Tile. here my code to create my Map:

preload() {
    console.log('pre load mainScene');
   
    Cay1x.preload(this);
    DatTrong.preload(this);
    MoRong.preload(this);
    Player.preload(this);

    // Map assets
    this.load.image('tiles', 'assets/images/map4.png');
    this.load.image('nen_co_2', 'assets/images/nen_co_2.png');

    this.load.tilemapTiledJSON('map', 'assets/images/map4.json');
    this.load.tilemapTiledJSON('mapIsometric', 'assets/images/mapIsometric.json');

    this.load.image('Chest1', 'assets/images/Chest1.png');
}

create() {
    console.log('create');
    
    this.map = this.make.tilemap({ key: 'map' });
    this.mapIsometric = this.make.tilemap({ key: 'mapIsometric' });

    
    console.log('Map:', this.map);
    console.log('MapIsometric:', this.mapIsometric);

    const tileset1 = this.map.addTilesetImage('map4', 'tiles');
    const tilesetIsometric = this.mapIsometric.addTilesetImage('nen_co_2', 'nen_co_2'); 

   
    console.log('Tileset1:', tileset1);
    console.log('TilesetIsometric:', tilesetIsometric);

    
    const layer1 = this.map.createLayer('Tile Layer 1', tileset1, 0, 0);
    const layer2 = this.map.createLayer('Tile Layer 2', tileset1, 0, 0);

   
    const isometricX = 2000; 
    const isometricY = 1000; 

    const layer1Isometric = this.mapIsometric.createLayer('Tile Layer 1', tilesetIsometric, isometricX, isometricY);

And when I try to get X, Y in another Object :

this.input.keyboard.on("keydown-P", (event) => {
            if (this.inventory.selected !== undefined && this.inventory.selected !== null) {
                let selectedItem = this.inventory.selectedItem;

                if (selectedItem && selectedItem.name === 'dat_trong' && this.draggedItem) {
                    let localPoint = new Phaser.Math.Vector2();
                    this.mainScene.cameras.main.getWorldPoint(this.draggedItem.x, this.draggedItem.y, localPoint);

                    // Kiểm tra localPoint
                    console.log(`LocalPoint: x=${localPoint.x}, y=${localPoint.y}`);

                    // Chuyển đổi localPoint sang tọa độ trong mapIsometric
                    let mapIsoX = localPoint.x;
                    let mapIsoY = localPoint.y;

                    // Chuyển đổi mapIsoX và mapIsoY sang tọa độ tile
                    let tileX = this.mainScene.mapIsometric.worldToTileX(mapIsoX);
                    let tileY = this.mainScene.mapIsometric.worldToTileY(mapIsoY);

                    // Kiểm tra tileX và tileY
                    console.log(`TileX: ${tileX}, TileY: ${tileY}`);

                    // Lấy vị trí của tile đó trong thế giới
                    let worldX = this.mainScene.mapIsometric.tileToWorldX(tileX) + 2000;
                    let worldY = this.mainScene.mapIsometric.tileToWorldY(tileY) + 1000;

                    // Kiểm tra worldX và worldY
                    console.log(`worldX: ${worldX}, worldY: ${worldY}`);

                    if (tileX !== null && tileY !== null && worldX !== null && worldY !== null) {
                        new DatTrong({ scene: this.mainScene, x: worldX + this.mainScene.mapIsometric.tileWidth / 2, y: worldY + this.mainScene.mapIsometric.tileHeight / 2, texture: 'atlas_dat_trong' });
                        this.inventory.removeItem(this.inventory.selected);
                        this.refresh();
                        this.draggedItem.destroy();
                        this.draggedItem = null;
                    } else {
                        console.error('Không thể đặt DatTrong, tọa độ tile hoặc tọa độ thế giới không hợp lệ');
                    }
                }
            } else {
                console.log('Selected item is not "dat_trong" or item is not being dragged.');
            }
        });

When I try to get X, Y from the tile map using tileToWorld X', it return null. I can only get Y using tileToWorld Y

Anyone know how to get both X Y from isometric map?

Answer 1

The issue could be, that for isometric maps you should use worldToTileXY.
(I'm not 100% sure, since I can't create a running demo for this problem)

Excerpt from the Documentation(link to documentation)

...worldToTileX/ worldToTileY... You cannot call this method for Isometric or Hexagonal tilemaps as they require both worldX and worldY values to determine the correct tile, instead you should use the worldToTileXY method...

Update:

So you could alter your code to this:

...
let vector = this.mainScene.mapIsometric.worldToTileXY(mapIsoX, mapIsoY, false);
let tileX = vector.x;
let tileY = vector.y;

let vector2 = this.mainScene.mapIsometric.tileToWorldXY(tileX);
let worldX = vector2.x + 2000;
let worldY = vector2.y +  1000;
...

Depending on you assets, the third parameter of worldToTileXY and tileToWorldXY might have to be set to true.