Как получить X Y на изометрической тайловой карте

Я новичок в Phaser. Я создал изометрическую карту из Tile. вот мой код для создания моей карты:

preload() {
    console.info('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.info('create');
    
    this.map = this.make.tilemap({ key: 'map' });
    this.mapIsometric = this.make.tilemap({ key: 'mapIsometric' });

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

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

   
    console.info('Tileset1:', tileset1);
    console.info('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);

И когда я пытаюсь получить X, Y в другом объекте:

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.info(`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.info(`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.info(`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.info('Selected item is not "dat_trong" or item is not being dragged.');
            }
        });

Когда я пытаюсь получить X, Y из карты плиток с помощью tileToWorld X', он возвращает ноль. Я могу получить Y только с помощью tileToWorld Y

Кто-нибудь знает, как получить X Y из изометрической карты?

У меня есть вопрос относительно вашего вопроса. С помощью какого кода вы пытаетесь получить координаты X и Y? Можете ли вы обновить свой вопрос, указав соответствующие вызовы функций вашего кода, которые возвращают ноль? и каковы значения параметров, которые вы передаете функции?

winner_joiner 02.07.2024 05:41

я обновил свой код.

Nguyễn Hải Long 02.07.2024 06:12

Спасибо, что поделились частями своего кода, у меня просто короткие вопросы для дополнительного контекста. Какова ценность this.draggedItem это тайл/изображение поверх тайловой карты или где-то еще? Какие значения tileX / tileY / worldX / worldY / localPoint.x / localPoint.y в консоли?

winner_joiner 02.07.2024 07:37

Это значение в моей консоли: LocalPoint: x = 2088.0629211511628, y = 1448.0345522072394 TileX: null, TileY: null worldX: не определено, worldY: не определено Невозможно разместить DatTrong, неверные координаты плитки или мировые координаты

Nguyễn Hải Long 02.07.2024 08:44

Мой вопрос решил вашу проблему или все еще не работает должным образом?

winner_joiner 03.07.2024 10:25

Извините за мой поздний ответ. Он все еще не работает должным образом, потому что я не понимаю, как я могу использовать векторный возврат worldToTileXY.

Nguyễn Hải Long 05.07.2024 04:24

Я обновил свой ответ, чтобы показать, как я буду использовать вектор из функции worldToTileXY вместо функций worldToTileX/worldToTileY. Надеюсь, это сработает и прояснит ситуацию.

winner_joiner 05.07.2024 05:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
7
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема может заключаться в том, что для изометрических карт вам следует использовать worldToTileXY.
(Я не уверен на 100%, так как не могу создать работающую демоверсию для этой проблемы)

Выдержка из документации(ссылка на документацию)

...worldToTileX/ worldToTileY... Вы не можете вызвать этот метод для изометрических или шестиугольных тайловых карт, поскольку для определения правильного тайла им требуются значения как worldX, так и worldY, вместо этого вам следует использовать метод worldToTileXY...

Обновлять:

Итак, вы можете изменить свой код на это:

...
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;
...

В зависимости от ваших ресурсов, возможно, для третьего параметра worldToTileXY и tileToWorldXY потребуется установить значение true.

Другие вопросы по теме