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

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

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

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

        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 3. В методе preload мы загружаем два изображения: фон (bg) и спрайт (pyramid), которые будут использоваться для демонстрации эффекта. Обратите внимание, что базовый URL задается для удобства, чтобы использовать ресурсы из репозитория примеров.

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(). Это обязательный шаг, без него фильтры применяться не будут.

create ()
{
    this.add.image(400, 300, 'bg');
    const sprite = this.add.image(400, 300, 'pyramid');
    const fx = sprite.enableFilters().filters.internal.addWipe().setTopToBottom();
}

Цепочка вызовов после enableFilters() делает следующее: 1. filters.internal — получает доступ к внутреннему менеджеру фильтров объекта. 2. addWipe() — создает и добавляет к спрайту фильтр типа "стирание". 3. setTopToBottom() — настраивает фильтр на направление стирания сверху вниз. Фильтр Wipe также поддерживает другие направления, например, setBottomToTop() или setLeftToRight().

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

Фильтр Wipe управляется свойством progress (прогресс), которое изменяется от 0 до 1. Когда progress равен 0, спрайт полностью виден (эффект не применен). Когда progress достигает 1, спрайт полностью "стерт" в заданном направлении.

Для анимации этого свойства используется система твинов Phaser (this.tweens.add). Конфигурация твина заставляет прогресс циклически меняться.

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

Благодаря параметру yoyo: true, после стирания спрайта сверху вниз (за 2 секунды до progress: 1), он будет плавно возвращаться обратно (за следующие 2 секунды до progress: 0). Паузы (hold, repeatDelay) добавляют драматичности эффекту.

Настройка игры (config)

Конфигурационный объект игры стандартен. Важно убедиться, что размеры canvas (width, height) соответствуют координатам, на которых размещаются изображения (в нашем случае центр — 400x300).

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

let game = new Phaser.Game(config);

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

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