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

В разработке игр часто нужно менять визуальные эффекты 'на лету' – например, превратить дождь в огненный дождь по клику игрока. Статический конфиг эмиттера частиц для этого не подходит. В этой статье разберем метод `setConfig()`, который позволяет полностью переопределить параметры работающего эмиттера, не создавая новый объект. Это полезно для оптимизации (меньше объектов) и создания динамичных, реагирующих на действия игрока эффектов.

Версия 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.atlas('blocks', 'assets/sprites/blocks.png', 'assets/sprites/blocks.json');
    }

    create ()
    {
        const emitter = this.add.particles(100, 300, 'blocks');

        this.input.once('pointerdown', () => {

            emitter.setConfig({
                frame: 'redmonster',
                lifespan: 5000,
                angle: { min: -30, max: 30 },
                speed: 150,
                frequency: 200
            });

        });

        window.emma = emitter;
    }
}

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

const game = new Phaser.Game(config);

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

В примере создается простая сцена. В методе preload() загружается атлас спрайтов blocks, который будет использоваться для частиц.

Затем, в create(), создается сам эмиттер частиц. Изначально он использует весь атлас в качестве текстуры и начинает испускать частицы с координат (100, 300) со значениями по умолчанию.

const emitter = this.add.particles(100, 300, 'blocks');

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

Динамическое изменение конфигурации

Основная логика заключена в обработчике события клика (pointerdown). По первому клику мыши вызывается метод emitter.setConfig(). Этот метод полностью заменяет текущую конфигурацию эмиттера на новую.

emitter.setConfig({
    frame: 'redmonster',
    lifespan: 5000,
    angle: { min: -30, max: 30 },
    speed: 150,
    frequency: 200
});

Что происходит после вызова: 1. Эмиттер мгновенно прекращает испускать частицы по старому конфигу. 2. Все текущие (старые) частицы продолжают жить и анимироваться до конца своего lifespan. 3. Эмиттер немедленно начинает испускать новые частицы, используя новый набор параметров.

Важно: метод setConfig() не добавляет параметры к старым, а выполняет полную замену. Все параметры, не указанные в новом объекте конфига, будут сброшены до значений по умолчанию для эмиттера.

Разбор параметров нового конфига

Давайте подробно рассмотрим, как новый конфиг меняет поведение эффекта.

- frame: 'redmonster': Частицы теперь используют не весь атлас, а конкретный кадр (спрайт) с именем redmonster из загруженного атласа.

frame: 'redmonster'

- lifespan: 5000: Время жизни каждой частицы увеличено до 5 секунд (5000 миллисекунд). Частицы будут дольше оставаться на экране.

lifespan: 5000

- angle: { min: -30, max: 30 }: Направление разлета частиц ограничено конусом в 60 градусов (от -30 до +30 относительно начального угла эмиттера). Это создает более сфокусированный поток.

angle: { min: -30, max: 30 }

- speed: 150: Скорость движения частиц задана явно и является постоянной для всех (так как не используется min/max).

speed: 150

- frequency: 200: Новая частица будет создаваться каждые 200 миллисекунд. Это уменьшает интенсивность потока по сравнению со значением по умолчанию.

frequency: 200

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

Отличия от `setEmitterConfig` и создание с нуля

В Phaser 3 также существует метод ParticleEmitter.setEmitterConfig(). Важно не путать их: - setConfig() (используется в примере) – метод конкретного экземпляра эмиттера (ParticleEmitter), созданного через this.add.particles(). - setEmitterConfig() – статический метод класса Phaser.GameObjects.Particles.ParticleEmitter, который используется для предварительного определения конфигурации, передаваемой в фабричный метод.

Почему setConfig() лучше создания нового эмиттера? Создание нового объекта this.add.particles() каждый раз, когда нужно изменить эффект, приводит к накоплению мусора (если старый эмиттер не уничтожается) и лишним вычислениям. setConfig() меняет поведение существующего объекта, что эффективнее для производительности, особенно на мобильных устройствах.

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

Метод setConfig() – мощный инструмент для создания живых, интерактивных визуальных эффектов в Phaser 3. Он позволяет одному эмиттеру выполнять роль многих, меняя свой облик и поведение по событию в игре. Для экспериментов попробуйте: 1. Вызывать setConfig() многократно по разным событиям (таймер, столкновение, сбор предмета). 2. Комбинировать с методами управления жизненным циклом, например, emitter.stop() перед конфигурацией и emitter.start() после. 3. Анимировать изменение параметров, плавно меняя значения в новом конфиге в цикле, чтобы создать трансформацию эффекта.