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

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

Визуальные эффекты — ключевой элемент вовлечения игрока. Фильтры в Phaser позволяют создавать сложные переходы с минимальными усилиями. В этой статье мы разберем, как использовать фильтр 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(0.1, 0, 1, 1);

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

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

После активации фильтров мы обращаемся к внутренней коллекции filters.internal и добавляем эффект Wipe с помощью метода addWipe. Первые два аргумента (0.1, 0) задают начальную позицию эффекта (X, Y) в нормализованных координатах (от 0 до 1). Следующие два аргумента (1, 1) определяют его размер (ширина, высота). На данном этапе эффект еще не анимирован.

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

Фильтр Wipe имеет свойство progress, которое контролирует, какая часть изображения видима (значение от 0 до 1). Мы можем анимировать это свойство, используя систему Tween Phaser. В исходнике создается tween, который плавно меняет progress от текущего значения до 1.

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

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

Настройка конфигурации игры

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

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

let game = new Phaser.Game(config);

Цвет фона backgroundColor будет виден только до загрузки и отрисовки фонового изображения в сцене.

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

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