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

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

Версия 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 bomb1 = this.add.sprite(200, 300, 'bomb');
        const bomb2 = this.add.sprite(600, 300, 'bomb');

        const fx1 = bomb1.enableFilters().filters.external.addGlow(0xffffff, 0, 0, 1, false, 10, 32);

        const fx2 = bomb2.enableFilters().filters.external.addGlow(0xff0000, 8, 8, 1, true, 10, 24);

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

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

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');
}

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

Создание объектов и включение фильтров

В методе create мы создаем два спрайта и применяем к ним фильтр свечения с разными параметрами. Фильтры в Phaser применяются через систему FX.

create ()
{
    const bomb1 = this.add.sprite(200, 300, 'bomb');
    const bomb2 = this.add.sprite(600, 300, 'bomb');

    const fx1 = bomb1.enableFilters().filters.external.addGlow(0xffffff, 0, 0, 1, false, 10, 32);
    const fx2 = bomb2.enableFilters().filters.external.addGlow(0xff0000, 8, 8, 1, true, 10, 24);
}

Метод enableFilters() активирует систему фильтров для спрайта. Далее, обращаясь к filters.external.addGlow(), мы добавляем фильтр свечения. Обратите внимание, что параметры для двух спрайтов различаются, что сразу дает визуально разные эффекты.

Параметры метода addGlow

Метод addGlow принимает несколько аргументов, которые контролируют вид свечения. Давайте разберем их на примере второго спрайта bomb2.

addGlow(0xff0000, 8, 8, 1, true, 10, 24)

1. 0xff0000 — Цвет свечения в шестнадцатеричном формате (здесь — красный). 2. Первая `8— Внешняя сила свечения (outerStrength`). Определяет, насколько далеко от края объекта распространяется свечение. 3. Вторая `8— Внутренняя сила свечения (innerStrength`). Определяет интенсивность свечения внутри контура объекта. 4. `1— Сила свечения (strength`). Общий множитель интенсивности эффекта. 5. true — Качество (quality). Если true, используется больше шагов для сглаживания, что делает свечение более качественным, но требовательным к производительности. 6. 10 — Расстояние (distance). Определяет расстояние, на которое эффект 'размывается'. 7. 24 — Количество шагов (steps). Чем больше шагов, тем плавнее градиент свечения. Для первого спрайта параметры outerStrength и innerStrength равны 0, поэтому свечение едва заметно, создавая лишь легкое белое сияние.

Анимация параметров фильтра

Одно из мощнейших свойств FX-системы Phaser — возможность анимировать параметры фильтров с помощью твинов. В примере мы анимируем внешнюю силу свечения у первого спрайта.

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

Здесь targets — это сам объект фильтра fx1. Мы анимируем его свойство outerStrength от исходного значения (0) до 8. Параметры yoyo: true и loop: -1 заставляют анимацию плавно колебаться туда-обраво бесконечно. ease: 'sine.inout' задает плавное синусоидальное easing-функция для движения. В результате свечение первого спрайта пульсирует.

Конфигурация игры

Весь эффект работает в стандартной конфигурации игры Phaser. Здесь нет специальных требований к рендереру.

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

const game = new Phaser.Game(config);

Темный фон (backgroundColor: '#2d2d2d') выбран не случайно — на нем свечение любого цвета выглядит максимально контрастно и эффектно.

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

Glow Post Filter — это простой, но невероятно гибкий инструмент для добавления визуальной глубины в вашу игру. Вы можете использовать его для подсветки активных элементов, создания аур, магических эффектов или просто для стилизации. Для экспериментов попробуйте: анимировать цвет свечения с помощью tweens.add({targets: fx, color: ...}), привязать изменение силы свечения к игровой логике (например, при получении урона) или комбинировать Glow с другими фильтрами из filters.external.