Слои тайлов: TilemapLayer

Phaser предоставляет мощный инструмент для работы с тайловыми картами — Tilemap, а ключевым элементом визуализации карты является TilemapLayer. Этот объект отвечает за рендеринг тайлов и управление их поведением, позволяя эффективно создавать уровни для 2D-игр.

Создание Tilemap и TilemapLayer

Для начала работы необходимо создать карту с помощью this.make.tilemap или загрузить её из JSON-файла. Затем подключается набор тайлов (tileset), который содержит графические изображения для всех тайлов.

const map = this.make.tilemap({ key: 'level1' });
const tileset = map.addTilesetImage('tiles', 'tilesImage');
const layer = map.createLayer('Ground', tileset, 0, 0);
  • key — идентификатор карты, загруженной через preload.
  • addTilesetImage — связывает имя тайлового набора из карты с загруженным изображением.
  • createLayer — создаёт слой по имени из карты с указанным tileset. Позиция слоя задаётся координатами (x, y).

Важно: TilemapLayer создаёт отдельный объект Phaser, который можно перемещать, масштабировать, накладывать эффекты и использовать в коллизиях.

Основные свойства TilemapLayer

  • tilemap — ссылка на родительскую Tilemap.
  • tileset — набор тайлов, используемый слоем.
  • layer — внутренний объект, содержащий данные тайлов для рендеринга.
  • alpha — прозрачность слоя.
  • depth — уровень отрисовки относительно других объектов.
  • visible — видимость слоя.

Пример установки прозрачности и глубины:

layer.alpha = 0.8;
layer.setDepth(5);

Работа с отдельными тайлами

TilemapLayer позволяет получать и изменять отдельные тайлы:

  • getTileAt(x, y) — возвращает объект тайла на позиции (x, y) в координатах тайловой сетки.
  • putTileAt(tileIndex, x, y) — устанавливает тайл с индексом tileIndex на позицию (x, y).
  • removeTileAt(x, y) — удаляет тайл из слоя.
const tile = layer.getTileAt(3, 4);
layer.putTileAt(12, 3, 4);
layer.removeTileAt(5, 6);

Каждый тайл содержит свойства:

  • index — идентификатор тайла в tileset.
  • x, y — координаты в тайловой сетке.
  • properties — пользовательские свойства из редактора карт (например, коллизии).
  • collision — флаг коллизии для физических объектов.

Коллизии

Phaser позволяет назначать коллизию тайлам на уровне слоя:

layer.setCollisionByProperty({ collides: true });
layer.setCollision([1, 2, 3]); // тайлы с индексами 1, 2, 3

Для взаимодействия с физикой Matter или Arcade достаточно передать слой в функцию коллизии:

this.physics.add.collider(player, layer);

Оптимизация рендеринга

TilemapLayer поддерживает различные методы оптимизации:

  • Кэширование видимой области: только тайлы в видимой области камеры отрисовываются, что ускоряет производительность.
  • Свойство renderDebug — позволяет визуализировать границы тайлов для отладки коллизий.
layer.renderDebug(this.add.graphics(), {
    tileColor: null,
    collidingTileColor: new Phaser.Display.Color(255, 0, 0, 100),
});
  • Свойство cull автоматически скрывает тайлы, находящиеся вне видимой области камеры.

Масштабирование и смещение

TilemapLayer можно масштабировать или смещать, используя стандартные методы Phaser:

layer.setScale(2); // увеличивает слой в 2 раза
layer.setScrollFactor(1.5); // слой движется быстрее камеры
layer.setPosition(100, 50); // смещение слоя

Это позволяет создавать параллакс-эффекты и динамические уровни с разными скоростями движения слоев.

Применение фильтров и эффектов

Слой тайлов можно визуально модифицировать через шейдеры и эффекты Phaser:

layer.setTint(0xff0000); // красный оттенок
layer.setAlpha(0.5);     // полупрозрачность
layer.setPipeline('Light2D'); // активирует 2D освещение

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

Итог

TilemapLayer — это фундаментальный объект Phaser для работы с тайловыми картами. Он обеспечивает:

  • управление отдельными тайлами,
  • настройку коллизий,
  • оптимизированный рендеринг,
  • визуальные эффекты и слои глубины.

Его гибкость позволяет создавать как простые уровни, так и сложные многослойные сцены с динамическими эффектами и параллаксом.

Оглавление