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

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

Управление камерами — ключевой навык для создания сложных игровых миров. В Phaser вы можете добавлять несколько камер, каждая со своими свойствами. Этот пример показывает, как создать дополнительную камеру, которая работает как мини-карта или прицел, динамически следуя за движущейся точкой на большой карте. Этот подход полезен для реализации карт местности, систем слежения за персонажем или создания эффекта "пип-бола" (picture-in-picture) в реальном времени, не затрагивая основную камеру сцены.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload () 
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('CherilPerils', 'assets/tests/camera/CherilPerils.png');
        this.iter = 0;
    }

    create () 
    {
        this.image = this.add.image(0, 0, 'CherilPerils')
            .setOrigin(0);
        this.smallCamera = this.cameras.add(570, 30, 200, 200);
    }

    update () 
    {
        const halfWidth = this.image.texture.source[0].width / 2;
        const quarterWidth = halfWidth / 2;
        const halfHeight = this.image.texture.source[0].height / 2;
        const quarterHeight = halfHeight / 2;
    
        this.smallCamera.scrollX = halfWidth + Math.cos(this.iter) * halfWidth;
        this.iter += 0.02;
    }
}

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

const game = new Phaser.Game(config);

Инициализация сцены и загрузка ресурсов

В методе preload мы загружаем одно большое изображение — карту уровня. Важно использовать setBaseURL, чтобы указать базовый путь для загрузчику. Также здесь инициализируется переменная iter, которая будет использоваться для анимации.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('CherilPerils', 'assets/tests/camera/CherilPerils.png');
    this.iter = 0;
}

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

В create мы добавляем изображение карты в точку (0, 0) и устанавливаем точку привязки (origin) в 0, чтобы его левый верхний угол совпал с началом координат мира. Это важно для точных расчетов скроллинга.

Затем создается вторая камера с помощью this.cameras.add. Ей задаются координаты (570, 30) и размеры 200x200 пикселя. Эта камера будет отображаться поверх основной сцены как отдельное окно.

create ()
{
    this.image = this.add.image(0, 0, 'CherilPerils')
        .setOrigin(0);
    this.smallCamera = this.cameras.add(570, 30, 200, 200);
}

Динамический расчет области видимости

В методе update вычисляются ключевые точки карты: половина и четверть от её ширины и высоты. Эти значения берутся непосредственно из текстуры загруженного изображения через this.image.texture.source[0].

const halfWidth = this.image.texture.source[0].width / 2;
const quarterWidth = halfWidth / 2;
const halfHeight = this.image.texture.source[0].height / 2;
const quarterHeight = halfHeight / 2;

Анимация скроллинга камеры

Сердцевина примера — анимированное изменение свойства scrollX у маленькой камеры. Положение скролла рассчитывается так, чтобы камера перемещалась по горизонтали вокруг центра карты по косинусоидальной траектории.

Переменная iter плавно увеличивается каждый кадр, создавая непрерывное движение. Изменяя множитель и формулу, можно задать любой паттерн движения.

this.smallCamera.scrollX = halfWidth + Math.cos(this.iter) * halfWidth;
this.iter += 0.02;

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

Стандартная конфигурация игры определяет её тип, контейнер на странице, размеры и главную сцену. После создания экземпляра Phaser.Game с этой конфигурацией игра запускается.

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

const game = new Phaser.Game(config);

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

Вы научились создавать дополнительные камеры в Phaser и управлять их скроллингом в реальном времени. Это открывает путь к созданию сложных интерфейсов и игровых механик. Идеи для экспериментов: 1. Заставьте камеру следовать за движением курсора мыши или спрайтом персонажа. 2. Добавьте зум для маленькой камеры с помощью свойства zoom. 3. Создайте несколько камер с разными областями видимости для реализации системы сплит-скрина. 4. Измените цветовой тон или добавьте эффекты (например, размытие) к камере через setPostPipeline.