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

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

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

Версия 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('background', 'assets/sprites/blur-bg.png');
        this.load.image('phaserlogo', 'assets/sprites/phaser2.png');
    }

    create ()
    {
        this.add.image(400, 300, 'background').setScale(0.7);

        const logo = this.add.image(400, 300, 'phaserlogo');

        logo.enableFilters();
        const fx = logo.filters.external.addBlur();

        this.tweens.add({
            targets: fx,
            strength: 0,
            duration: 2000,
            yoyo: true,
            repeat: -1
        });
    }
}

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

const game = new Phaser.Game(config);

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

Как и в любой сцене Phaser, первым делом необходимо загрузить ресурсы. В методе preload() мы устанавливаем базовый URL для удобства и загружаем два изображения: фоновое и логотип Phaser, который станет нашим основным объектом для экспериментов с фильтром.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('background', 'assets/sprites/blur-bg.png');
    this.load.image('phaserlogo', 'assets/sprites/phaser2.png');
}

Создание объектов и активация фильтров

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

create ()
{
    this.add.image(400, 300, 'background').setScale(0.7);

    const logo = this.add.image(400, 300, 'phaserlogo');
    logo.enableFilters();
}

Добавление и настройка фильтра размытия

После активации фильтров у объекта появляется свойство filters.external. С его помощью можно добавлять различные предустановленные эффекты. В нашем случае мы добавляем фильтр размытия методом addBlur(). Этот метод возвращает экземпляр фильтра (fx), который мы сможем в дальнейшем настраивать и анимировать.

const fx = logo.filters.external.addBlur();

Фильтр Blur по умолчанию имеет некоторую начальную силу размытия. Его основное свойство для управления — strength (сила).

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

Самая интересная часть — динамическое изменение фильтра. Phaser 3 позволяет анимировать свойства фильтров с помощью своей системы твинов, как и любые другие числовые свойства. Мы создаем твин, который плавно меняет свойство strength фильтра от текущего значения до нуля (полная четкость) и обратно, создавая цикличный эффект "проявления".

this.tweens.add({
        targets: fx,        // Цель анимации — наш фильтр
        strength: 0,       // Конечное значение силы размытия
        duration: 2000,    // Длительность анимации в миллисекундах
        yoyo: true,        // Воспроизвести анимацию в обратном порядке
        repeat: -1         // Бесконечное повторение
    });

Конфигурация игры

Код завершается стандартной для Phaser 3 конфигурацией игры, где указывается тип рендерера, размеры холста, цвет фона, родительский HTML-элемент и стартовая сцена.

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

const game = new Phaser.Game(config);

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

Всего несколько строк кода — и статичный спрайт оживает, обретая динамический визуальный эффект. Система фильтров Phaser 3, доступная через filters.external, проста в использовании и мощна. Для экспериментов попробуйте анимировать другие свойства фильтров (например, quality у Blur), комбинировать несколько фильтров на одном объекте или привязывать силу эффекта к игровой логике (скорости персонажа, уровню маны).