Мультислойные карты

Мультислойные карты в Phaser позволяют создавать сложные игровые уровни с несколькими слоями, где каждый слой может содержать уникальные объекты, тайлы или эффекты. Работа с такими картами чаще всего ведется через формат Tiled Map Editor (.json), что обеспечивает гибкость и удобство интеграции.

Загрузка и создание карты

Для начала необходимо загрузить тайловую карту и соответствующие тайлсеты:

preload() {
    this.load.tilemapTiledJSON('level1', 'assets/maps/level1.json');
    this.load.image('tiles', 'assets/tilesets/tiles.png');
}

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

create() {
    const map = this.make.tilemap({ key: 'level1' });
    const tileset = map.addTilesetImage('tileset_name_in_tiled', 'tiles');

    const backgroundLayer = map.createLayer('Background', tileset, 0, 0);
    const groundLayer = map.createLayer('Ground', tileset, 0, 0);
    const objectsLayer = map.createLayer('Objects', tileset, 0, 0);

    groundLayer.setCollisionByProperty({ collides: true });
}

Ключевое здесь — setCollisionByProperty, который позволяет использовать свойства тайлов, заданные в Tiled, для определения коллизий.

Порядок отображения слоев

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

  • Background — фоновые элементы без коллизий.
  • Ground — слой с коллизиями для игрока и объектов.
  • Foreground/Objects — декоративные или интерактивные объекты, которые должны находиться над игроком.
groundLayer.setDepth(1);
player.setDepth(2);
objectsLayer.setDepth(3);

Использование setDepth позволяет управлять визуальным наложением независимо от порядка создания слоев.

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

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

const objectsLayer = map.getObjectLayer('Enemies');

objectsLayer.objects.forEach(obj => {
    const enemy = this.physics.add.sprite(obj.x, obj.y, 'enemy');
    enemy.setOrigin(0, 1); // Совмещение с Tiled
});

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

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

Для больших карт критически важно правильно использовать рендеринг:

  • setCullCallback и culling — отрисовывать только видимые на экране тайлы.
  • Разделение карты на слои позволяет отключать невидимые слои, снижая нагрузку GPU.
  • Использование camera.bounds и camera.scrollX/scrollY для динамической подгрузки или отсечения тайлов.
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

Анимация и динамические тайлы

Phaser поддерживает анимированные тайлы через тайлсеты, содержащие несколько фреймов. Для этого используется tileset.setTileAnimation или автоматическое считывание из Tiled:

map.tilesets[0].tileData[1].animation = [
    { tileid: 1, duration: 100 },
    { tileid: 2, duration: 100 },
    { tileid: 3, duration: 100 }
];

Динамические тайлы также могут изменяться во время игры с помощью putTileAt:

groundLayer.putTileAt(5, 10, 15); // Заменить тайл в координатах x=10, y=15 на ID=5

Коллизии и взаимодействие

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

  • Свойства тайлов (collides: true)
  • Группы Phaser Physics для слоев
  • События пересечения и нахождения объектов на тайле
this.physics.add.collider(player, groundLayer);

Для сложной логики можно использовать кастомные коллизии:

groundLayer.setCollisionByExclusion([-1]); // Все тайлы, кроме пустых

Практические рекомендации

  • Разделять слои по функционалу: фон, интерактивные элементы, объекты перед игроком.
  • Настраивать свойства тайлов в Tiled для коллизий и взаимодействий.
  • Использовать setDepth для управления визуальным наложением.
  • Оптимизировать рендеринг, отключая невидимые слои и используя камеры.
  • Объектные слои Tiled — лучший способ создавать динамические элементы без жесткой привязки к коду.

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

Оглавление