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

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

Эффект размытия боке часто ассоциируется с красивым расфокусированным фоном в фотографии, но в играх он может придать особую глубину и атмосферу визуальным эффектам, таким как частицы. В этом руководстве мы разберём, как применить фильтр боке к эмиттеру частиц в Phaser, чтобы создать иллюзию глубины и расфокусированного свечения. Это простой способ значительно улучшить визуальное восприятие эффектов без сложного программирования шейдеров.

Версия 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('star', 'assets/demoscene/star3.png');
        this.load.image('touhou', 'assets/pics/touhou1.png');
    }

    create ()
    {
        const emitter = this.add.particles(400, 200, 'star', {
            angle: { min: 240, max: 300 },
            speed: { min: 200, max: 300 },
            lifespan: 4000,
            gravityY: 180,
            quantity: 2,
            bounce: 0.4,
            bounds: new Phaser.Geom.Rectangle(-100, -200, 1000, 750)
        });

        emitter.particleBringToTop = false;

        emitter.enableFilters();
        emitter.filters.external.addBokeh(0.5, 10, 0.2);

        this.add.image(650, 600, 'touhou').setOrigin(0.5, 1);
    }
}

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

const game = new Phaser.Game(config);

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

Вся работа начинается в методе preload(). Мы загружаем два изображения: одно для частиц (star), а второе (touhou) — как статичный фон для демонстрации глубины эффекта. Важно отметить, что пример использует метод setBaseURL, чтобы не указывать полный путь к каждому файлу.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('star', 'assets/demoscene/star3.png');
    this.load.image('touhou', 'assets/pics/touhou1.png');
}

Конфигурация игры задаёт базовые параметры, такие как размер холста и цвет фона. Цвет фона #000022 выбран тёмно-синим, чтобы контрастировать со светящимися частицами.

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

В методе create() создаётся система частиц. Эмиттер размещается в точке (400, 200) и использует текстуру star. Ключевые параметры настраивают поведение частиц: - angle и speed: определяют направление и разброс скорости разлёта. - lifespan: время жизни частицы в миллисекундах. - gravityY: сила гравитации, притягивающая частицы вниз. - bounds: прямоугольная область, ограничивающая движение частиц. - bounce: коэффициент отскока от границ.

const emitter = this.add.particles(400, 200, 'star', {
    angle: { min: 240, max: 300 },
    speed: { min: 200, max: 300 },
    lifespan: 4000,
    gravityY: 180,
    quantity: 2,
    bounce: 0.4,
    bounds: new Phaser.Geom.Rectangle(-100, -200, 1000, 750)
});

Строка emitter.particleBringToTop = false; указывает, что новые частицы не должны перемещаться поверх старых. Это важно для корректного наложения фильтров.

Включение и применение фильтра боке

Фильтры в Phaser для систем частиц не активны по умолчанию. Чтобы их использовать, нужно сначала вызвать метод enableFilters() для эмиттера. Это подготавливает систему к применению пост-обработки.

emitter.enableFilters();

После этого мы можем обратиться к коллекции фильтров эмиттера emitter.filters.external и добавить фильтр боке с помощью метода addBokeh. Этот метод принимает три основных параметра: 1. Размер (или радиус) размытия. 2. Качество (количество итераций или проходов). Более высокое значение даёт более гладкий эффект, но требует больше вычислений. 3. Яркость свечения размытых областей.

emitter.filters.external.addBokeh(0.5, 10, 0.2);

Фильтр применяется ко всем частицам эмиттера, создавая эффект мягкого свечения и размытия, имитирующий глубину резкости.

Добавление фонового изображения

Для завершения композиции и усиления ощущения глубины на сцену добавляется статичное изображение. Оно размещается в нижней части экрана и служит точкой фокуса, на фоне которой особенно заметен эффект боке от частиц.

this.add.image(650, 600, 'touhou').setOrigin(0.5, 1);

Метод setOrigin(0.5, 1) устанавливает точку привязки изображения по центру по горизонтали и по нижнему краю по вертикали. Это позволяет удобно позиционировать картинку у нижней границы экрана.

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

Фильтр боке — мощный инструмент для быстрого добавления атмосферы и реалистичности частицам в Phaser. Он превращает обычные спрайты в светящиеся, размытые элементы, создавая иллюзию глубины и расфокусировки. Для экспериментов попробуйте изменить параметры addBokeh: увеличьте радиус для более сильного размытия, поиграйте с яркостью для создания эффекта бликов или примените фильтр к нескольким эмиттерам с разными настройками для сложных визуальных композиций.