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

Одна камера — это стандарт для большинства игр. Но что если нужно показать карту в углу, инвентарь в другом месте или действие с разных ракурсов? Phaser позволяет создавать и управлять несколькими камерами в рамках одной сцены. Этот подход полезен для создания сложных интерфейсов, режимов разделённого экрана или динамических обзоров.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('einstein', 'assets/pics/ra-einstein.png');
    }

    create ()
    {
        this.image = this.add.image(200, 150, 'einstein');

        this.cameras.main.setSize(400, 300);

        this.cameras.add(400, 0, 400, 300);
        this.cameras.add(0, 300, 400, 300);
        this.cameras.add(400, 300, 400, 300);
    }

    update ()
    {
        this.image.rotation += 0.01;
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Зачем нужны несколько камер?

Основная камера (this.cameras.main) автоматически создаётся при старте сцены и по умолчанию охватывает весь игровой мир. Однако бывают ситуации, когда требуется отобразить разные части мира или одни и те же объекты под разными углами одновременно.

Примеры использования: - Миникарта в углу экрана. - Разделение экрана для локального мультиплеера. - Статичный интерфейс поверх игрового мира. - Отображение крупного плана на персонажа в отдельном окне.

В примере мы создадим три дополнительные камеры, чтобы разделить экран на четыре квадранта, в каждом из которых будет видна одна и та же вращающаяся картинка.

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

Перед добавлением новых камер полезно явно задать размер основной. Это делает код более предсказуемым.

В методе create() мы сначала уменьшаем область основной камеры до левого верхнего квадранта.

this.cameras.main.setSize(400, 300);

Вызов setSize(width, height) меняет область просмотра камеры, не меняя её масштаба или положения в игровом мире. Камера по-прежнему смотрит на координаты (0,0) мира, но её "окно" теперь имеет размер 400x300 пикселей. Остальная часть холста (справа и снизу) станет чёрной и готовой для других камер.

Создание дополнительных камер

Новые камеры добавляются с помощью метода this.cameras.add(). Каждая камера — это самостоятельный объект с собственными свойствами.

this.cameras.add(400, 0, 400, 300);
this.cameras.add(0, 300, 400, 300);
this.cameras.add(400, 300, 400, 300);

Аргументы метода — это координаты X, Y, ширина и высота области просмотра камеры *на холсте* (в пикселях). - Первая камера (400, 0, 400, 300) займёт правый верхний квадрант. - Вторая (0, 300, 400, 300) — левый нижний. - Третья (400, 300, 400, 300) — правый нижний.

Все созданные камеры по умолчанию смотрят на начало координат игрового мира (0,0) и отображают все объекты, находящиеся в этой области. В нашем случае это один объект this.image.

Поведение объектов и камер

Объекты сцены привязаны к миру, а не к конкретной камере. Если объект находится в зоне видимости камеры, он будет отрисован в её области просмотра. Это ключевой момент для понимания.

В методе update() мы вращаем изображение, и это изменение мгновенно отражается во всех четырёх камерах, потому что они смотрят на один и тот же объект в одном месте.

this.image.rotation += 0.01;

Камеры можно настраивать независимо: смещать (setScrollX/Y), масштабировать (setZoom), вращать (setRotation) или накладывать эффекты вроде затемнения (setAlpha). Это позволяет создавать разнообразные визуальные композиции, используя один игровой мир.

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

Использование нескольких камер в Phaser открывает путь к созданию сложных и полиэкранных интерфейсов. Вы можете независимо управлять областью просмотра, масштабом и эффектами каждой камеры. Для экспериментов попробуйте: 1. Заставить разные камеры следовать за разными игровыми объектами. 2. Применить setZoom к одной из камер для создания эффекта лупы. 3. Использовать setAlpha для полупрозрачного наложения интерфейсной камеры. 4. Динамически менять размеры и положение камер в ответ на действия игрока.