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

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

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

Версия 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().setBottomToTop();

        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.Scene. В методе preload мы загружаем два изображения: фон (bg) и основной спрайт (pyramid). Обратите внимание на использование 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 мы сначала добавляем фон, затем — спрайт пирамиды в центр экрана. Для применения фильтров к спрайту необходимо вызвать enableFilters(). Это активирует систему фильтров для данного объекта. Далее, через цепочку вызовов filters.internal.addWipe(), мы добавляем конкретный фильтр типа Wipe.

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

Метод setBottomToTop() задает направление проявления: снизу вверх. Без вызова этого метода фильтр не будет иметь начального направления.

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

Сердце эффекта — анимация свойства progress фильтра. Это свойство управляет степенью проявления: от 0 (полностью скрыто) до 1 (полностью показано). Мы используем систему твинов Phaser (this.tweens.add) для плавного изменения progress. Конфигурация твина включает повторение с задержкой, удержание конечного состояния и эффект "йо-йо" (туда-обратно).

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

Здесь duration: 2000 означает, что проявление займет 2 секунды, а repeat: -1 зацикливает анимацию бесконечно.

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

Класс сцены необходимо передать в конфигурацию игры. Мы указываем базовые настройки: тип рендерера (Phaser.AUTO), размеры холста, цвет фона и родительский контейнер в HTML. После этого создается экземпляр игры new Phaser.Game(config), который автоматически запускает сцену.

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

let game = new Phaser.Game(config);

Цвет фона #0a0067 задается на случай, если фоновая картинка не загрузится.

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

Фильтр Wipe — это мощный инструмент для создания плавных переходов в Phaser. Вы можете экспериментировать с другими направлениями (например, setLeftToRight()), комбинировать несколько фильтров на одном спрайте или привязывать progress к игровым событиям, например, к прогрессу загрузки уровня. Попробуйте применить этот эффект к интерфейсу или анимации персонажей.