Phaser.js: всё об играх и разработке

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

В сложных игровых сценах часто возникает необходимость показывать разные области или объекты через несколько камер одновременно. Пример из официальной документации Phaser демонстрирует, как использовать несколько камер и контролировать, какие игровые объекты в них отображаются. Это особенно полезно для создания эффектов разделённого экрана, мини-карт, UI-элементов, не зависящих от основной камеры, или сложных визуальных композиций, где объект должен быть виден только в определённых областях экрана. Освоив этот приём, вы сможете гибко управлять рендерингом, оптимизируя производительность и создавая уникальные визуальные решения.

Версия 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('cave', 'assets/sprites/cave.png');
        this.load.image('nebula', 'assets/skies/nebula.jpg');
    }

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

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

        this.camera1 = this.cameras.add(400, 0, 400, 300);
        this.camera2 = this.cameras.add(0, 300, 400, 300);
        this.camera3 = this.cameras.add(400, 300, 400, 300).setAlpha(0.5);

        // Create Stamp in the middle of the screen.
        this.stamp = this.add.stamp(400, 300, 'cave');

        // Remove Stamp from a camera.
        this.cameras.main.ignore(this.stamp);
    }

    update ()
    {
        this.image.rotation += 0.01;
        this.stamp.rotation -= 0.007;
        this.camera1.scrollX = Math.sin(this.image.rotation) * 200;
        this.camera2.rotation = Math.cos(this.image.rotation);
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и создание камер

В методе create() после загрузки ресурсов происходит базовая настройка визуального пространства. Сначала создаётся фоновое изображение nebula.

Затем основной камере this.cameras.main явно задаётся размер. По умолчанию она занимает весь холст игры, но здесь мы ограничиваем её область. После этого добавляются три дополнительные камеры, каждая из которых "смотрит" на свою часть экрана. Обратите внимание, что третьей камере также устанавливается полупрозрачность с помощью метода .setAlpha(0.5).

this.image = this.add.image(200, 150, 'nebula');
this.cameras.main.setSize(400, 300);

this.camera1 = this.cameras.add(400, 0, 400, 300);
this.camera2 = this.cameras.add(0, 300, 400, 300);
this.camera3 = this.cameras.add(400, 300, 400, 300).setAlpha(0.5);

Создание Stamp и управление его видимостью

Ключевой объект примера — Stamp. Это особый тип игрового объекта в Phaser, который можно использовать для статичной графики. Он создаётся в центре экрана игры.

Самая важная операция — исключение этого объекта из рендеринга основной камеры с помощью метода this.cameras.main.ignore(). Это означает, что stamp будет отрисован только в тех камерах, которые его не игнорируют (в данном случае — в camera1, camera2 и camera3). Таким образом, видимость объекта можно тонко настраивать для каждой камеры отдельно.

this.stamp = this.add.stamp(400, 300, 'cave');
this.cameras.main.ignore(this.stamp);

Анимация и динамическое управление камерами

В методе update() реализована простая анимация, которая делает сцену живой и наглядно показывает независимость камер. Фоновое изображение и stamp вращаются в противоположных направлениях.

Более интересно динамическое изменение свойств камер. У первой камеры (camera1) анимируется свойство scrollX, что создаёт эффект горизонтальной прокрутки её "вида". У второй камеры (camera2) изменяется свойство rotation, заставляя всё её содержимое вращаться. Эти изменения применяются только к конкретным камерам и не затрагивают другие.

this.image.rotation += 0.01;
this.stamp.rotation -= 0.007;
this.camera1.scrollX = Math.sin(this.image.rotation) * 200;
this.camera2.rotation = Math.cos(this.image.rotation);

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

Использование нескольких камер с избирательной видимостью объектов открывает широкие возможности для геймдизайна. Вы можете создавать сложные интерфейсы, где HUD отрисовывается отдельной камерой, или реализовывать кооперативный режим с разделённым экраном, где у каждого игрока свой вид на мир. Попробуйте поэкспериментировать: добавьте больше объектов и управляйте их видимостью для разных камер, создайте камеру, которая следует за определённым объектом, но игнорирует остальные, или реализуйте эффект "карты в углу экрана", которая показывает уменьшенную копию игрового мира.