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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    line;

    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 ()
    {
        this.line = new Phaser.Geom.Line(-200, -200, 200, 200);

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

        particles.createEmitter({
            frame: [ 'red', 'green', 'yellow', 'blue' ],
            x: 400, y: 300,
            scale: { start: 0.2, end: 0 },
            alpha: { start: 1, end: 0, ease: 'Quartic.easeOut' },
            speed: { min: -20, max: 20 },
            quantity: 32,
            emitZone: { source: this.line },
            blendMode: 'SCREEN'
        });
    }

    update ()
    {
        Phaser.Geom.Line.Rotate(this.line, 0.03);
    }
}

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

const game = new Phaser.Game(config);

Инициализация линии как геометрического объекта

Ключ к эффекту — использование объекта Phaser.Geom.Line. Он представляет собой отрезок с начальной и конечной точками в координатах (x1, y1, x2, y2). Мы создаем его как свойство сцены, чтобы иметь к нему доступ в методах create и update.

this.line = new Phaser.Geom.Line(-200, -200, 200, 200);

Здесь создается линия, начинающаяся в точке (-200, -200) и заканчивающаяся в (200, 200). Её центр находится в точке (0,0), что упрощает вращение вокруг центра сцены позже.

Настройка эмиттера частиц с линией в качестве источника

Эмиттер настраивается так, чтобы частицы появлялись не в одной точке, а вдоль всей заданной линии. Для этого используется параметр emitZone с типом source.

const particles = this.add.particles('flares');
particles.createEmitter({
    frame: [ 'red', 'green', 'yellow', 'blue' ],
    x: 400, y: 300,
    scale: { start: 0.2, end: 0 },
    alpha: { start: 1, end: 0, ease: 'Quartic.easeOut' },
    speed: { min: -20, max: 20 },
    quantity: 32,
    emitZone: { source: this.line },
    blendMode: 'SCREEN'
});
Важные моменты:
- `emitZone: { source: this.line }` — указывает, что источником эмиссии является объект нашей линии. Частицы будут рождаться в случайных точках вдоль неё.
- `x: 400, y: 300` — это позиция менеджера частиц на сцене. Линия со своими координатами (-200, -200, 200, 200) будет отрисована относительно этой позиции.
- `speed: { min: -20, max: 20 }` — задает случайную скорость частицам в обоих направлениях, создавая эффект разлета.
- `blendMode: 'SCREEN'` — режим наложения, который делает яркие цвета эффекта более «светящимися» на темном фоне.

Анимация линии в игровом цикле

Чтобы линия вращалась, мы используем метод Phaser.Geom.Line.Rotate внутри функции update, которая вызывается каждый кадр.

update ()
{
    Phaser.Geom.Line.Rotate(this.line, 0.03);
}

Этот метод поворачивает линию на заданный угол (в радианах) вокруг её центральной точки. Значение 0.03 на кадр создает плавное непрерывное вращение. Поскольку эмиттер использует линию как source, все новые частицы сразу же начинают появляться вдоль уже повернутой линии, создавая динамический вихревой след.

Идеи для модификации и экспериментов

Используя эту технику, можно создавать множество различных эффектов.

// 1. Изменение формы линии со временем
update() {
    // Плавное изменение длины линии (пульсация)
    Phaser.Geom.Line.SetToAngle(this.line, 0, 0, this.line.length + Math.sin(this.time.now * 0.001), this.line.angle);
}
// 2. Использование другой геометрической фигуры
// Создание кольца из частиц с помощью круга
const circle = new Phaser.Geom.Circle(0, 0, 150);
// В конфигурации эмиттера:
emitZone: { type: 'edge', source: circle, quantity: 64 }
// 3. Связывание линии с движением игрового объекта
// Например, с спрайтом игрока
update() {
    // Обновляем позицию линии, чтобы она следовала за игроком
    Phaser.Geom.Line.SetToAngle(this.line, player.x, player.y, 100, this.line.angle + 0.02);
}

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

Использование геометрических объектов в качестве динамического источника для системы частиц — мощный инструмент в арсенале геймдев-художника и программиста. Как мы увидели, с помощью всего нескольких строк кода можно заставить частицы следовать по вращающейся линии, создавая сложные и привлекательные визуальные паттерны. Для дальнейших экспериментов попробуйте: 1. Заменить линию на Phaser.Geom.Rectangle или Phaser.Geom.Triangle. 2. Анимировать не только вращение, но и длину, толщину или кривизну источника (например, используя Phaser.Curves.Path). 3. Привязать несколько эмиттеров к разным линиям, чтобы создать составной эффект, например, вращающуюся галактику или магический круг.