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

Система фильтров в Phaser — мощный инструмент для постобработки графики прямо во время выполнения игры. В этом примере мы рассмотрим простой, но эффектный фильтр Threshold (Пороговый), который преобразует полупрозрачные частицы дыма в бинарную маску. Этот приём полезен для создания стилизованных визуальных эффектов, таких как призрачные следы, магические ауры или элементы интерфейса, основанные на частицах.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('smoke', 'assets/particles/smoke0.png');
    }

    create ()
    {
        // Add a smoke emitter.
        const emitter = this.add.particles(640, 360, 'smoke', {
            alpha: { start: 1, end: 0 },
            speed: { min: 100, max: 200 },
            lifespan: 3000,
            quantity: 1
        });

        // Add a threshold filter to the emitter.
        emitter.enableFilters().focusFiltersOverride(640, 360, 1280, 720);
        emitter.filters.internal.addThreshold(0.5);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 1280,
    height: 720,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: Example
};

let game = new Phaser.Game(config);

Подготовка сцены и загрузка ассетов

Вся работа происходит в стандартном классе сцены Phaser. В методе preload мы загружаем одно изображение — текстуру частицы дыма. Обратите внимание, что базовый URL задаётся с помощью setBaseURL, что позволяет загружать ресурсы с удалённого репозитория.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('smoke', 'assets/particles/smoke0.png');

Создание эмиттера частиц

В методе create мы создаём эмиттер частиц в центре экрана. Ключевые параметры настройки: - alpha: Частицы плавно исчезают от полной непрозрачности к полной прозрачности. - speed: Частицам придаётся случайная скорость для создания естественного разлёта. - lifespan: Время жизни частицы — 3 секунды. - quantity: Эмиттер испускает по одной частице за раз.

const emitter = this.add.particles(640, 360, 'smoke', {
    alpha: { start: 1, end: 0 },
    speed: { min: 100, max: 200 },
    lifespan: 3000,
    quantity: 1
});

Активация фильтров и применение порогового значения

Чтобы применить фильтр к эмиттеру, нужно выполнить два шага. Сначала вызываем enableFilters(), который активирует систему фильтров для этого объекта. Затем метод focusFiltersOverride() определяет область (viewport), в координатах которой будет работать фильтр. В данном случае это весь экран игры (1280x720), смещённый так, чтобы его центр совпал с позицией эмиттера (640, 360).

После подготовки добавляем сам фильтр addThreshold(0.5) во внутренний список фильтров эмиттера. Значение 0.5 — это порог. Все пиксели с альфа-каналом (прозрачностью) выше 0.5 станут полностью непрозрачными, а ниже — полностью прозрачными. Это превращает мягкое облако дыма в чёткую, бинарную маску.

emitter.enableFilters().focusFiltersOverride(640, 360, 1280, 720);
emitter.filters.internal.addThreshold(0.5);

Настройка игры

Конфигурация игры стандартна: заданы размеры окна, чёрный фон и указан класс сцены для запуска.

const config = {
    type: Phaser.AUTO,
    width: 1280,
    height: 720,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: Example
};

let game = new Phaser.Game(config);

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

Пороговый фильтр — это отличный способ мгновенно изменить эстетику частиц, превратив их из мягких в графичные. Экспериментируйте с разными значениями порога (от 0.1 до 0.9), чтобы получить желаемую резкость маски. Попробуйте применить этот фильтр не к эмиттеру, а к статическому изображению или спрайту, или комбинируйте его с другими фильтрами из коллекции internal, например, с addGlow для создания светящихся контуров.