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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public');
        this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');
        this.load.json('emitter', 'assets/particles/emitter.json'); // see './particle editor.js'
    }

    create ()
    {
        const particles = this.add.particles('flares');

        particles.createEmitter(this.cache.json.get('emitter'));

    }
}

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

const game = new Phaser.Game(config);

Подготовка ресурсов: атлас и конфигурация

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

this.load.atlas('flares', ...)

, который загружает изображение (

flares.png

) и соответствующий файл данных (

flares.json

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

emitter.json

). Он загружается с помощью

this.load.json('emitter', ...)

. Этот файл содержит все параметры будущей системы частиц: скорость, масштаб, продолжительность жизни, цвет и множество других свойств. После загрузки он помещается в кеш игры.

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

В методе

create()

создается менеджер частиц:

const particles = this.add.particles('flares');

. Аргумент

'flares'

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

particles.createEmitter(this.cache.json.get('emitter'));

. Метод

this.cache.json.get('emitter')

извлекает из кеша готовый объект конфигурации, который был загружен на этапе

preload

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

Преимущества JSON-конфигурации

Использование внешних JSON-файлов дает несколько практических преимуществ. Во-первых, это переиспользование: один и тот же файл конфигурации можно применить к разным эмиттерам в разных сценах. Во-вторых, итеративная разработка: параметры эффекта (например, силу гравитации или частоту испускания) можно быстро менять в текстовом редакторе или визуальном инструменте, не перезапуская сборку проекта. В-третьих, разделение ответственности: художники или VFX-дизайнеры могут настраивать файлы конфигурации, не требуя глубоких знаний JavaScript. Структура JSON-файла соответствует API

ParticleEmitter

в Phaser, что делает процесс интуитивно понятным.

Как выглядит конфигурационный файл

Файл

emitter.json

, на который ссылается код, должен содержать объект со свойствами, соответствующими настройкам эмиттера Phaser. Например,

scale

,

speed

,

lifetime

,

alpha

,

blendMode

и многие другие. Эти свойства можно экспортировать из встроенного редактора частиц Phaser или создать вручную, следуя документации. Важно помнить, что ключи в JSON (например,

frame

) могут ссылаться на имена регионов (frames) из загруженного атласа частиц (

flares

). Таким образом, конфигурация управляет не только поведением, но и внешним видом эффекта.

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

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

  1. Изменить загруженный JSON-файл, чтобы превратить огонь в водяные брызги или снегопад
  2. Создать несколько эмиттеров с разными конфигурациями из одного менеджера частиц
  3. Динамически переключать конфигурации эмиттера в runtime в зависимости от игровых событий (например, усиление заклинания)