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

Эффекты движения частиц по сложным траекториям оживляют игровой мир, подчеркивая магические заклинания, следы пуль или направленные взрывы. В этом примере мы разберем, как заставить частицы не просто разлетаться, а целенаправленно двигаться к заданной точке, используя параметры `moveToX` и `moveToY` эмиттера 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');

        const rect = new Phaser.Geom.Rectangle(0, 0, 1600, 100);

        const emitter = particles.createEmitter({
            frame: { frames: [ 'red', 'green', 'blue' ], cycle: true, quantity: 2 },
            x: -400,
            y: -100,
            moveToX: 400,
            moveToY: 600,
            lifespan: 1000,
            scale: 0.5,
            quantity: 4,
            _frequency: 20,
            blendMode: 'ADD',
            emitZone: { source: rect }
        });

        console.log(emitter);
    }
}

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

const game = new Phaser.Game(config);

Подготовка атласа частиц

Для работы с частицами в Phaser 3 требуется текстура. В данном примере используется предзагруженный атлас 'flares', содержащий несколько спрайтов в виде цветных бликов. Загрузка происходит в методе preload сцены.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');

Здесь setBaseURL задает базовый путь, а load.atlas загружает изображение и JSON-файл с данными о кадрах. Атлас 'flares' станет источником текстур для наших частиц.

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

В методе create мы создаем систему частиц (Particle Manager) и в ней настраиваем эмиттер. Система управляет рендерингом и обновлением всех своих эмиттеров.

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

Затем создается геометрическая фигура Rectangle, которая будет использоваться как зона испускания (emit zone). Ее размеры (1600x100) задают широкую горизонтальную линию вверху экрана, откуда будут появляться частицы.

const rect = new Phaser.Geom.Rectangle(0, 0, 1600, 100);

Конфигурация эмиттера с moveTo

Ключевой объект — эмиттер, создаваемый методом createEmitter. Его конфигурация определяет поведение и внешний вид частиц. Обратите внимание на параметры moveToX и moveToY.

const emitter = particles.createEmitter({
    frame: { frames: [ 'red', 'green', 'blue' ], cycle: true, quantity: 2 },
    x: -400,
    y: -100,
    moveToX: 400,
    moveToY: 600,
    lifespan: 1000,
    scale: 0.5,
    quantity: 4,
    _frequency: 20,
    blendMode: 'ADD',
    emitZone: { source: rect }
});

Параметры `xиyзадают начальную позицию для расчетов движения. Частицы появляются в зоне, заданнойemitZone. Сразу после рождения они начинают движение к целевой точке, определеннойmoveToXиmoveToY` (400, 600). Это создает эффект направленного потока.

frame настраивает анимацию кадров: частицы будут циклически (cycle: true) принимать вид красного, зеленого и синего бликов. quantity: 4 и _frequency: 20 определяют, что за один выброс генерируется 4 частицы, а сами выбросы происходят часто. blendMode: 'ADD' обеспечивает яркое, аддитивное наложение цветов.

Понимание жизненного цикла

Параметр lifespan (в миллисекундах) критически важен для эффекта moveTo. Он определяет, сколько времени частица будет лететь к цели.

lifespan: 1000

Если время жизни слишком мало, частица может исчезнуть, не долетев до точки (moveToX, moveToY). Если слишком велико — она достигнет цели и продолжит движение за ее пределы. Подбор lifespan и скорости (задаваемой через speed или неявно через расстояние и время) позволяет точно контролировать траекторию.

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

Параметры moveToX/Y превращают хаотичный поток частиц в управляемый луч или сходящийся поток, идеальный для анимации прицеливания, телепортации или притягивания ресурсов. Для экспериментов попробуйте изменить emitZone на Phaser.Geom.Circle, чтобы частицы вылетали из окружности, или анимируйте целевые координаты (moveToX, moveToY) во времени, создавая эффект 'преследующего' взрыва.