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

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

Версия 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(400, 300, 'bomb');

        const fx1 = bomb1.enableFilters().filters.external.addGlow(0xffff00, 4, 0, 1, false, 10, 32);
        const fx2 = bomb1.enableFilters().filters.external.addGlow(0xff0000, 4, 2);
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и загрузка ассетов

Работа начинается с создания класса сцены, наследующего от Phaser.Scene. В методе preload мы устанавливаем базовый URL для загрузки ресурсов и загружаем одно изображение — спрайт бомбы. Это стандартная подготовка для любого примера в Phaser.

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

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

В методе create мы создаем спрайт bomb1 и помещаем его в центр экрана. Ключевой момент — вызов метода .enableFilters() у этого спрайта. Этот метод активирует систему фильтров для данного игрового объекта и возвращает менеджер фильтров, позволяя добавлять визуальные эффекты.

const bomb1 = this.add.sprite(400, 300, 'bomb');
const fx1 = bomb1.enableFilters().filters.external.addGlow(0xffff00, 4, 0, 1, false, 10, 32);

После вызова enableFilters() мы получаем доступ к контейнеру filters.external. Именно из него вызывается метод addGlow, который создает и применяет эффект свечения к спрайту. Результат (объект фильтра) сохраняется в переменную fx1 для потенциального дальнейшего управления.

Добавление второго эффекта свечения

Сила системы фильтров Phaser в том, что к одному объекту можно применить несколько эффектов одновременно. В нашем примере это демонстрируется добавлением второго свечения прямо после первого. Обратите внимание: метод enableFilters() вызывается один раз, а addGlow — дважды, что абсолютно корректно.

const fx2 = bomb1.enableFilters().filters.external.addGlow(0xff0000, 4, 2);

Второе свечение имеет красный цвет (0xff0000). Разница в параметрах (например, третье значение — `2вместо0`) приводит к визуально отличному результату: два свечения накладываются друг на друга, создавая комплексный эффект. Это позволяет микшировать цвета и параметры для достижения уникального визуального стиля.

Разбор параметров метода addGlow

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

addGlow(0xffff00, 4, 0, 1, false, 10, 32)

1. **Цвет (0xffff00):** Задает основной оттенок свечения (в данном случае желтый). 2. **Внешняя толщина (4):** Определяет, насколько далеко за границы спрайта распространяется свечение. 3. **Внутренняя сила (0):** Управляет интенсивностью свечения внутри контура спрайта. 4. **Интенсивность свечения (1):** Общий множитель силы эффекта. 5. **Качество (false):** Если true, включает сглаживание для более качественного, но ресурсоемкого рендеринга. 6. **Шаги (10):** Количество проходов рендеринга для создания эффекта. Больше шагов — более плавное и качественное свечение. 7. **Расстояние (32):** Влияет на размытие и мягкость границ свечения.

Конфигурация и запуск игры

За пределами класса сцены определяется конфигурационный объект config для игры. В нем задаются основные параметры: тип рендерера, размеры холста, цвет фона и указание, какая сцена будет использоваться. После этого создается экземпляр игры new Phaser.Game(config), который запускает весь процесс.

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

const game = new Phaser.Game(config);

Темный фон (#2d2d2d) выбран не случайно — он обеспечивает максимальный контраст для ярких эффектов свечения, делая их более заметными и эффектными.

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

Использование нескольких фильтров addGlow на одном объекте открывает широкие возможности для стилизации без затрат на производительность, характерных для обработки каждого кадра вручную. Вы можете экспериментировать: анимировать параметры свечения (например, пульсацию толщины или переливы цвета), комбинировать свечение с другими фильтрами из filters.external (например, с размытием или искажением), или применять эту технику к тексту и другим типам игровых объектов для создания единого визуального языка в вашем проекте.