Тайлсеты: добавление и настройка

В Phaser 3 тайлсеты используются для построения сложных игровых миров с помощью плиток, объединённых в карты. Основная структура работы с тайлсетами строится вокруг Tilemap и Tileset.

Создание тайлсета начинается с загрузки изображений плиток через preload:

preload() {
    this.load.image('tiles', 'assets/tilesets/tiles.png');
    this.load.tilemapTiledJSON('map', 'assets/maps/level1.json');
}
  • 'tiles' — ключ для изображения тайлсета.
  • 'map' — ключ для JSON-карты, экспортированной из редактора вроде Tiled.

Далее в методе create происходит привязка тайлсета к карте:

create() {
    const map = this.make.tilemap({ key: 'map' });
    const tileset = map.addTilesetImage('TilesetNameInTiled', 'tiles');
    const layer = map.createLayer('Tile Layer 1', tileset, 0, 0);
}
  • 'TilesetNameInTiled' — точное имя тайлсета в редакторе Tiled.
  • createLayer создаёт слой, на котором плитки будут отображаться.

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

Слои тайлсета можно конфигурировать для взаимодействия с физикой. Для этого используется метод setCollisionByProperty или setCollisionByExclusion:

layer.setCollisionByProperty({ collides: true });
this.physics.add.collider(player, layer);
  • collides: true — свойство, заданное для плиток в Tiled, определяющее, что по ним нельзя проходить.
  • this.physics.add.collider связывает слой с объектом игрока, обеспечивая физическое столкновение.

Если необходимо исключить плитки, которые не участвуют в коллизиях:

layer.setCollisionByExclusion([-1]);
  • -1 обозначает пустую плитку.
  • Этот метод автоматически включает коллизию для всех плиток, кроме указанных.

Работа с анимациями тайлсетов

Phaser позволяет анимировать плитки с помощью tile animations, где одна плитка может циклично менять своё изображение. Настройка выполняется в JSON-карте, а в коде достаточно включить слой:

map.createLayer('Animated Layer', tileset, 0, 0);

Phaser автоматически воспроизводит анимации, заданные в Tiled, если карта загружена через tilemapTiledJSON.

Оптимизация производительности

Большие тайлсеты могут замедлять рендеринг. Для оптимизации используются следующие техники:

  1. Использование спрайтлиста вместо множества изображений.

  2. Кэширование слоёв — создание слоя один раз и повторное использование через renderTexture.

  3. Разделение карты на несколько слоёв с отключением неиспользуемых слоёв в данный момент игры:

    layer.setVisible(false);
layer.setVisible(true);

Динамическое изменение тайлсета

Phaser поддерживает модификацию карт в реальном времени. Для этого применяются методы putTileAt, replaceByIndex, swapByIndex:

layer.putTileAt(5, 10, 15); // вставка плитки с индексом 5 на координаты (10, 15)
layer.replaceByIndex(3, 7); // заменяет все плитки с индексом 3 на 7
  • Позволяет создавать интерактивные уровни, разрушаемые объекты или изменяемые ландшафты.

Ключевые моменты при работе с тайлсетами

  • Точное соответствие имён в JSON-карте и коде необходимо для правильного подключения.
  • Коллизии задаются через свойства плиток, а не только через индекс.
  • Слои могут быть как видимыми, так и скрытыми, что помогает оптимизировать производительность.
  • Анимации плиток полностью зависят от конфигурации в редакторе Tiled и автоматически проигрываются в Phaser.
  • Динамическая модификация карты позволяет создавать более интерактивный игровой процесс без полной перезагрузки уровня.

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

Оглавление