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

Создание динамичных визуальных эффектов — ключ к захватывающему игровому опыту. Phaser предлагает простой и мощный инструмент — эффект вспышки камеры (`camera.flash`). Этот эффект не просто украшение: он идеально подходит для выделения критических событий, таких как получение урона, сбор бонуса или завершение уровня, мгновенно привлекая внимание игрока. В этой статье мы разберем, как использовать встроенный эффект вспышки, как привязать к нему логику отображения объектов и создать интерактивный пример.

Версия 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('pic', 'assets/pics/a-new-link-to-the-past-by-ptimm.jpg');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    }

    create ()
    {
        this.add.image(400, 300, 'pic');
        const logo = this.add.image(400, 200, 'logo').setVisible(false);

        //  Let's show the logo when the camera flashes, and hide it when it completes
        this.cameras.main.on('cameraflashstart', function (cam, fx, duration) {
            logo.setVisible(true);
        });

        this.cameras.main.on('cameraflashcomplete', function () {
            logo.setVisible(false);
        });

        //  Every time you click, shake the camera
        this.input.on('pointerdown', function () {
            this.cameras.main.flash();
        }, this);
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и загрузка ресурсов

Вся логика примера содержится в классе сцены, расширяющем Phaser.Scene. В методе preload мы загружаем два изображения: фоновую картинку и логотип Phaser 3. Обратите внимание на использование this.load.setBaseURL для указания базового URL-адреса, что позволяет указывать относительные пути к файлам.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('pic', 'assets/pics/a-new-link-to-the-past-by-ptimm.jpg');
    this.load.image('logo', 'assets/sprites/phaser3-logo.png');
}

Создание объектов и подписка на события вспышки

В методе create мы сначала добавляем фоновое изображение. Затем создаем спрайт логотипа и сразу же скрываем его с помощью метода .setVisible(false). Изначально логотип невидим.

Ключевой момент — это подписка на события эффекта вспышки основной камеры (this.cameras.main). Phaser генерирует два специфичных события: * cameraflashstart — срабатывает в момент начала эффекта вспышки. * cameraflashcomplete — срабатывает по завершении эффекта.

В нашем примере мы показываем логотип в начале вспышки и скрываем его, когда вспышка заканчивается. Это демонстрирует, как можно синхронизировать визуальные изменения в игре с эффектами камеры.

create ()
{
    this.add.image(400, 300, 'pic');
    const logo = this.add.image(400, 200, 'logo').setVisible(false);

    this.cameras.main.on('cameraflashstart', function (cam, fx, duration) {
        logo.setVisible(true);
    });

    this.cameras.main.on('cameraflashcomplete', function () {
        logo.setVisible(false);
    });
}

Запуск эффекта по клику мыши

Чтобы эффект можно было протестировать, мы привязываем его вызов к событию клика (или касания) на игровом холсте. При каждом нажатии вызывается метод this.cameras.main.flash(). Этот метод запускает стандартную белую вспышку с длительностью по умолчанию. Вызов метода без параметров использует настройки по умолчанию.

this.input.on('pointerdown', function () {
    this.cameras.main.flash();
}, this);

Таким образом, цепочка становится интерактивной: клик → вспышка камеры → показ логотипа → завершение вспышки → скрытие логотипа.

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

Код завершается стандартной конфигурацией игрового экземпляра Phaser. В объекте config мы указываем тип рендерера, элемент-контейнер, размеры холста и наш класс сцены. После этого создается экземпляр игры new Phaser.Game(config), который запускает весь процесс.

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

const game = new Phaser.Game(config);

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

Эффект вспышки камеры в Phaser — это готовое и простое в использовании средство для создания мгновенных визуальных акцентов. Как показано в примере, его легко комбинировать с другими элементами игры через систему событий. Для экспериментов попробуйте передать параметры в метод flash(duration, red, green, blue), чтобы изменить длительность и цвет вспышки. Также можно связать вспышку не с кликом, а с игровыми событиями — столкновением, достижением цели или окончанием времени. Используйте этот эффект точечно, чтобы не перегружать восприятие игрока.