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

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

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

Версия 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 graphics = this.add.graphics();

        graphics.fillStyle(0xffff00, 1);
        graphics.fillRect(100, 100, 256, 256);

        graphics.fillStyle(0xff00ff, 1);
        graphics.fillRect(300, 200, 256, 256);

        graphics.fillStyle(0x00ff00, 1);
        graphics.fillTriangle(200, 200, 400, 50, 500, 300);

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

Создание графических примитивов

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

В методе create() мы создаем экземпляр графики и используем методы fillStyle() и fillRect() / fillTriangle() для рисования фигур.

const graphics = this.add.graphics();
graphics.fillStyle(0xffff00, 1);
graphics.fillRect(100, 100, 256, 256);

Первым аргументом fillStyle() задается цвет в HEX-формате, вторым — альфа-канал (прозрачность). Метод fillRect() рисует прямоугольник, принимая координаты X, Y, ширину и высоту. Аналогично fillTriangle() рисует треугольник по трем точкам.

Включение и добавление фильтра Glow

Фильтры в Phaser применяются к объектам, поддерживающим рендеринг, таким как Graphics, Sprite или Text. Чтобы начать работу с фильтрами, необходимо сначала вызвать метод enableFilters() на целевом объекте.

graphics.enableFilters();

Это активирует систему фильтров для объекта graphics. Далее, мы обращаемся к свойству filters.external, которое предоставляет доступ к коллекции внешних (пост-обработки) фильтров, и добавляем фильтр свечения с помощью метода addGlow().

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

Параметры фильтра `addGlow()`

Метод addGlow() принимает несколько аргументов, которые тонко настраивают эффект свечения:

addGlow(color, distance, outerStrength, innerStrength, knockout, quality, steps)

Рассмотрим ключевые параметры из нашего примера: 1. color: 0xffffff — Цвет свечения (белый). 2. outerStrength: 0 — Начальная интенсивность внешнего свечения. 3. innerStrength: 1 — Интенсивность внутреннего свечения (в данном случае оно уже присутствует). 4. knockout: false — Если true, исходная фигура становится невидимой, видно только свечение. 5. quality: 10 — Качество эффекта (чем выше, тем лучше, но дороже для производительности). 6. steps: 24 — Количество шагов рендеринга для создания плавного градиента свечения.

Фильтр возвращает объект fx1, который мы можем использовать для дальнейшего управления, например, для анимации.

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

Одним из главных преимуществ фильтров Phaser является возможность анимировать их параметры с помощью встроенной системы твинов. Это позволяет создавать плавные, живые эффекты.

В примере мы анимируем параметр outerStrength фильтра fx1, заставляя внешнее свечение пульсировать.

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

- targets: fx1 — Указываем объект фильтра как цель анимации. - outerStrength: 4 — Конечное значение интенсивности внешнего свечения. - yoyo: true — После достижения конечного значения анимация проигрывается в обратном порядке. - loop: -1 — Бесконечное повторение анимации. - ease: 'sine.inout' — Функция плавности, создающая естественное ускорение и замедление.

Таким образом, свечение плавно нарастает от 0 до 4 и обратно, создавая эффект дыхания.

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

Фильтр Glow — это простой, но мощный инструмент для добавления визуальной глубины и динамики в вашу игру. Комбинируя программную графику, настраиваемые параметры свечения и анимацию, вы можете создавать самые разные эффекты: от подсветки интерактивных кнопок до магических аурических полей вокруг персонажей. Для экспериментов попробуйте: анимировать цвет свечения (color), применить эффект knockout для создания силуэтов, комбинировать несколько фильтров на одном объекте или привязать интенсивность свечения к игровой логике (например, к здоровью персонажа).