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

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

Версия 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.bitmapFont('desyrel-pink', 'assets/fonts/bitmap/desyrel-pink.png', 'assets/fonts/bitmap/desyrel-pink.xml');
    }

    create ()
    {
        const bitmaptext1 = this.add.bitmapText(400, 300, 'desyrel-pink', 'Excepteur sint occaecat\ncupidatat non proident').setOrigin(0.5);

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

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

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

const game = new Phaser.Game(config);

Загрузка растрового шрифта

Первым шагом является загрузка необходимого ресурса — растрового шрифта. Растровые шрифты в Phaser состоят из двух файлов: изображения (.png) со всеми символами и XML-файла (.xml), описывающего расположение каждого символа на этом изображении. Загрузка происходит в методе preload сцены.

this.load.bitmapFont('desyrel-pink', 'assets/fonts/bitmap/desyrel-pink.png', 'assets/fonts/bitmap/desyrel-pink.xml');

Здесь 'desyrel-pink' — это ключ, по которому мы будем обращаться к шрифту в дальнейшем. Остальные параметры — пути к файлам. Метод setBaseURL устанавливает общий префикс для всех путей загрузки, что позволяет указывать только относительные пути.

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

В методе create мы создаем объект растрового текста и сразу активируем для него систему фильтров.

const bitmaptext1 = this.add.bitmapText(400, 300, 'desyrel-pink', 'Excepteur sint occaecat\ncupidatat non proident').setOrigin(0.5);

Эта строка создает текст с центром в точке (400, 300), используя загруженный шрифт 'desyrel-pink'. Метод setOrigin(0.5) центрирует текст относительно этой точки.

Чтобы иметь возможность применять визуальные эффекты, нужно явно разрешить их использование для объекта:

bitmaptext1.enableFilters();

Этот вызов подготавливает объект BitmapText к применению фильтров. После этого становится доступно свойство filters.

Добавление и настройка фильтра Glow

Фильтр Glow добавляется через менеджер external свойства filters. Этот менеджер содержит предустановленные, готовые к использованию эффекты.

const fx1 = bitmaptext1.filters.external.addGlow(0xffffff, 0, 0, 1, false, 10, 24);

Разберем параметры этого вызова: 1. 0xffffff — Цвет свечения (белый). 2. `0` — Внешняя сила свечения. Начальное значение 0 означает, что свечения пока нет. 3. `0` — Внутренняя сила свечения. 4. `1` — Сила свечения (общая). 5. false — Флаг качества. false означает высокое быстродействие, true — более качественное (и ресурсоемкое) размытие. 6. 10 — Расстояние свечения. 7. 24 — Качество (количество шагов) размытия.

Метод возвращает экземпляр фильтра fx1, свойства которого можно анимировать.

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

Phaser предоставляет мощную систему анимаций Tweens. Мы можем анимировать любое числовое свойство фильтра, например, outerStrength, чтобы создать эффект пульсации.

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

Здесь создается твин, который: - Управляет объектом fx1 (нашим фильтром Glow). - Анимирует его свойство outerStrength от текущего значения (0) до 4. - Параметр yoyo: true заставляет анимацию проигрываться и в обратном направлении. - loop: -1 задает бесконечное повторение. - ease: 'sine.inout' обеспечивает плавное, синусоидальное изменение скорости, что делает пульсацию более естественной.

В результате свечение будет плавно увеличиваться и уменьшаться, создавая живой, привлекающий внимание эффект.

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

Используя всего несколько строк кода с API Phaser 3, вы можете добавить в свою игру динамическое свечение текста. Фильтр Glow — это мощный инструмент из коробки, не требующий глубоких знаний графического программирования. **Идеи для экспериментов:** 1. Попробуйте анимировать другие свойства фильтра, например innerStrength для свечения внутри контура букв или glowColor для плавного изменения цвета. 2. Свяжите силу свечения с игровыми событиями (например, уровень здоровья персонажа или зарядка способности). 3. Комбинируйте несколько фильтров (addShine, addShadow), применяя их к одному текстовому объекту через filters.external, для создания сложных визуальных композиций.