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

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

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

Версия 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('game', 'assets/tests/gamemock.jpg');
        // this.load.image('touhou', 'assets/pics/touhou1.png');
    }

    create ()
    {
        const container = this.add.container();
        const mock = this.add.image(400, 300, 'game');

        container.add(mock);

        container.enableFilters();
        const fx = container.filters.internal.addBlur(1, 1, 1, 0, 0xffffff, 6);

        this.tweens.add({
            targets: fx,
            strength: 2,
            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 для загрузки ресурсов и загружается одно фоновое изображение. Обратите внимание, что второе изображение закомментировано — это частая практика при экспериментировании с разными ассетами.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('game', 'assets/tests/gamemock.jpg');
    // this.load.image('touhou', 'assets/pics/touhou1.png');
}

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

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

Ключевой момент — вызов container.enableFilters(). Этот метод активирует подсистему фильтров для данного контейнера. Без этого вызова последующие операции с фильтрами будут невозможны.

create ()
{
    const container = this.add.container();
    const mock = this.add.image(400, 300, 'game');
    container.add(mock);
    container.enableFilters();
}

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

После активации фильтров мы получаем доступ к менеджеру container.filters.internal. Метод addBlur создает и добавляет экземпляр фильтра размытия.

Его параметры (согласно API Phaser 3.60) по порядку: 1. quality (качество, число). 2. `x` (сила размытия по оси X, число). 3. `y` (сила размытия по оси Y, число). 4. strength (общая сила эффекта, число). 5. color (цвет свечения, число). 6. steps (количество проходов, число).

В примере создается очень легкое начальное размытие (все параметры, кроме последнего, равны 1) с белым свечением и 6 шагами рендеринга для плавности.

const fx = container.filters.internal.addBlur(1, 1, 1, 0, 0xffffff, 6);

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

Phaser позволяет анимировать свойства самих фильтров. Созданный методом addBlur объект fx присваивается переменной. Это экземпляр фильтра, свойства которого можно изменять.

Система твинов this.tweens.add нацелена (targets) на этот объект fx. В течение 2 секунд (2000 мс) она плавно изменяет его свойство strength от текущего значения (0) до 2, а затем обратно (yoyo: true). Цикл повторяется бесконечно (repeat: -1). В результате сила размытия будет плавно пульсировать, создавая живой, «дышащий» эффект.

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

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

Всего несколько строк кода позволяют добавить динамический эффект размытия к любой группе объектов в Phaser. Этот прием можно использовать для симуляции расфокусировки камеры, подсветки важных элементов HUD или создания атмосферных переходов между состояниями игры. Для экспериментов попробуйте: 1. Анимировать не strength, а параметры `xиy`, чтобы создать эффект направленного "смаза". 2. Применить фильтр не к контейнеру, а к отдельному спрайту или тексту, используя sprite.setPostPipeline. 3. Комбинировать размытие с другими фильтрами из filters.internal, например, добавить шум или цветокоррекцию.