О чем этот пример
Тайловые карты — основа для уровней в 2D-играх, но их возможности не ограничиваются визуализацией. Tiled Editor позволяет присваивать каждому типу тайла произвольные пользовательские свойства, например, урон от шипов, стоимость прохода или тип поверхности. В этой статье мы разберем пример, который показывает, как загрузить карту, отобразить её в Phaser, а затем считывать и изменять свойства тайла, на который кликнул игрок. Этот подход открывает путь к созданию сложных игровых механик, основанных на данных, без жесткого прописывания логики в коде.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
propertiesText;
marker;
map;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
// this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tile_properties-v12.json');
this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tile_properties.json');
this.load.image('tiles', 'assets/tilemaps/tiles/gridtiles.png');
}
create ()
{
this.map = this.make.tilemap({ key: 'map' });
const tileset = this.map.addTilesetImage('tiles');
const layer = this.map.createLayer('Tile Layer 1', tileset, 0, 0);
this.marker = this.add.graphics();
this.marker.lineStyle(3, 0xffffff, 1);
this.marker.strokeRect(0, 0, this.map.tileWidth, this.map.tileHeight);
const help = this.add.text(16, 500, 'Click on a tile to view its properties.', {
font: '20px Arial',
fill: '#ffffff'
});
help.setScrollFactor(0);
this.propertiesText = this.add.text(16, 540, 'Properties: ', {
fontSize: '18px',
fill: '#ffffff'
});
}
update (time, delta)
{
const worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);
// Rounds down to nearest tile
const pointerTileX = this.map.worldToTileX(worldPoint.x);
const pointerTileY = this.map.worldToTileY(worldPoint.y);
// Snap to tile coordinates, but in world space
this.marker.x = this.map.tileToWorldX(pointerTileX);
this.marker.y = this.map.tileToWorldY(pointerTileY);
if (this.input.manager.activePointer.isDown)
{
const tile = this.map.getTileAt(pointerTileX, pointerTileY);
if (tile)
{
// Note: JSON.stringify will convert the object tile properties to a string
this.propertiesText.setText(`Properties: ${JSON.stringify(tile.properties)}`);
tile.properties.viewed = true;
}
}
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
pixelArt: true,
scene: Example
};
const game = new Phaser.Game(config);
Подготовка карты и загрузка ассетов
Всё начинается с создания тайловой карты в редакторе Tiled. В примере используется JSON-файл карты, который содержит не только информацию о слоях и наборе тайлов, но и пользовательские свойства, заданные для каждого типа тайла в редакторе.
В методе preload() мы загружаем два ключевых ресурса: файл карты и изображение с тайлами. Обрати внимание на использование setBaseURL() для указания базового пути — это удобно при работе с удаленными ресурсами, но в реальном проекте вы, скорее всего, будете использовать локальные пути.
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tile_properties.json');
this.load.image('tiles', 'assets/tilemaps/tiles/gridtiles.png');Создание карты и визуализация курсора
В методе create() мы создаем игровой мир на основе загруженной карты. Сначала создается объект Tilemap, затем добавляется набор тайлов и создается слой для отрисовки.
Отдельный интерес представляет создание графического объекта this.marker. Это белый прямоугольник, который будет следовать за курсором мыши и подсвечивать текущий тайл. Его размеры задаются равными размеру тайла на карте (this.map.tileWidth, this.map.tileHeight).
this.map = this.make.tilemap({ key: 'map' });
const tileset = this.map.addTilesetImage('tiles');
const layer = this.map.createLayer('Tile Layer 1', tileset, 0, 0);
this.marker = this.add.graphics();
this.marker.lineStyle(3, 0xffffff, 1);
this.marker.strokeRect(0, 0, this.map.tileWidth, this.map.tileHeight);Преобразование координат и отслеживание клика
Логика в методе update() отвечает за взаимодействие. Основная задача — перевести координаты курсора мыши из мировых координат в координаты тайла на карте и обратно.
1. positionToCamera() получает мировые координаты указателя мыши относительно текущей камеры.
2. worldToTileX() и worldToTileY() преобразуют мировые координаты в индексы тайла в сетке карты. Результат округляется в меньшую сторону, поэтому курсор всегда указывает на конкретный тайл.
3. tileToWorldX() и tileToWorldY() выполняют обратное преобразование, чтобы позиционировать графический маркер (this.marker) точно по границам тайла.
const worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);
const pointerTileX = this.map.worldToTileX(worldPoint.x);
const pointerTileY = this.map.worldToTileY(worldPoint.y);
this.marker.x = this.map.tileToWorldX(pointerTileX);
this.marker.y = this.map.tileToWorldY(pointerTileY);Чтение и модификация свойств тайла
Самая важная часть примера — работа с пользовательскими свойствами. При клике мыши мы получаем объект тайла по его координатам с помощью метода getTileAt().
Если тайл существует, мы можем обратиться к его свойству tile.properties. Это обычный JavaScript-объект, содержащий все пользовательские свойства, заданные в Tiled Editor. В примере свойства выводятся на экран в виде JSON-строки.
Ключевой момент: свойства тайла можно не только читать, но и изменять динамически прямо во время игры. В примере после отображения свойств мы устанавливаем новое свойство viewed: true. Это демонстрирует, как можно помечать тайлы (например, как посещенные или активированные).
if (this.input.manager.activePointer.isDown)
{
const tile = this.map.getTileAt(pointerTileX, pointerTileY);
if (tile)
{
this.propertiesText.setText(`Properties: ${JSON.stringify(tile.properties)}`);
tile.properties.viewed = true;
}
}Что попробовать дальше
Использование свойств тайлов отделяет данные от логики, делая ваш код гибче, а дизайн уровней — мощнее. Вы можете хранить в свойствах всё что угодно: от простых флагов (isSolid: true) до сложных структур данных.
**Идеи для экспериментов:**
1. Создайте карту с тайлами-ловушками, которые наносят урон при наступлении. Храните значение урона в свойстве тайла damage.
2. Реализуйте систему собираемых предметов. Свойство itemType тайла может определять, какой предмет появится при его разрушении.
3. Сделайте интерактивное окружение: тайлы со свойством interactable могут открывать диалоги или активировать механизмы при клике.