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

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

Версия 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');
    }

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

        particles.createEmitter({
            frame: 'blue',
            x: 200,
            y: 300,
            lifespan: 2000,
            speed: { min: 400, max: 600 },
            angle: 330,
            gravityY: 300,
            scale: { start: 0.4, end: 0 },
            quantity: 2,
            blendMode: 'ADD'
        });
    }
}

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

const game = new Phaser.Game(config);

Структура сцены и загрузка атласа

В Phaser 3 вся логика, связанная с конкретным игровым экраном, инкапсулирована в классе Scene. Здесь мы используем две основные функции жизненного цикла: preload() для загрузки ресурсов и create() для их инициализации.

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

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.atlas() загружает атлас и присваивает ему ключ 'flares'. Мы будем использовать его позже для создания системы частиц. Установка базового URL через setBaseURL упрощает указание путей к ресурсам.

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

В функции create() мы создаем саму систему частиц и настраиваем эмиттер — объект, который генерирует и контролирует поток частиц.

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

    particles.createEmitter({
        frame: 'blue',
        x: 200,
        y: 300,
        lifespan: 2000,
        speed: { min: 400, max: 600 },
        angle: 330,
        gravityY: 300,
        scale: { start: 0.4, end: 0 },
        quantity: 2,
        blendMode: 'ADD'
    });
}

Сначала создается менеджер частиц через this.add.particles('flares'). Затем на этом менеджере вызывается метод createEmitter(), который принимает объект конфигурации. Давайте разберем ключевые параметры.

Конфигурация эмиттера: от угла до гравитации

Объект конфигурации эмиттера — это сердце настройки. Каждый параметр отвечает за конкретное свойство частиц.

{
    frame: 'blue',
    x: 200,
    y: 300,
    lifespan: 2000,
    speed: { min: 400, max: 600 },
    angle: 330,
    gravityY: 300,
    scale: { start: 0.4, end: 0 },
    quantity: 2,
    blendMode: 'ADD'
}

* frame: Указывает, какой кадр из атласа 'flares' использовать. В нашем случае — 'blue'. * `x,y`: Координаты точки испускания частиц на сцене. * lifespan: Время жизни частицы в миллисекундах (2000 мс = 2 секунды). * speed: Объект, задающий минимальную и максимальную начальную скорость частицы. Частицы получат случайное значение в этом диапазоне. * angle: **Ключевой параметр.** Задает направление движения частицы в градусах. Ноль градусов — движение вправо. В нашем примере 330 градусов — это направление вправо-вверх под углом. * gravityY: Симуляция гравитации, притягивающая частицы вниз по оси Y. Положительное значение тянет вниз. * scale: Объект, управляющий размером частицы. Здесь она начинает с размера 0.4 и плавно уменьшается до `0` к концу жизни. * quantity: Количество частиц, испускаемых за один "выброс". Эмиттер испускает их постоянно, поэтому мы видим непрерывный поток. * blendMode: Режим наложения 'ADD' делает частицы яркими и светящимися, что идеально подходит для эффектов огня, света или магии.

Настройка игры: объект конфигурации

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

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

const game = new Phaser.Game(config);

Здесь мы указываем: * type: Рендерер (Canvas или WebGL). * width/height: Размер игрового поля. * backgroundColor: Цвет фона. * parent: ID HTML-элемента, в который будет встроен canvas. * scene: Класс основной сцены, которая будет запущена сразу.

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

Вы создали направленный эмиттер частиц, используя всего несколько строк кода. Сочетание параметров angle, speed и gravityY позволяет моделировать разнообразные физические эффекты. **Идеи для экспериментов:** 1. Измените angle на 90 (движение вниз) и gravityY на `0`, чтобы создать эффект прямого дождя. 2. Поиграйте со значением speed, сделав его очень большим, чтобы частицы разлетались как осколки. 3. Добавьте вторую силу через gravityX, чтобы создать ветер и изменить траекторию полета частиц. 4. Испытайте другие режимы наложения, например 'NORMAL', для частиц, которые не должны светиться.