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

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

Версия 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('phaserlogo', 'assets/sprites/phaser-large.png');
    }

    create ()
    {

        // Description text
        this.add.text(10, 10, 'Shadow effect', { font: '16px Courier', fill: '#000000' });

        const phaserLogoImg1 = this.add.image(this.scale.width / 2, this.scale.height / 2 - 50, 'phaserlogo');
        phaserLogoImg1.setInteractive();
        const fxShadow = phaserLogoImg1.enableFilters().filters.external.addShadow(0, 0, 0.006, 2, 0x333333, 10);

        this.add.tween({
            targets: phaserLogoImg1,
            scale: 1.05,
            duration: 800,
            yoyo: true,
            repeat: -1
        });
        this.add.tween({
            targets: fxShadow,
            x: 5,
            y: -5,
            duration: 800,
            yoyo: true,
            repeat: -1
        })

    }
}

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

const game = new Phaser.Game(config);

Создание и настройка сцены

В Phaser вся игровая логика организована в сценах (Scenes). Наш пример начинается с объявления класса сцены Example. В методе preload() мы загружаем изображение логотипа Phaser с удаленного сервера.

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('phaserlogo', 'assets/sprites/phaser-large.png');
    }

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

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

Ключевой шаг — добавление фильтра тени. Чтобы это сделать, сначала нужно активировать систему фильтров для спрайта с помощью метода enableFilters(). Затем мы получаем доступ к менеджеру внешних фильтров (filters.external) и добавляем тень через метод addShadow().

const phaserLogoImg1 = this.add.image(this.scale.width / 2, this.scale.height / 2 - 50, 'phaserlogo');
phaserLogoImg1.setInteractive();
const fxShadow = phaserLogoImg1.enableFilters().filters.external.addShadow(0, 0, 0.006, 2, 0x333333, 10);

Метод addShadow() принимает несколько параметров: 1. `xиy` — смещение тени относительно объекта. 2. darkness — интенсивность затемнения (от 0 до 1). 3. quality — качество размытия тени. 4. color — цвет тени в HEX-формате. 5. blur — радиус размытия краев тени.

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

Анимация спрайта и тени

Для создания живой, привлекающей внимание картинки мы анимируем и сам логотип, и его тень. Phaser предоставляет удобный API для создания твинов (tweens) — плавных переходов свойств.

Первый твин масштабирует логотип, создавая эффект пульсации. Второй твин воздействует на объект фильтра fxShadow, изменяя его смещение по осям X и Y. Использование yoyo: true и repeat: -1 заставляет анимацию играть вперед-назад бесконечно.

this.add.tween({
    targets: phaserLogoImg1,
    scale: 1.05,
    duration: 800,
    yoyo: true,
    repeat: -1
});
this.add.tween({
    targets: fxShadow,
    x: 5,
    y: -5,
    duration: 800,
    yoyo: true,
    repeat: -1
})

Важно, что тень анимируется независимо от спрайта. Хотя она привязана к нему как фильтр, мы меняем ее внутренние параметры (`x,y`), что создает иллюзию движения источника света или парящего объекта.

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

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

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

const game = new Phaser.Game(config);

После создания экземпляра game движок автоматически загрузит сцену Example, выполнит методы preload и create, и мы увидим анимированный логотип с тенью.

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

Фильтры Post FX в Phaser 3 — это простой способ добавить профессиональные визуальные эффекты без глубокого погружения в шейдеры. Как мы увидели, для добавления динамической тени достаточно нескольких строк кода. Для экспериментов попробуйте изменить параметры addShadow(): увеличьте blur для более мягкой тени, поиграйте с color для стилистических эффектов (например, красная тень для «злой» ауры) или анимируйте параметр darkness. Также можно применять несколько фильтров к одному объекту, комбинируя тень со свечением (addGlow) или цветовой коррекцией.