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

Визуальные эффекты — важная часть игровой атмосферы. Часто нужно создать не просто хаотичный поток частиц, а упорядоченную структуру, например, строй рыб или линию пуль. В Phaser Particle Emitter для этого есть мощный инструмент — свойство `steps` (шаги). В этой статье мы разберем, как с помощью конфигурации `steps` для свойств `x`, `y`, `speedX` и `speedY` можно создавать частицы с дискретным, а не плавным распределением по позиции и скорости. Это позволяет легко генерировать эффекты, где объекты появляются не в случайной точке, а на строго заданных линиях или с определенным набором скоростей.

Версия 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.image('bg', 'assets/ui/undersea-bg.png');
        this.load.spritesheet('fish', 'assets/sprites/fish-136x80.png', { frameWidth: 136, frameHeight: 80 });
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

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

        particles.createEmitter({
            frame: { frames: [ 0, 1, 2 ], cycle: true, quantity: 4 },
            x: -70,
            y: { start: 100, end: 500, steps: 8 },
            lifespan: 5000,
            speedX: { start: 200, end: 400, steps: 8 },
            quantity: 4,
            frequency: 500
        });
    }
}

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

const game = new Phaser.Game(config);

Идея за свойством `steps`

Обычно, когда вы задаете для эмиттера диапазон значений, например, y: { start: 100, end: 500 }, частицы будут появляться со случайной координатой Y в пределах от 100 до 500. Это создает плавно заполненную вертикальную полосу.

Свойство steps кардинально меняет это поведение. Оно разбивает диапазон от start до end на указанное количество равных отрезков. Каждая новая частица (или группа частиц за один выброс) будет появляться не в случайной точке диапазона, а на границе одного из этих отрезков, перебирая их по порядку.

Таким образом, вместо плавного градиента мы получаем дискретный набор возможных позиций или значений скорости.

Разбираем пример: косяк рыб

Рассмотрим код из примера. Наш эмиттер создает частицы из спрайтшита с рыбами.

particles.createEmitter({
    frame: { frames: [ 0, 1, 2 ], cycle: true, quantity: 4 },
    x: -70,
    y: { start: 100, end: 500, steps: 8 },
    lifespan: 5000,
    speedX: { start: 200, end: 400, steps: 8 },
    quantity: 4,
    frequency: 500
});
Ключевые параметры:
*   `y: { start: 100, end: 500, steps: 8 }`: Координата Y для появления частицы. Диапазон от 100 до 500 пикселей разбит на 8 шагов. Это означает, что рыбы будут появляться только на одной из 9 горизонтальных линий (включая начальную и конечную точки). Первая группа из 4 рыб появится на Y=100, следующая — на Y=150, и так далее до Y=500, после чего цикл повторится.
*   `speedX: { start: 200, end: 400, steps: 8 }`: Скорость по оси X. Аналогично, будет использоваться не случайное значение от 200 до 400, а одно из 9 дискретных. Первая группа полетит со скоростью 200, следующая — 225, и т.д.
*   `x: -70`: Все частицы появляются за левой границей экрана (так как ширина холста 800, а центр в 400).
*   `quantity: 4` и `frequency: 500`: За каждые 500 мс эмиттер создает 4 рыбы одновременно на одной и той же линии Y и с одинаковой скоростью X.

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

Практическое применение и вариации

Этот подход открывает несколько практических сценариев:

1. **Создание сеток или линий:** Идеально для эффектов «стены огня», «завесы дождя» или стройных рядов вражеских кораблей, выплывающих на экран. 2. **Контроль сложности:** Вместо расчета позиций вручную в коде, вы настраиваете их декларативно в конфиге эмиттера. 3. **Комбинирование свойств:** Можно применить steps только к одному свойству. Например, сделать фиксированную скорость, но шаговое изменение позиции, или наоборот.

Вот как может выглядеть конфигурация для вертикальной линии пуль, вылетающих из пушки в разных направлениях:

this.add.particles('bullet').createEmitter({
    x: 400,
    y: { start: 550, end: 570, steps: 3 },
    angle: { start: 260, end: 280, steps: 5 },
    speed: 300,
    frequency: 250
});

В этом случае пули будут вылетать из трех точек у низа экрана (Y: 550, 560, 570) и под одним из пяти заданных углов, создавая веерообразный залп.

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

Свойство steps в конфигурации эмиттера частиц — это мощный инструмент для создания структурированных, неслучайных визуальных эффектов. Оно заменяет плавные градиенты на дискретные шаги, позволяя легко генерировать линии, сетки и упорядоченные последовательности объектов. **Идеи для экспериментов:** 1. Попробуйте создать эффект «лестницы» или «эскалатора», используя steps одновременно для `xиy`. 2. Скомбинируйте steps для скорости с плавным (steps: false) изменением цвета или масштаба частиц. 3. Используйте разное количество шагов для разных свойств (например, 5 шагов для позиции и 3 для скорости) и посмотрите, как меняется паттерн появления частиц.