Phaser предоставляет мощный и гибкий механизм для работы с тайловыми картами через систему Tilemap и TilemapLayer, позволяя создавать сложные уровни и реализовывать взаимодействие объектов с игровым миром. Тайловая карта обычно загружается в формате JSON (Tiled JSON, CSV или других поддерживаемых форматов) и представляет собой сетку тайлов, каждый из которых может содержать свойства, коллизии и визуальные данные.
Для начала работы с тайловой картой используется класс
Phaser.Tilemaps.Tilemap. Карта создается из загруженных
ресурсов:
const map = this.make.tilemap({ key: 'level1' });
const tileset = map.addTilesetImage('tileset', 'tiles');
const layer = map.createLayer('Tile Layer 1', tileset, 0, 0);
Ключевые моменты:
make.tilemap создаёт объект карты по ключу
ресурса.addTilesetImage связывает набор тайлов с картой.createLayer создает визуальный слой и возвращает объект
TilemapLayer.Коллизии в Phaser с тайловыми картами настраиваются через свойства
тайлов или через индекс тайлов. Для задания коллизий используется метод
setCollision:
layer.setCollision([1, 2, 3]); // тайлы с индексами 1,2,3 будут коллизионными
Можно также включить коллизии по свойствам, определённым в редакторе карт (например, в Tiled):
layer.setCollisionByProperty({ collides: true });
Особенности работы с коллизиями:
collides.Для того чтобы объект (например, игрок) сталкивался с тайлами,
необходимо подключить его к физической системе Phaser
(Arcade Physics или Matter.js) и добавить
обработку коллизий:
this.physics.add.collider(player, layer);
Важные детали:
Arcade Physics объект должен иметь тело
(body) с включенной коллизией.TilemapLayer автоматически преобразуется в набор
коллизионных прямоугольников на основе настроек
setCollision.Matter.js создаются статические тела
для каждого коллизионного тайла.Phaser умеет оптимизировать обработку коллизий с тайлами. Основные техники:
tilemapLayer.setCollisionBetween(start, end) вместо
перечисления всех индексов.Тайловая карта может содержать несколько слоёв (Layer).
Для коллизий часто выделяют отдельный слой только для препятствий:
const collisionLayer = map.createLayer('Collision Layer', tileset, 0, 0);
collisionLayer.setCollisionByProperty({ collides: true });
this.physics.add.collider(player, collisionLayer);
Такой подход позволяет отдельно управлять визуальными слоями и слоями коллизий, не смешивая их.
Phaser позволяет создавать коллизии не только для прямоугольных тайлов, но и для сложных форм:
map.getObjectLayer.Пример добавления коллизий по объектам:
const objectsLayer = map.getObjectLayer('Colliders');
objectsLayer.objects.forEach(obj => {
const collider = this.matter.add.rectangle(obj.x, obj.y, obj.width, obj.height, { isStatic: true });
});
Phaser предоставляет события и методы для работы со столкновениями:
player.body.touching — показывает, с какой стороны
произошло касание.this.physics.add.overlap(player, layer, callback) —
позволяет реагировать на пересечение без физической реакции.collider и overlap для
реализации триггеров и логики уровня.layer.cull и минимизировать
количество проверок коллизий за кадр.Эта структура позволяет эффективно управлять тайловыми картами в Phaser, обеспечивая точные коллизии и гибкую интеграцию с физикой, а также упрощает масштабирование и оптимизацию больших игровых уровней.