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

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

Эффекты постобработки (PostFX) в 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');

        this.pyramid = this.add.image(400, 300, 'pyramid');
        this.fx = this.pyramid.postFX.addWipe(0.1, 1, 1);

        this.fadeOutPyramid();
    }

    fadeInPyramid()
    {
        this.fx.progress = 0;
        this.fx.reveal = true;
        
        this.tweens.add({
            targets: this.fx,
            progress: 1,
            duration: 2000,
            callbackScope: this,
            onComplete: () => {
                this.fadeOutPyramid();
            }
        });
    }

    fadeOutPyramid()
    {
        this.fx.progress = 0;
        this.fx.reveal = false;

        this.tweens.add({
            targets: this.fx,
            progress: 1,
            duration: 2000,
            callbackScope: this,
            onComplete: () => {
                this.fadeInPyramid();
            }
        });
    }
}

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

let game = new Phaser.Game(config);

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

В начале примера мы создаём класс сцены Example. В методе preload загружаются необходимые изображения: фон (bg) и спрайт пирамиды (pyramid). Обратите внимание на использование this.load.setBaseURL, который устанавливает базовый 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');
}

Создание сцены и применение эффекта Wipe

В методе create мы добавляем фон и спрайт пирамиды в центр экрана. Ключевой момент — применение PostFX-эффекта Wipe к спрайту pyramid. Это делается с помощью метода postFX.addWipe, который возвращает объект эффекта (fx). Параметры метода определяют начальное состояние эффекта.

create ()
{
    this.add.image(400, 300, 'bg');
    this.pyramid = this.add.image(400, 300, 'pyramid');
    this.fx = this.pyramid.postFX.addWipe(0.1, 1, 1);
    this.fadeOutPyramid();
}

Эффект Wipe работает по принципу маски, которая "стирает" или "проявляет" изображение в зависимости от значения progress (от 0 до 1) и флага reveal.

Анимация исчезновения (fadeOutPyramid)

Метод fadeOutPyramid отвечает за анимацию скрытия пирамиды. Сначала сбрасывается прогресс эффекта (progress = 0), а флаг reveal устанавливается в false. Это означает, что при увеличении progress изображение будет стираться. Затем создаётся твин, который плавно увеличивает progress до 1 за 2000 миллисекунд. По завершении твина вызывается метод fadeInPyramid, создавая циклическую анимацию.

fadeOutPyramid()
{
    this.fx.progress = 0;
    this.fx.reveal = false;
    this.tweens.add({
        targets: this.fx,
        progress: 1,
        duration: 2000,
        callbackScope: this,
        onComplete: () => {
            this.fadeInPyramid();
        }
    });
}

Анимация появления (fadeInPyramid)

Метод fadeInPyramid зеркален предыдущему. Он также сбрасывает progress, но устанавливает reveal в true. В этом режиме увеличение progress приводит к постепенному проявлению изображения из прозрачности. После завершения твина цепочка замыкается вызовом fadeOutPyramid.

fadeInPyramid()
{
    this.fx.progress = 0;
    this.fx.reveal = true;
    this.tweens.add({
        targets: this.fx,
        progress: 1,
        duration: 2000,
        callbackScope: this,
        onComplete: () => {
            this.fadeOutPyramid();
        }
    });
}

Использование callbackScope: this гарантирует, что внутри колбэка onComplete контекст this будет указывать на экземпляр сцены.

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

Объект config определяет основные настройки игры: тип рендерера, размеры холста, цвет фона и класс сцены. Экземпляр Phaser.Game инициализирует игру с этой конфигурацией.

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

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

Эффект Wipe PostFX предоставляет простой, но эффективный способ анимировать появление и исчезновение объектов в Phaser 3, управляя всего двумя свойствами: progress и reveal. Для экспериментов попробуйте изменить направление стирания, передав другие значения в addWipe, применить эффект к группе спрайтов или связать прогресс эффекта с действиями игрока (например, нажатием клавиши). Также можно комбинировать Wipe с другими PostFX-эффектами для создания более сложных визуальных переходов.