Интеграция с тайловыми картами

Phaser предоставляет мощные инструменты для работы с тайловыми картами, позволяя создавать сложные уровни для 2D-игр с минимальными усилиями. Основным объектом для работы является Tilemap, который представляет собой карту, составленную из тайлов определённого размера, расположенных по сетке. Карта может быть создана вручную в редакторе типа Tiled или загружена из JSON-файла.

Создание Tilemap

Tilemap создаётся с использованием метода this.make.tilemap в сцене:

const map = this.make.tilemap({ key: 'level1' });

Здесь key — это идентификатор карты, загруженной через this.load.tilemapTiledJSON. После создания карты необходимо подключить tileset — набор изображений, используемых для тайлов:

const tileset = map.addTilesetImage('tilesetName', 'tilesetImage');

Параметр tilesetName должен совпадать с названием тайлсета в редакторе Tiled, а tilesetImage — ключ загруженного изображения тайлов.

Слои карты

Tilemap может содержать несколько слоёв (layers). Для их отображения используется метод createLayer:

const groundLayer = map.createLayer('Ground', tileset, 0, 0);
const wallsLayer = map.createLayer('Walls', tileset, 0, 0);

Параметры 0, 0 задают смещение слоя по оси X и Y. Слои могут быть пассивными или коллизийными. Для включения коллизий у тайлов, определённых как препятствия, применяется метод setCollisionByProperty:

wallsLayer.setCollisionByProperty({ collides: true });

Коллизии с объектами

Phaser позволяет интегрировать Tilemap с физическим движком (Arcade Physics) для работы с коллизиями:

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

В данном примере player — это спрайт игрока, а wallsLayer — слой с тайлами, которые имеют свойство collides: true. Коллизии автоматически учитывают форму тайлов и предотвращают прохождение сквозь препятствия.

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

Тайловая карта может содержать объектные слои (object layers), где размещаются позиции врагов, предметов или триггеров. Для доступа к объектам используется метод map.getObjectLayer:

const objectsLayer = map.getObjectLayer('Objects');
objectsLayer.objects.forEach(obj => {
    if (obj.type === 'enemy') {
        this.add.sprite(obj.x, obj.y, 'enemy');
    }
});

Каждый объект хранит координаты, размеры, тип и дополнительные свойства, заданные в редакторе Tiled.

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

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

groundLayer.putTileAt(42, 10, 15); // Устанавливает тайл с индексом 42 на координаты 10,15

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

const tile = groundLayer.getTileAt(10, 15);
tile.alpha = 0.5;

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

Phaser оптимизирует рендеринг тайлов через culling, отрисовывая только видимую часть карты. Для больших карт рекомендуется использовать camera.setBounds и layer.setScrollFactor(1) для синхронизации слоя с камерой:

this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
groundLayer.setScrollFactor(1);

Динамическое изменение карты

Tilemap поддерживает динамическое добавление и удаление тайлов во время игры, что позволяет создавать разрушаемое окружение, эффекты лавы или воду, которые распространяются по карте:

groundLayer.removeTileAt(5, 5); // Удаляет тайл
groundLayer.fill(10, 0, 0, 5, 5); // Заполняет прямоугольник тайлами с индексом 10

Применение слоёв для визуальных эффектов

Разделение карты на слои позволяет управлять визуальными эффектами, такими как туман, световые эффекты или передвижение объектов. Например, слой облаков можно сделать полупрозрачным:

cloudsLayer.setAlpha(0.6);

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

backgroundLayer.setScrollFactor(0.5);

Интеграция с камерой

Камера Phaser может следовать за игроком и учитывать размеры карты:

this.cameras.main.startFollow(player);
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

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

Поддержка пользовательских свойств

Tiled позволяет задавать свойства для тайлов, слоёв и объектов. Phaser поддерживает их чтение через tile.properties, layer.properties или object.properties. Это удобно для задания параметров, таких как скорость врагов, здоровье объектов или уникальные события.

Работа с тайловыми картами в Phaser обеспечивает гибкость в создании уровней, коллизий и анимаций, позволяя строить как простые платформеры, так и сложные RPG или стратегии. Использование слоёв, объектных слоёв и динамических изменений тайлов открывает широкие возможности для управления игровой логикой и визуальными эффектами.

Оглавление