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

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

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class TestPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
}

class Example extends Phaser.Scene
{
    create()
    {
        console.log('create');
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example,
    pipeline: TestPostFX
};

const game = new Phaser.Game(config);

Что такое PostFXPipeline?

PostFXPipeline — это специальный класс в Phaser, предназначенный для применения пост-обработки с использованием WebGL шейдеров. В отличие от PreFXPipeline, который работает с отдельными объектами, PostFX-конвейеры по умолчанию применяются ко всей сцене (хотя их можно назначить и на конкретные объекты).

Это основа для создания таких эффектов, как: - Размытие (Blur) - Свечение (Glow) - Цветовые фильтры (сепия, черно-белое) - Искажения (воды, теплового марева)

Класс является частью рендерера и работает в контексте WebGL.

Базовый шаблон класса конвейера

Для создания своего эффекта необходимо расширить (унаследовать) базовый класс Phaser.Renderer.WebGL.Pipelines.PostFXPipeline. Пока что мы создадим минимальную реализацию, которая лишь регистрирует конвейер в системе.

class TestPostFX extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
    // На данном этапе тело класса может быть пустым.
    // Основная логика шейдера будет добавляться в методах `boot` и `onDraw` позднее.
}

Ключевые моменты: 1. Класс должен наследоваться от указанного базового класса. 2. Имя класса (TestPostFX) можно выбрать любое. 3. Пока мы не переопределяем никакие методы, конвейер будет работать в "нейтральном" режиме, не внося изменений в изображение.

Регистрация конвейера в конфиге игры

Чтобы Phaser знал о нашем новом конвейере, его необходимо передать в глобальную конфигурацию игры через свойство pipeline. Это регистрирует конвейер на уровне всего игрового экземпляра.

const config = {
    type: Phaser.WEBGL, // Важно: PostFX работает ТОЛЬКО с WebGL!
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example,
    pipeline: TestPostFX // Регистрируем наш класс конвейера
};

Обратите внимание на два критических момента: 1. **type: Phaser.WEBGL**: PostFX-конвейеры требуют WebGL-рендерера и не будут работать в режиме Phaser.CANVAS. 2. **pipeline: TestPostFX**: Здесь мы передаем не экземпляр класса, а саму ссылку на класс. Phaser создаст экземпляр этого конвейера самостоятельно в процессе загрузки.

Минимальная сцена для проверки

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

class Example extends Phaser.Scene
{
    create()
    {
        // Эта строка подтверждает, что сцена создалась.
        // На данном этапе мы еще не применяем эффект.
        console.log('create');
    }
}

Пока что в сцене нет логики для применения PostFX. Конвейер TestPostFX уже зарегистрирован глобально и готов к использованию. Его можно будет применить к сцене или объекту следующим образом (код для будущих экспериментов):

// В методе create() сцены:
this.cameras.main.setPostPipeline(TestPostFX);

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

Вы заложили фундамент для создания собственных визуальных эффектов в Phaser 3, зарегистрировав свой класс PostFX-конвейера на уровне конфигурации игры. Это первый и обязательный шаг. Сейчас конвейер не вносит изменений в рендеринг, так как его шейдерная часть еще не реализована. **Идеи для экспериментов:** 1. Попробуйте передать в свойство pipeline массив из нескольких классов, чтобы зарегистрировать сразу несколько конвейеров. 2. После регистрации, в сцене, примените конвейер к основной камере с помощью this.cameras.main.setPostPipeline(TestPostFX) и убедитесь, что игра не выдает ошибок. 3. Исследуйте официальные примеры Phaser, чтобы увидеть, как в классах PostFX переопределяются методы boot (для компиляции шейдеров) и onDraw (для их выполнения).