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?
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 bothworldX
andworldY
values to determine the correct tile, instead you should use theworldToTileXY
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
andtileToWorldXY
might have to be set totrue
.