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

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

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

Версия 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('image', 'assets/sprites/mushroom2.png');
        // this.shakeTime = 0;
        this.objects = {};
    }

    create ()
    {
        this.objects.camera = this.cameras.add(0, 0, 400, 300);
        this.objects.image0 = this.add.image(400, 300, 'image');
        this.objects.image1 = this.add.image(400, 300, 'image');
        this.objects.image2 = this.add.image(400, 300, 'image');
        this.objects.image3 = this.add.image(400, 300, 'image');
        this.objects.move = 0.0;
        this.objects.camera.zoom = 0.5;
        this.objects.camera.scrollX = 200;
        this.objects.camera.scrollY = 150;
        this.objects.camera.setBackgroundColor('rgba(255, 0, 0, 0.5)');
    }

    update ()
    {
        this.objects.image0.x = 400 + Math.cos(this.objects.move) * 300;
        this.objects.image0.y = 300 + Math.sin(this.objects.move * 2) * 200;
        this.objects.image1.x = 400 + Math.sin(this.objects.move * 2) * 300;
        this.objects.image1.y = 300 + Math.cos(this.objects.move) * 200;
        this.objects.image2.y = 300 + Math.cos(this.objects.move * 2) * 400;
        this.objects.image3.x = 400 + Math.sin(this.objects.move * 2) * 400;
        this.objects.move += 0.02;
    }
}

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

const game = new Phaser.Game(config);

Создание и базовая настройка камеры

Основная камера в Phaser создается автоматически для каждой сцены. Однако, используя Camera Manager (this.cameras), вы можете добавлять дополнительные камеры для отображения разных частей игрового мира или создания эффектов.

В методе create() примера создается новая камера с помощью метода this.cameras.add(). Первые четыре аргумента определяют её положение и размеры на экране (viewport).

this.objects.camera = this.cameras.add(0, 0, 400, 300);

Эта строка создает камеру, которая будет отображаться в левом верхнем углу основного холста (координаты 0, 0) с шириной 400 и высотой 300 пикселей. Все объекты, добавленные в сцену, будут отрисовываться и в этой камере, если они попадают в её поле зрения. Далее создаются четыре спрайта с изображением гриба, которые изначально позиционируются в центре игрового мира (координаты 400, 300).

Управление зумом, скроллом и цветом фона

После создания камеры мы настраиваем её основные свойства. Масштаб (зум) и смещение (скролл) меняют то, какую область мира видит камера и как она это отображает.

this.objects.camera.zoom = 0.5;
this.objects.camera.scrollX = 200;
this.objects.camera.scrollY = 150;

Установка zoom в 0.5 означает, что все объекты в этой камере будут отображаться в два раза меньше. Свойства scrollX и scrollY смещают точку, которую камера считает своим центром (или верхним левым углом), по игровому миру. В данном случае камера "смотрит" на область, начинающуюся с координат (200, 150) мира.

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

this.objects.camera.setBackgroundColor('rgba(255, 0, 0, 0.5)');

Здесь фону камеры задается полупрозрачный красный цвет (альфа-канал 0.5). Важно понимать, что этот цвет заполняет только область вьюпорта камеры (заданные 400x300 пикселей), а не весь холст. Если в этой области нет игровых объектов, она будет залита этим цветом.

Анимация объектов в поле зрения камеры

Чтобы продемонстрировать работу камеры, объекты в сцене анимируются в методе update(). Их движение рассчитывается с помощью тригонометрических функций Math.sin() и Math.cos(), что создает плавные циклические траектории.

this.objects.image0.x = 400 + Math.cos(this.objects.move) * 300;
this.objects.image0.y = 300 + Math.sin(this.objects.move * 2) * 200;
this.objects.move += 0.02;

Ключевая переменная this.objects.move постепенно увеличивается на 0.02 каждый кадр, выступая в роли общего "времени" для анимации. Каждый спрайт имеет свою уникальную формулу для координат X и Y, основанную на этой переменной, что приводит к их независимому движению по сложным траекториям (например, по фигурам Лиссажу). Поскольку камера имеет зум 0.5 и смещение, эти движущиеся объекты будут то появляться в её вьюпорте, то покидать его, демонстрируя, как камера "вырезает" часть игрового мира.

Структура проекта и настройка игры

Пример построен по классической для Phaser 3 структуре. Класс сцены Example расширяет Phaser.Scene и содержит основные методы жизненного цикла: preload(), create() и update().

Конфигурация игры (config) передается в конструктор Phaser.Game. Обратите внимание на важные параметры:

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

- type: Phaser.WEBGL предписывает использовать WebGL-рендерер для лучшей производительности. - parent: 'phaser-example' — это ID HTML-элемента, в который будет встроен игровой холст. - width и height задают разрешение основного холста игры (800x600). Именно внутри этого холста и будет отображаться вьюпорт нашей дополнительной камеры размером 400x300. Все созданные объекты для удобства хранятся в свойстве this.objects, что является хорошей практикой для организации кода в небольших примерах.

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

Дополнительные камеры в Phaser открывают широкие возможности: от создания разделенного экрана для мультиплеера и статических элементов интерфейса до реализации сложных эффектов вроде карты мини-игры или "бинокля". Экспериментируйте: попробуйте управлять свойствами камеры (зумом, скроллом) в реальном времени в ответ на действия игрока, создайте несколько камер с разными цветами фона или настройте их рендеринг поверх друг друга с помощью свойства camera.alpha. Использование setBackgroundColor() с прозрачностью — отличный способ визуально выделить важную область, не перекрывая полностью происходящее за её пределами.