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

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

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

Версия 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, 1, 0, 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);

Загрузка ресурсов и настройка сцены

В методе preload мы загружаем два изображения: фоновую текстуру и спрайт пирамиды. Обратите внимание, что базовый URL задается через this.load.setBaseURL, что удобно для загрузки ресурсов с удаленного сервера.

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 сначала добавляется фоновое изображение, а затем основной спрайт — пирамида. Оба размещаются в центре холста с координатами (400, 300).

Включение фильтров и добавление стирающего эффекта

Ключевой момент — активация системы фильтров для спрайта. Вызов sprite.enableFilters() делает спрайт готовым к применению визуальных эффектов. После этого мы получаем доступ к внутреннему списку фильтров через свойство filters.internal и добавляем в него новый стирающий фильтр методом addWipe.

const fx = sprite.enableFilters().filters.internal.addWipe(0.1, 1, 0, 1);

Параметры addWipe определяют начальное состояние эффекта: - Первый аргумент (0.1) — это progress (прогресс), значение от 0 до 1, где 0 — спрайт полностью стерт, 1 — спрайт полностью виден. Установка 0.1 означает, что спрайт изначально почти скрыт. - Следующие три аргумента (1, 0, 1) — это, соответственно, red, green, blue компоненты цвета, которым заливается стертая область. В данном случае это чистый синий цвет (RGB: 1, 0, 1).

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

Чтобы фильтр ожил, мы анимируем его свойство progress. Для этого используется система твинов Phaser. Мы создаем твин, который плавно меняет progress от текущего значения (0.1) до 1, а затем обратно, создавая эффект плавного проявления и исчезновения спрайта.

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

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

Конфигурация игры

Код завершается стандартной конфигурацией игры Phaser. Обратите внимание, что цвет фона backgroundColor задан, но в данном примере он перекрывается загруженным фоновым изображением 'bg'.

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

let game = new Phaser.Game(config);

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

Стирающий фильтр — это простой, но эффективный способ добавить динамики в вашу игру. Вы можете экспериментировать с параметрами addWipe, например, меняя цвет заливки или начальный прогресс. Попробуйте применить фильр не к спрайту, а к целой группе объектов или тексту. Также можно анимировать другие свойства фильтра или комбинировать несколько фильтров на одном объекте для создания сложных визуальных эффектов.