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

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

Версия 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: { frames: [ 'red', 'blue', 'green', 'yellow' ], cycle: true },
            x: 64,
            y: { start: 500, end: 100, steps: 16 },
            lifespan: 4000,
            accelerationX: 200,
            scale: 0.4,
            frequency: 100
        });
    }
}

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

const game = new Phaser.Game(config);

Разбираем базовый пример

Рассмотрим исходный код. Основная логика эффекта находится в методе create сцены, где создается система частиц и настраивается один эмиттер.

const particles = this.add.particles('flares');
particles.createEmitter({
    frame: { frames: [ 'red', 'blue', 'green', 'yellow' ], cycle: true },
    x: 64,
    y: { start: 500, end: 100, steps: 16 },
    lifespan: 4000,
    accelerationX: 200,
    scale: 0.4,
    frequency: 100
});

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

Настройка ускорения по оси X

Сердце эффекта — параметр accelerationX: 200. Это заставляет каждую созданную частицу изменять свою горизонтальную скорость на 200 пикселя в секунду за каждую секунду ее жизни.

accelerationX: 200

Если начальная горизонтальная скорость частицы равна 0, то через секунду она будет двигаться со скоростью 200 пикселей/сек, через две секунды — 400 пикселей/сек и так далее. Это создает мощный эффект разгона, как будто на частицы действует постоянная сила, толкающая их вправо. Для разгона влево нужно задавать отрицательное значение, например, accelerationX: -150.

Другие ключевые параметры эмиттера

Чтобы понять полную картину, рассмотрим остальные настройки из примера.

x: 64,
y: { start: 500, end: 100, steps: 16 },
lifespan: 4000,
scale: 0.4,
frequency: 100

* x: 64: Все частицы рождаются на фиксированной X-координате (64 пикселя от левого края). * y: { start: 500, end: 100, steps: 16 }: Y-координата точки рождения меняется. Первая частица появится на y=500, следующая — чуть выше, и так 16 раз, пока последняя не появится на y=100. Это создает вертикальную линию источников. * lifespan: 4000: Время жизни каждой частицы — 4000 миллисекунд (4 секунды). За это время ускорение успеет значительно разогнать частицу. * frequency: 100: Частицы испускаются каждые 100 миллисекунд. * scale: 0.4: Размер всех частиц уменьшен до 40% от исходного размера текстуры.

Практическое применение: гравитация и реактивные струи

Ускорение — идеальный инструмент для симуляции физических явлений.

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

createEmitter({
    // ... другие параметры
    accelerationY: 300 // Сила «притяжения» вниз
});

**Реактивная струя или взрыв:** Для эффекта взрыва, где частицы разлетаются из центра и замедляются, можно скомбинировать начальную скорость (speed) с отрицательным ускорением (accelerationX/Y), которое будет их тормозить.

createEmitter({
    speed: { min: 200, max: 400 }, // Начальный разлет
    accelerationX: { min: -50, max: -150 }, // Торможение по X
    accelerationY: { min: -50, max: -150 }  // Торможение по Y
});

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

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

  1. Добавить accelerationY к исходному примеру, чтобы частицы уходили по дуге
  2. Связать ускорение с курсором мыши, чтобы сила «толкала» частицы от точки клика
  3. Использовать случайные диапазоны для accelerationX и accelerationY, чтобы создать хаотичный, турбулентный поток