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

Использование эффектов затемнения и проявления камеры (`fadeOut` и `fadeIn`) — мощный инструмент для создания нарративных пауз, смены локаций или визуального выделения ключевых моментов в игре. Этот простой приём, реализуемый буквально несколькими строчками кода, значительно повышает полиш и плавность восприятия игрового процесса. В статье разберём, как работает цепочка событий камеры для создания бесшовного перехода между двумя изображениями.

Версия 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('robota', 'assets/pics/robota-uxo-by-made-of-bomb.jpg');
        this.load.image('neuromancer', 'assets/pics/neuromancer.jpg');
    }

    create ()
    {
        this.add.image(400, 300, 'robota');

        this.cameras.main.once('camerafadeoutcomplete', function (camera) {

            this.add.image(400, 300, 'neuromancer');

            camera.fadeIn(6000, 255);

        }, this);

        this.cameras.main.fadeOut(6000, 255);
    }
}

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

const game = new Phaser.Game(config);

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

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('robota', 'assets/pics/robota-uxo-by-made-of-bomb.jpg');
    this.load.image('neuromancer', 'assets/pics/neuromancer.jpg');
}

Создание сцены и запуск эффекта

В методе create мы сначала отображаем первое изображение — robota. Затем немедленно запускаем эффект постепенного затемнения основной камеры с помощью метода fadeOut(). Первый аргумент — длительность эффекта в миллисекундах, второй — значение цвета заливки (от 0 до 255).

create ()
{
    this.add.image(400, 300, 'robota');
    this.cameras.main.fadeOut(6000, 255);
}

Обработка завершения затемнения

Ключевой момент — обработка события camerafadeoutcomplete. Мы подписываемся на него один раз с помощью once. Когда камера полностью затемнится, будет вызвана наша функция-обработчик.

this.cameras.main.once('camerafadeoutcomplete', function (camera) {
    // Действия после завершения fadeOut
}, this);

Смена контента и обратный эффект

Внутри обработчика события мы добавляем на сцену второе изображение — neuromancer. Важно: оно добавляется поверх первого, но так как экран полностью чёрный (благодаря fadeOut), это незаметно. Сразу после этого мы запускаем обратный эффект — плавное проявление изображения с помощью fadeIn() у той же камеры.

this.add.image(400, 300, 'neuromancer');
camera.fadeIn(6000, 255);

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

Стандартная конфигурация игры с указанием нашего класса сцены. Обратите внимание, что для работы с камерой не требуется никаких специальных плагинов или дополнительных настроек физики.

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

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

Эффекты fadeIn и fadeOut основной камеры — это простой и эффективный способ управления вниманием игрока. Для экспериментов попробуйте изменить цвет заливки (второй аргумент) на красный (255, 0, 0) для создания драматичного эффекта «закрытия кровью», или используйте цепочку из нескольких последовательных затемнений для создания сложной видеовставки. Также можно привязать запуск эффекта не к началу сцены, а к какому-либо игровому событию, например, касанию объекта.