О чем этот пример

Стандартная камера в Phaser охватывает весь игровой мир, но многие жанры требуют большего. Гонки с видом сзади, стратегии с картой и основным полем боя, кооперативные игры на одном экране — все это реализуется с помощью мультикамеры. В этой статье мы разберем, как использовать несколько камер одновременно для создания продвинутых визуальных эффектов и геймплейных возможностей, не прибегая к сложным математическим расчетам.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: [ DemoA, DemoB, DemoC, DemoD, Controller ]
};

const game = new Phaser.Game(config);

Конфигурация проекта и загрузка сцен

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

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: [ DemoA, DemoB, DemoC, DemoD, Controller ]
};

const game = new Phaser.Game(config);

Параметр type: Phaser.WEBGL обеспечивает максимальную производительность для отрисовки нескольких видов. Массив scene содержит классы пяти сцен, которые будут запущены параллельно. Сцена Controller, судя по названию, будет управлять остальными.

Создание и позиционирование камер

Каждая дополнительная камера создается внутри сцены с помощью метода this.cameras.add(). Этот метод возвращает объект камеры, который можно настраивать независимо от основной.

// Внутри метода create() одной из сцен (например, DemoA)
this.cam2 = this.cameras.add(400, 0, 400, 300);

Здесь создается камера cam2, которая начинается в точке (400, 0) игрового холста и имеет размеры 400x300 пикселей. Важно понимать, что эти координаты относятся к *экрану отрисовки* (viewport), а не к игровому миру. Таким образом, мы можем разделить экран на несколько независимых областей просмотра.

Настройка свойств камеры

Каждая камера — это самостоятельный объект с набором свойств. Вы можете управлять ее масштабом, цветовым фильтром, вращением и областью видимости независимо от других.

// Установка зума (масштаба) камеры
this.cam2.zoom = 0.5;

// Наложение цветового фильтра на вид камеры
this.cam2.setBackgroundColor('rgba(255, 0, 0, 0.3)');

// Вращение вида камеры
this.cam2.setAngle(20);

Свойство zoom со значением 0.5 уменьшит все, что видит эта камера, в два раза. Метод setBackgroundColor позволяет задать цвет заливки для области вьюпорта этой камеры, что полезно для визуального разделения экрана. setAngle поворачивает весь вывод камеры, создавая интересные дисторсионные эффекты.

Привязка камеры к игровым объектам

Самая мощная возможность — заставить камеру следовать за объектом в игровом мире. Это делается через свойство startFollow().

// Предположим, player — это спрайт или физическое тело
this.cam2.startFollow(player);

// Настройка плавности слежения
this.cam2.setLerp(0.1, 0.1);

Метод startFollow() заставляет камеру центрироваться на целевом объекте. Метод setLerp() устанавливает коэффициент интерполяции для плавного, запаздывающего движения камеры. Первый аргумент отвечает за горизонтальную плавность, второй — за вертикальную. Значение 0.1 дает заметное и приятное глазу запаздывание.

Управление рендерингом слоев

По умолчанию камера рендерит все слои игрового мира. Но вы можете ограничить видимость, указав, какие слои (глубины) должна отображать конкретная камера.

// Камера будет рендерить только объекты с depth от 0 до 10
this.cam2.setRenderToTexture();
this.cam2.setLayer([layer0, layer1]); // Предполагается, что layer0 и layer1 — это экземпляры Phaser.GameObjects.Layer

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

Что попробовать дальше

Система мультикамер в Phaser — это не просто инструмент для разделенного экрана. Это фундамент для создания сложных видов, динамических интерактивных элементов интерфейса, карт минимизации или камер наблюдения в игре. Для экспериментов попробуйте создать сцену, где одна камера в режиме setAngle() следует за игроком, а другая, статичная, показывает общую карту уровня, подсвечивая на ней позицию героя через setBackgroundColor().