Phaser.js: всё об играх и разработке

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

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

Версия 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 text1 = this.add.text(400, 300, 'Phaser\nText Glow', { fontFamily: 'Arial', fontStyle: 'bold', fontSize: 128, color: '#3807c4', align: 'center' }).setOrigin(0.5, 0.5);

        const fx1 = text1.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);

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

Первым делом в методе preload мы устанавливаем базовый URL для загрузки ассетов. Хотя в данном примере изображение бомбы не используется для создания свечения (оно загружается для демонстрации набора методов), важно понимать принцип загрузки. Основная работа начнется в методе create.

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

Создание текстового объекта

В начале метода create мы создаем текстовый объект с помощью this.add.text. Ключевые параметры: - Координаты X=400 и Y=300 размещают текст по центру сцены (размеры сцены 800x600). - Метод .setOrigin(0.5, 0.5) устанавливает точку привязки текста к его центру, что упрощает позиционирование и анимацию. - В объекте стиля задается крупный (fontSize: 128), жирный (fontStyle: 'bold') шрифт Arial насыщенного синего цвета (color: '#3807c4').

const text1 = this.add.text(400, 300, 'Phaser\nText Glow', { fontFamily: 'Arial', fontStyle: 'bold', fontSize: 128, color: '#3807c4', align: 'center' }).setOrigin(0.5, 0.5);

Активация фильтров и добавление свечения

Чтобы применить к тексту какой-либо фильтр, его нужно сначала активировать. Метод .enableFilters() включает систему фильтров для этого конкретного игрового объекта. После этого становится доступен объект filters.external, который предоставляет методы для добавления эффектов.

Метод .addGlow() создает и возвращает объект фильтра свечения. Его параметры: - 0xffffff: Цвет свечения в формате HEX (здесь — белый). - `0`: Внутренняя сила свечения. Значение 0 означает, что свечение будет только снаружи текста. - `0`: Внешняя сила свечения. Изначально установлена в 0, но позже будет анимирована. - `1`: Качество (количество проходов рендеринга). Большее значение дает более плавное свечение, но требует больше ресурсов. - false: Флаг, указывающий, скрывать ли исходный объект. false означает, что исходный текст остается видимым. - 10: Расстояние свечения (в пикселях). - 24: Размер шага для сглаживания краев свечения.

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

Анимация эффекта с помощью Tween

Чтобы свечение не было статичным, мы анимируем его свойство outerStrength (внешняя сила) с помощью системы Tween. Это создает эффект пульсации. - targets: fx1: Целью анимации является сам объект фильтра свечения. - outerStrength: 4: Конечное значение свойства. Анимация плавно изменит силу свечения от исходного значения 0 до 4. - yoyo: true: После достижения конечного значения анимация проиграется в обратном порядке. - loop: -1: Анимация будет повторяться бесконечно. - ease: 'sine.inout': Используется плавная синусоидальная функция easing для более естественного движения.

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

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

Используя всего несколько строк кода, мы добавили динамическое свечение к тексту, значительно усилив его визуальное воздействие. Для экспериментов попробуйте: изменить цвет свечения (0xff0000 для красного), анимировать innerStrength для внутреннего свечения, применить фильтр свечения к спрайтам вместо текста или комбинировать несколько фильтров (например, свечение + тень) для создания сложных эффектов.