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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bomb', 'assets/sprites/bombcolor.png');
    }

    create ()
    {
        const bomb = this.add.sprite(400, 300, 'bomb');

        let fx;
        bomb.enableFilters();
        fx = bomb.filters.internal.addGlow();

        // Allow the filter to automatically expand its padding.
        fx.setPaddingOverride(null);

        //  For Glow filters, the quality and distance can be set in the Game Configuration

        this.tweens.add({
            targets: fx,
            outerStrength: 10,
            yoyo: true,
            loop: -1,
            ease: 'sine.inout'
        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example,
    fx: {
        glow: {
            distance: 32,
            quality: 10
        }
    }
};

const game = new Phaser.Game(config);

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

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

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

Ключевой момент здесь — метод this.load.setBaseURL, который задает базовый URL для загрузки. Это удобно, если все ваши ассеты лежат в одной папке. Сам спрайт загружается с ключом 'bomb'.

Создание спрайта и активация фильтров

В методе create мы создаем спрайт и активируем для него систему фильтров. Без этого шага добавить свечение не получится.

create ()
{
    const bomb = this.add.sprite(400, 300, 'bomb');

    let fx;
    bomb.enableFilters();
    fx = bomb.filters.internal.addGlow();
}

Метод bomb.enableFilters() подготавливает объект для работы с фильтрами. После этого мы получаем доступ к менеджеру фильтров через свойство bomb.filters.internal. Вызов addGlow() создает и добавляет эффект свечения, возвращая ссылку на объект фильтра fx, который нам понадобится для дальнейшей настройки.

Настройка отступов и конфигурации

Фильтры могут "обрезаться" краями спрайта. Чтобы свечение выходило за его пределы, нужно правильно настроить отступы (padding). Также параметры качества и размера свечения можно задать глобально в конфигурации игры.

// Allow the filter to automatically expand its padding.
fx.setPaddingOverride(null);

//  For Glow filters, the quality and distance can be set in the Game Configuration

Метод fx.setPaddingOverride(null) отключает жесткие ограничения по отступам, позволяя фильтру автоматически расширять область своего эффекта вокруг спрайта. Это особенно важно для сильного свечения. Основные параметры distance (расстояние свечения) и quality (качество, влияющее на сглаживание) задаются в объекте fx конфигурации игры, что мы увидим в конце.

Анимация свечения с помощью Tween

Статичное свечение — это хорошо, но пульсирующее выглядит гораздо эффектнее. Phaser предоставляет мощную систему анимаций Tween, которую мы используем для изменения свойства outerStrength (внешняя сила свечения).

this.tweens.add({
    targets: fx,
    outerStrength: 10,
    yoyo: true,
    loop: -1,
    ease: 'sine.inout'
});

Здесь мы создаем твин, который воздействует на объект фильтра fx. Свойство outerStrength анимируется до значения 10 (от исходного, которое, скорее всего, равно 0). Параметры yoyo: true и loop: -1 заставляют анимацию колебаться вперед-назад и повторяться бесконечно. Функция плавности 'sine.inout' обеспечивает мягкое, естественное изменение интенсивности.

Глобальная конфигурация игры и фильтра

Ключевые параметры свечения можно задать один раз на уровне всей игры. Это делается в объекте конфигурации, который передается конструктору Phaser.Game.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example,
    fx: {
        glow: {
            distance: 32,
            quality: 10
        }
    }
};

const game = new Phaser.Game(config);

Раздел fx.glow в конфигурации устанавливает значения по умолчанию для всех создаваемых в игре Glow-фильтров. distance определяет, насколько далеко от края спрайта распространяется свечение (в пикселях). quality влияет на количество проходов размытия: чем выше значение, тем более гладким и качественным (но и более требовательным к производительности) будет свечение.

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

Glow Filter в Phaser 3 — это мощный и гибкий инструмент для постобработки спрайтов. Мы научились создавать свечение, настраивать его базовые параметры через конфигурацию игры и оживлять с помощью системы твинов. Для экспериментов попробуйте: 1. Анимировать другие свойства фильтра, например, innerStrength для внутреннего свечения или color для изменения оттенка. 2. Применять фильтр к текстовым объектам (this.add.text) для создания светящихся надписей. 3. Комбинировать несколько фильтров (Glow + Blur) на одном объекте для более сложных визуальных эффектов.