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

Создание плавных и динамичных визуальных переходов — ключ к захватывающему игровому опыту. 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('CherilPerils', 'assets/tests/camera/CherilPerils.png');
    }

    create ()
    {
        const image = this.add.image(0, 0, 'CherilPerils')
        this.cameras.main.setViewport(5, 5, 390, 290);
        this.camera = this.cameras.add(5, 5, 390, 290);
        this.camera.flash(1000, 1.0, 1.0, 1.0, false, this.flashCallback);
    }

    flashCallback (cam = null, progress = 0)
    {
        if (progress === 1){
            console.log('Flash completed. Starting shake effect.');
            this.camera.shake(1000, 0.05, false, this.shakeCallback);
        }
    }

    shakeCallback (cam = null, progress = 0)
    {
        if (progress === 1){
            console.log('Shake completed. Starting fade effect.');
            this.camera.fade(1000, 0, 0, 0, false, this.fadeCallback);
        }
    }

    fadeCallback (cam = null, progress = 0)
    {
        if(progress === 1){
            console.log('Fade completed. End of example.');
        }
    }

}

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

const game = new Phaser.Game(config);

Настройка сцены и камеры

В методе preload загружается фоновая текстура. Ключевая настройка происходит в create. Сначала создается основное изображение, затем основная камера получает ограниченный вьюпорт, а с помощью this.cameras.add создается дополнительная камера с такими же координатами и размерами. Именно с этой дополнительной камеры мы и будем работать.

const image = this.add.image(0, 0, 'CherilPerils')
this.cameras.main.setViewport(5, 5, 390, 290);
this.camera = this.cameras.add(5, 5, 390, 290);

Запуск цепочки: эффект вспышки (Flash)

Цепочка начинается с вызова метода flash у нашей камеры. Параметры задают длительность, цвет (RGB) и, что самое важное, флаг немедленного начала и функцию обратного вызова this.flashCallback. Колбэк будет вызываться на каждом этапе выполнения эффекта.

this.camera.flash(1000, 1.0, 1.0, 1.0, false, this.flashCallback);

Колбэки как связующее звено

Колбэк-функции эффектов получают два аргумента: ссылку на камеру и прогресс выполнения эффекта (от 0 до 1). Проверяя, равен ли прогресс 1, мы определяем момент завершения эффекта. Внутри flashCallback, после завершения вспышки, запускается следующий эффект — тряска (shake), передавая ему свой колбэк this.shakeCallback.

flashCallback (cam = null, progress = 0)
{
    if (progress === 1){
        console.log('Flash completed. Starting shake effect.');
        this.camera.shake(1000, 0.05, false, this.shakeCallback);
    }
}

Продолжение цепочки: Shake и Fade

Тот же принцип применяется для следующих эффектов. shakeCallback по завершению тряски запускает затемнение (fade). Метод fade принимает длительность, цвет затемнения (в данном случае черный — 0,0,0) и свой колбэк this.fadeCallback. Логика завершения цепочки реализуется в последнем колбэке.

shakeCallback (cam = null, progress = 0)
{
    if (progress === 1){
        console.log('Shake completed. Starting fade effect.');
        this.camera.fade(1000, 0, 0, 0, false, this.fadeCallback);
    }
}

fadeCallback (cam = null, progress = 0)
{
    if(progress === 1){
        console.log('Fade completed. End of example.');
    }
}

Практические советы и вариации

Используя этот паттерн, вы можете создавать сложные последовательности. Экспериментируйте с параметрами: изменяйте длительность, интенсивность тряски (0.05), цвета для flash и fade. Эффекты можно запускать не только по завершению предыдущего, но и на определенном прогрессе (например, progress > 0.5), создавая наложения. Не забывайте, что контекст (this) внутри колбэков указывает на экземпляр сцены, поэтому мы имеем доступ к this.camera.

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

Связывание эффектов камеры через колбэки — элегантный и мощный способ управления визуальной нарративностью в вашей игре. Это основа для создания реакций на удар, драматичных переходов или просто украшения геймплея. Попробуйте добавить эффект zoom или roll в цепочку, управлять запуском эффектов по игровым событиям (сбор предмета, поражение героя) или создать циклическую анимацию, где последний эффект снова запускает первый.