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

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

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

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

    create ()
    {
        this.add.image(400, 300, 'bg');

        const sprite = this.add.image(400, 300, 'pyramid');

        const fx = sprite.enableFilters().filters.internal.addWipe(0.1, 1, 1, 1);

        this.tweens.add({
            targets: fx,
            progress: 1,
            repeatDelay: 1000,
            hold: 1000,
            yoyo: true,
            repeat: -1,
            duration: 2000
        });
    }
}

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

let game = new Phaser.Game(config);

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

Вся работа начинается в методе preload. Здесь мы загружаем две текстуры: фоновое изображение и спрайт пирамиды, который будет подвергнут эффекту. Обратите внимание на использование setBaseURL для указания базового пути к ресурсам.

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

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

В методе create мы сначала добавляем фоновое изображение. Затем создаем основной спрайт pyramid. Ключевой момент — активация системы фильтров для этого спрайта с помощью метода enableFilters(). После этого мы получаем доступ к внутреннему менеджеру фильтров filters.internal.

create ()
{
    this.add.image(400, 300, 'bg');

    const sprite = this.add.image(400, 300, 'pyramid');
    const fx = sprite.enableFilters().filters.internal.addWipe(0.1, 1, 1, 1);
}

Метод addWipe создает и добавляет фильтр Wipe, возвращая его экземпляр. Первый аргумент (0.1) — начальное значение прогресса эффекта (от 0 до 1). Остальные параметры (1, 1, 1) — это значения для красного, зеленого и синего каналов цвета, которые в данном случае оставлены по умолчанию (белый).

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

Чтобы фильтр ожил, нужно анимировать его свойство progress. Значение `0означает, что спрайт полностью скрыт (стёрт), а значение1` — что он полностью отображён. В примере используется система Tween для плавного изменения этого свойства.

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

Этот твин создает циклическую анимацию: спрайт плавно появляется снизу вверх за 2 секунды, затем держится 1 секунду, исчезает за 2 секунды, снова держится 1 секунду, и цикл повторяется бесконечно.

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

Код завершается стандартной конфигурацией игры Phaser, в которой указывается наша сцена Example.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#0a0067', // Цвет фона, если фоновая картинка не загрузится
    parent: 'phaser-example',
    scene: Example
};

let game = new Phaser.Game(config);

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

Фильтр Wipe — это простой и эффективный способ добавить динамики в отображение объектов. Поэкспериментируйте с направлением эффекта, меняя начальное значение progress. Попробуйте привязать анимацию не к циклу, а к игровым событиям, например, к клику по объекту или достижению определённой точки на карте. Также можно изменить цвет параметров addWipe для создания цветного градиентного эффекта вместо стандартного белого.