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

Создание плавных переходов, таких как постепенное появление или стирание объектов, — это частая задача в игровом дизайне. В 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, 0, 0, 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);

Инициализация сцены и загрузка ассетов

Код начинается с создания стандартного класса сцены Phaser. В методе 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');

Здесь задается базовый URL для загрузки и загружаются текстуры 'pyramid' (наш целевой спрайт) и 'bg' (фон).

Создание графики и применение фильтра

В методе create() мы сначала добавляем фоновое изображение. Затем создаем основной спрайт 'pyramid' и немедленно активируем для него систему фильтров.

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

Ключевая строка — вызов addWipe. Первый аргумент (0.1) — это начальное значение прогресса эффекта (от 0 до 1). Следующие три аргумента (0, 0, 1) — это компоненты вектора направления вытирания (x, y, w). В данном случае вектор (0, 0, 1) указывает, что эффект будет двигаться по горизонтальной оси (слева направо), так как компонента `w(которая управляет горизонтальным направлением) равна 1. Фильтр сохраняется в переменнуюfx` для дальнейшей анимации.

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

Чтобы эффект не был статичным, мы анимируем его свойство progress от начального значения до 1 и обратно.

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

Здесь создается твин, который: - targets: fx: воздействует на наш фильтр. - progress: 1: анимирует свойство progress до значения 1 (полное проявление спрайта). - yoyo: true: заставляет анимацию проигрываться в обратном порядке после завершения. - repeat: -1: повторяет анимацию бесконечно. - duration: 2000: длительность одного цикла (туда или обратно) — 2 секунды. - hold: 1000 и repeatDelay: 1000: добавляют паузы в 1 секунду в конце каждого цикла и перед повтором, создавая ритмичный эффект.

Настройка конфигурации игры

Вне класса сцены определяется объект конфигурации игры и создается ее экземпляр.

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

Обратите внимание, что backgroundColor задан темно-синим цветом. Этот цвет будет виден на мгновение, пока загружается фон, но в основном он служит резервным фоном. Параметр parent указывает ID HTML-элемента, в который будет встроен canvas игры.

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

Фильтр Wipe — это мощный и простой инструмент для создания плавных переходов. Изменяя вектор направления в addWipe, можно добиваться эффектов вытирания сверху вниз, по диагонали или даже из центра. Попробуйте поэкспериментировать: привяжите прогресс фильтра к движению игрока для эффекта "тумана войны", используйте несколько фильтров на одном объекте или анимируйте появление целого интерфейса.