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

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

Одна из ключевых особенностей 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('eye', 'assets/pics/lance-overdose-loader-eye.png');
    }

    create ()
    {
        this.add.sprite(300, 300, 'eye').setInteractive();

        this.cameras.main.setName('cam1');

        //  Create more Cameras over the top of the main one
        const cam2 = this.cameras.add().setName('cam2');

        cam2.scrollX = 100;
        cam2.scrollY = 100;

        const cam3 = this.cameras.add().setName('cam3');

        cam3.scrollX = 200;
        cam3.scrollY = 200;

        this.input.on('gameobjectover', (pointer, gameObject) =>
        {

            console.log(pointer.camera.name);
            gameObject.setTint(0xff0000);

        });

        this.input.on('gameobjectout', (pointer, gameObject) =>
        {

            gameObject.clearTint();

        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и загрузка ресурсов

В методе preload мы загружаем изображение, которое будет использоваться в демонстрации. Базовый URL устанавливается на репозиторий с примерами Phaser, что удобно для тестирования.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}

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

В методе create сначала добавляется спрайт и делается интерактивным. Основная камера доступна как this.cameras.main и получает имя 'cam1'.

Затем создаются две дополнительные камеры с помощью this.cameras.add(). Каждая камера имеет своё имя и смещение (scrollX и scrollY), что визуально сдвигает их область отображения относительно основной. Эти камеры автоматически накладываются поверх основной, создавая эффект стека.

create ()
{
    this.add.sprite(300, 300, 'eye').setInteractive();

    this.cameras.main.setName('cam1');

    //  Создаём дополнительные камеры поверх основной
    const cam2 = this.cameras.add().setName('cam2');

    cam2.scrollX = 100;
    cam2.scrollY = 100;

    const cam3 = this.cameras.add().setName('cam3');

    cam3.scrollX = 200;
    cam3.scrollY = 200;
}

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

Здесь подписываемся на события наведения курсора на игровой объект (gameobjectover) и ухода с него (gameobjectout). В обработчике gameobjectover ключевой момент: pointer.camera.name позволяет определить, через какую именно камеру произошло взаимодействие. Это важно, когда у вас несколько камер, и нужно знать, какая из них активна для ввода.

При наведении спрайт окрашивается в красный оттенок (setTint), при уходе — оттенок снимается (clearTint).

this.input.on('gameobjectover', (pointer, gameObject) =>
{
    console.log(pointer.camera.name);
    gameObject.setTint(0xff0000);
});

this.input.on('gameobjectout', (pointer, gameObject) =>
{
    gameObject.clearTint();
});

Настройка и запуск игры

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

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

const game = new Phaser.Game(config);

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

Использование нескольких камер в Phaser открывает возможности для создания сложных визуальных композиций и точного управления вводом. Вы можете экспериментировать: меняйте порядок камер через cameras.setCameraIndex, добавляйте эффекты вроде размытия или изменения цвета для отдельных камер, или создавайте систему мини-карты, где одна камера показывает общий вид, а другая — увеличенную область.