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

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

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

Живой запуск

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

Исходный код


class Demo extends Phaser.Scene
{
    constructor()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('block', 'assets/sprites/1bitblock3.png');
    }

    create ()
    {
        const b = this.add.sprite(400, 300, 'block').setScale(4);

        // b.preFX.setPadding(128);

        // b.preFX.addBlur(1, 2, 2, 10, 0xffffff, 2);

        this.cameras.main.postFX.addBlur(0, 2, 2, 10, 0xffffff, 2);
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    backgroundColor: '#00007d',
    scene: Demo
};

const game = new Phaser.Game(config);

Разбираем исходный код примера

Исходник демонстрирует создание простой сцены с одним спрайтом и применением эффекта размытия через PostFX. Давайте посмотрим на ключевые моменты.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('block', 'assets/sprites/1bitblock3.png');

Здесь в методе preload задаётся базовый URL для загрузки и загружается спрайт. Обратите внимание на pixelArt: true в конфиге — этот флаг отключает сглаживание для пиксель-арт графики, что важно для сохранения чёткости.

const b = this.add.sprite(400, 300, 'block').setScale(4);

В create создаётся спрайт в центре экрана и масштабируется в 4 раза. Ключевой момент — применение эффекта.

PostFX: Размытие на всю камеру

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

this.cameras.main.postFX.addBlur(0, 2, 2, 10, 0xffffff, 2);

Вызов метода addBlur у this.cameras.main.postFX добавляет эффект размытия Гаусса. Разберём параметры: - `0` — качество (0 — низкое, 1 — среднее, 2 — высокое). Здесь выбрано низкое, что менее затратно для производительности. - `2` — сила размытия по оси X. - `2` — сила размытия по оси Y. - 10 — количество проходов. Больше проходов — плавнее размытие, но выше нагрузка. - 0xffffff — цвет тинта (оттенка). Здесь белый, поэтому оттенка нет. - `2` — сила тинта.

Главный плюс PostFX — эффект применяется ко всем объектам в поле зрения камеры. Минус — он влияет на всю сцену, что не всегда нужно.

PreFX: Размытие отдельного спрайта (закомментировано)

В исходном коде две строки с PreFX закомментированы. Давайте их раскомментируем и разберём, что произойдёт.

b.preFX.setPadding(128);
b.preFX.addBlur(1, 2, 2, 10, 0xffffff, 2);

Метод setPadding — это ключ к работе PreFX. Эффекты PreFX рендерятся во внутренний текстуру спрайта. Если эффект (например, размытие) выходит за границы исходного изображения, он будет обрезан. setPadding добавляет прозрачные поля (в пикселях) вокруг спрайта, чтобы эффекту было "куда выходить". Значение 128 здесь — с запасом для силы размытия в 2 пикселя.

Метод addBlur имеет те же параметры, что и для PostFX, но применяется только к спрайту `b`. Это позволяет точечно влиять на визуал отдельных объектов, не затрагивая всю сцену.

PreFX vs PostFX: Когда что использовать?

Выбор между системами зависит от задачи.

**Используйте PreFX, когда нужно:** - Применить эффект к конкретному объекту (например, сделать призрака полупрозрачным). - Эффект должен следовать за движением и трансформациями объекта. - У вас немного активных эффектов (каждый создаёт отдельный рендер-таргет).

**Используйте PostFX, когда нужно:** - Создать глобальное состояние (например, размытие при паузе, туман, цветокоррекцию всей сцены). - Эффект должен быть независим от объектов (например, виньетирование по краям экрана). - Упростить управление (один эффект на всю камеру).

Важно: Цепочка из нескольких PostFX выполняется последовательно, что может быть тяжелее для производительности, чем несколько PreFX на разных объектах.

Типичная ошибка: забытый setPadding

Самая частая проблема при работе с PreFX — обрезание эффекта. Если не вызвать setPadding или указать слишком маленькое значение, размытие, свечение или тень будут выглядеть обрубленными.

// ОШИБКА: Эффект обрежется по границе спрайта.
const sprite = this.add.sprite(100, 100, 'hero');
sprite.preFX.addGlow(0xff0000, 10, 0, false);
// ПРАВИЛЬНО: Добавляем отступ для эффекта.
const sprite = this.add.sprite(100, 100, 'hero');
sprite.preFX.setPadding(64); // Отступ в 64 пикселя
sprite.preFX.addGlow(0xff0000, 10, 0, false);

Размер отступа должен быть сопоставим с ожидаемым радиусом эффекта. Для размытия в 2 пикселя с 10 проходами может хватить и 32 пикселей, но лучше брать с запасом, если ресурсы позволяют.

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

PreFX и PostFX в Phaser — это не взаимозаменяемые инструменты, а разные подходы. PreFX работает на уровне объекта, требуя управления отступами, и идеален для персональных эффектов. PostFX влияет на всю камеру и отлично подходит для глобальных состояний. Для экспериментов попробуйте

  1. Применить к спрайту PreFX-размытие и заставить его двигаться — эффект останется с ним
  2. Добавить через PostFX цветовой тинт (0xff0000) для создания эффекта "красного экрана" при получении урона
  3. Скомбинировать оба подхода, сделав размытие фона (PostFX) и свечение главного героя (PreFX)