Загрузка и создание тайловой карты в Phaser

Тайловые карты представляют собой сетку повторяющихся графических элементов (тайлов), которые образуют игровой мир. В Phaser работа с тайловыми картами реализуется через класс Tilemap и связанные объекты, такие как Tileset и TilemapLayer. Тайловая карта обычно создаётся на основе JSON-файла, экспортированного из редактора карт, например Tiled.

Формат JSON описывает расположение тайлов, их размеры, слои и свойства. В Phaser карта загружается и обрабатывается с помощью встроенного менеджера ресурсов this.load внутри сцены.

Загрузка ресурсов

Загрузка тайлового изображения

Тайловое изображение содержит все тайлы карты в одном спрайтшите. Размеры каждого тайла должны точно соответствовать настройкам карты.

this.load.image('tiles', 'assets/tiles.png');
  • 'tiles' — ключ ресурса, который используется при создании карты.
  • 'assets/tiles.png' — путь к изображению с тайлами.

Загрузка JSON-карты

this.load.tilemapTiledJSON('map', 'assets/map.json');
  • 'map' — ключ карты.
  • 'assets/map.json' — путь к JSON-файлу, экспортированному из Tiled.

Важно, чтобы карта и тайловое изображение совпадали по настройкам размеров тайлов.

Создание тайловой карты

После загрузки ресурсов создаётся объект Tilemap:

const map = this.make.tilemap({ key: 'map' });

Параметр key указывает на ранее загруженный JSON. Этот объект содержит информацию о слоях, тайлах и свойствах карты.

Добавление тайлового набора

Чтобы карта отображалась, нужно создать объект Tileset, который связывает тайлы в карте с конкретным изображением:

const tileset = map.addTilesetImage('tileset_name_in_tiled', 'tiles');
  • 'tileset_name_in_tiled' — название набора тайлов в редакторе Tiled.
  • 'tiles' — ключ загруженного изображения тайлов.

Это позволяет Phaser корректно сопоставлять индексы тайлов в JSON с графикой.

Создание слоев карты

Карты могут содержать несколько слоёв. Для отображения слоев используется createLayer:

const groundLayer = map.createLayer('Ground', tileset, 0, 0);
const objectLayer = map.createLayer('Objects', tileset, 0, 0);
  • 'Ground' и 'Objects' — имена слоёв, указанные в Tiled.
  • tileset — объект Tileset.
  • 0, 0 — координаты размещения слоя на сцене.

Слои можно настраивать отдельно: задавать коллизии, видимость, порядок отображения.

Настройка коллизий

Phaser позволяет использовать тайловые карты для коллизий объектов с миром. Для этого у слоя задаются коллизируемые тайлы по индексу:

groundLayer.setCollisionByProperty({ collides: true });
  • В Tiled можно задать свойство collides для тайлов, с которыми должна работать физика.
  • Phaser автоматически создаст массив тайлов для проверки столкновений.

Для интеграции с физикой Arcade:

this.physics.add.collider(player, groundLayer);
  • player — объект физического тела.
  • groundLayer — слой карты с коллизиями.

Работа с объектными слоями

Tiled позволяет добавлять объектные слои (Object Layer) для размещения врагов, предметов или триггеров. Объекты загружаются через:

const objects = map.getObjectLayer('Objects')['objects'];
objects.forEach(obj => {
    this.add.sprite(obj.x, obj.y, obj.name);
});
  • 'Objects' — имя объектного слоя в Tiled.
  • obj.x, obj.y — координаты объекта.
  • obj.name — ключ ресурса, соответствующего объекту.

Это удобно для создания динамических элементов на карте без ручного позиционирования.

Управление камерой и размером мира

Размер карты определяется количеством тайлов и их размером:

this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
  • map.widthInPixels и map.heightInPixels автоматически рассчитываются на основе слоёв и тайлов.
  • Камера может следовать за игроком:
this.cameras.main.startFollow(player);

Оптимизация работы с тайловыми картами

  • Использовать несколько тайловых слоёв, разделяя фоновую графику и интерактивные объекты.
  • Применять tile culling, чтобы Phaser рендерил только видимую область карты (встроено автоматически в TilemapLayer).
  • Минимизировать количество тайлов с коллизиями — только те, которые реально участвуют в физике.

Дополнительные возможности

  • Анимация тайлов: можно создавать анимированные тайлы в Tiled и Phaser автоматически их проигрывает.
  • Свойства тайлов и слоёв: Phaser позволяет читать пользовательские свойства JSON для изменения логики игры.
  • Фильтры и эффекты: слои поддерживают прозрачность, tint и другие визуальные эффекты через методы setAlpha и setTint.

Использование тайловых карт в Phaser обеспечивает структурированный и масштабируемый подход к созданию игровых миров, позволяет эффективно управлять визуальными элементами и взаимодействием объектов с окружением.

Оглавление