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

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

Эффекты фильтров в 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().setLeftToRight();

        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. Здесь мы загружаем изображения, которые будут использоваться в качестве фона и основного спрайта. Важно правильно указать базовый 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 мы размещаем фон и спрайт на сцене. Ключевой шаг — активация фильтров для спрайта с помощью метода .enableFilters(). Это подготавливает спрайт к применению постобработки. После этого мы получаем доступ к внутренней коллекции фильтров объекта.

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

Фильтр addWipe() создает эффект 'шторки', а setLeftToRight() задает направление его движения — слева направо. По умолчанию спрайт полностью скрыт этим фильтром.

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

Сам эффект проявляется при анимации свойства progress фильтра. Значение от 0 до 1 контролирует, какая часть спрайта 'протерта' (видна). Мы используем систему Tween Phaser для плавного изменения этого значения.

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

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

Настройка игрового экземпляра (Config)

Конфигурационный объект определяет основные параметры нашего приложения Phaser. Здесь задается размер холста, цвет фона (который виден до загрузки ресурсов) и корневой класс сцены.

const config = {
    type: Phaser.AUTO, // Автовыбор WebGL или Canvas
    width: 800,
    height: 600,
    backgroundColor: '#0a0067',
    parent: 'phaser-example', // ID DOM-элемента для вставки canvas
    scene: Example // Наша основная сцена
};
let game = new Phaser.Game(config);

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

Фильтр Wipe в Phaser 3 — это мощный и простой инструмент для создания анимированных переходов. Вы можете экспериментировать: изменить направление на setRightToLeft() или setTopToBottom, анимировать свойство progress не через tween, а вручную в методе update в ответ на действия игрока, или комбинировать несколько фильтров на одном спрайте для получения сложных визуальных эффектов.