Свойства тайлов и слоёв

В библиотеке Phaser для работы с тайловыми картами используется система Tilemap. Тайловая карта состоит из слоёв (Layers) и тайлов (Tiles). Каждый слой представляет собой сетку ячеек одинакового размера, где каждая ячейка содержит конкретный тайл из тайлового набора (Tileset). Тайлы используются для визуального оформления мира игры, а слои — для организации логики отображения и взаимодействия объектов.

Тайл хранит несколько ключевых свойств:

  • index — идентификатор тайла в наборе;
  • x, y — координаты в сетке слоя (не в пикселях);
  • width, height — размеры тайла (обычно соответствуют размеру тайла в наборе);
  • properties — объект с пользовательскими свойствами, заданными в редакторе карт (например, collide: true);
  • collision — информация о столкновениях для данного тайла;
  • visible — флаг видимости тайла;
  • alpha — прозрачность тайла.

Слой представляет собой более высокий уровень абстракции. Он содержит сетку тайлов, управляет рендерингом и взаимодействием с физикой. С помощью слоя можно:

  • управлять видимостью части карты;
  • изменять тайлы динамически через методы putTileAt и removeTileAt;
  • проверять столкновения по тайлам;
  • анимировать отдельные тайлы с помощью тайловых анимаций.

Работа с тайлами

Каждый тайл можно получить через методы слоя:

let tile = layer.getTileAt(x, y); // возвращает тайл в координатах сетки
tile.index = 5; // изменение тайла на другой по индексу
tile.properties.solid = true; // установка пользовательского свойства
tile.visible = false; // скрытие тайла

Динамическое изменение тайлов позволяет создавать интерактивные уровни. Например, разрушимые стены или меняющиеся платформы реализуются через изменение индекса тайла или его свойств.

Для массового изменения тайлов используется метод forEachTile:

layer.forEachTile(tile => {
    if (tile.properties.solid) {
        tile.setCollision(true);
    }
});

Это особенно удобно для настройки столкновений после загрузки карты из редактора, такого как Tiled.

Свойства слоёв

Слой содержит не только сетку тайлов, но и свои свойства, влияющие на отображение и физику:

  • depth (z-index) — порядок отрисовки относительно других слоёв;
  • alpha — прозрачность слоя;
  • visible — видимость слоя;
  • tileWidth, tileHeight — размеры тайлов на слое;
  • width, height — размеры слоя в тайлах;
  • scrollFactorX / scrollFactorY — коэффициенты параллакса при прокрутке камеры;
  • setCollisionByProperty — установка столкновений для тайлов с определёнными свойствами;
  • setTileIndexCallback — установка колбэка для столкновений с тайлами конкретного индекса.

Пример установки столкновений по свойству:

layer.setCollisionByProperty({ collide: true });

Это автоматически помечает все тайлы с свойством collide как физически непроходимые.

Анимация тайлов

Тайлы могут быть анимированы с помощью Tileset animations. Для этого задаются последовательности индексов и скорость смены кадров. Анимация работает через слой:

this.anims.create({
    key: 'water',
    frames: this.anims.generateFrameNumbers('tileset', { start: 0, end: 3 }),
    frameRate: 6,
    repeat: -1
});

layer.forEachTile(tile => {
    if (tile.index === waterTileIndex) {
        tile.setAnimated(true);
    }
});

Такой подход позволяет создавать движущиеся элементы, такие как вода, лаву или светящиеся объекты, без добавления отдельного спрайта на карту.

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

Phaser оптимизирован для работы с большими тайловыми картами, но есть несколько рекомендаций:

  • использовать StaticTilemapLayer, если тайлы не меняются во время игры;
  • применять culling (обрезку) для слоёв, чтобы рендерить только видимую часть карты;
  • избегать частого динамического изменения большого числа тайлов;
  • использовать свойства тайлов для логики столкновений вместо создания физических спрайтов для каждого тайла.

Эти практики повышают производительность и позволяют создавать масштабные уровни с минимальной нагрузкой на движок.

Взаимодействие слоёв и камеры

Слоёвая структура тесно связана с камерой Phaser. Свойства scrollFactorX и scrollFactorY позволяют реализовать параллакс-эффект. Слои с меньшими коэффициентами движутся медленнее, создавая иллюзию глубины.

backgroundLayer.setScrollFactor(0.5, 0.5); // фон движется медленнее игрока
foregroundLayer.setScrollFactor(1, 1); // основной слой синхронизирован с камерой

Такой подход обеспечивает визуальную сложность сцены без увеличения числа объектов и спрайтов.

Пользовательские свойства тайлов и слоёв

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

  • прочность стены;
  • бонусы или ловушки;
  • логика взаимодействия с игроком;
  • триггеры для событий.

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

Оглавление