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

Создание плавных переходов, таких как появление или исчезновение объектов, — частая задача в разработке игр. Например, для показа титров, открытия новых локаций или визуальных эффектов повреждений. В Phaser 3 для этого существует встроенный фильтр `Wipe`, который позволяет анимировать «стирание» спрайта в любом направлении. Эта статья покажет, как подключить и настроить этот фильтр, управляя им через систему анимации `Tweens` для создания циклических эффектов.

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

        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() мы загружаем два изображения: фоновую картинку (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 и позиционируем его в центре экрана.

Активация фильтров и добавление Wipe

Чтобы применить к спрайту фильтры, необходимо сначала вызвать метод enableFilters(). Он подготавливает спрайт для работы с системой фильтров Phaser и возвращает менеджер фильтров.

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

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

После выполнения этого кода спрайт будет полностью невидимым, так как фильтр Wipe начинает свою работу с progress: 0.

Анимация фильтра с помощью Tweens

Ключевое свойство фильтра Wipe — progress. Его значение от 0 до 1 определяет, какая часть спрайта видима. При progress: 0 спрайт полностью стерт (невидим), при progress: 1 — полностью проявлен.

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

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

В результате спрайт будет плавно появляться слева направо за 2 секунды, оставаться видимым 1 секунду, затем исчезать в обратном направлении за 2 секунды, и после паузы в 1 секунду цикл повторится.

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

Код завершается стандартной конфигурацией экземпляра игры Phaser. Ключевой параметр scene указывает на наш класс Example.

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

let game = new Phaser.Game(config);

Цвет фона backgroundColor задан темно-синим (#0a0067). Он будет виден только если фоновое изображение не полностью покрывает холст или имеет прозрачные области. Параметр parent указывает ID HTML-элемента, в который будет встроен игровой холст.

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

Фильтр Wipe в Phaser — это мощный и простой в использовании инструмент для создания плавных переходов появления и исчезновения. Управляя свойством progress через Tweens, вы можете легко настраивать длительность, направление и характер анимации. **Идеи для экспериментов:** 1. Попробуйте другие направления стирания: setTopToBottom() для вертикального открытия. 2. Свяжите анимацию progress с пользовательским вводом (например, движением мыши) для интерактивного эффекта. 3. Примените фильтр Wipe не к спрайту, а к целой группе объектов или тексту, чтобы создавать сложные композиционные переходы. 4. Комбинируйте Wipe с другими фильтрами, например, Glow или Bloom, для создания более ярких визуальных эффектов.