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

Динамические эффекты частиц, которые следуют за движущимися объектами, — это мощный способ добавить визуальную глубину игре. Вместо статичного дыма или огня вы можете создать эффекты выхлопа за космическим кораблём, пыль за бегущим персонажем или магический след за заклинанием. Этот подход превращает простые частицы в живую, интерактивную часть игрового мира. В этой статье мы разберём пример из официальной документации 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.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

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

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

        const emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        const logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

Настройка сцены и загрузка ресурсов

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

Ключевой момент — использование this.load.setBaseURL. Это устанавливает базовый URL для всех последующих загрузок, что позволяет указывать только относительные пути к файлам.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('sky', 'assets/skies/space3.png');
    this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    this.load.image('red', 'assets/particles/red.png');
}

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

В методе create мы сначала добавляем фоновое изображение. Затем создаём систему частиц.

this.add.particles('red') создаёт менеджер частиц, который будет использовать текстуру red для всех своих эмиттеров. Это эффективно, если вам нужно много одинаковых частиц.

Далее, на этом менеджере мы создаём конкретный эмиттер с помощью createEmitter. Конфигурация эмиттера определяет поведение частиц: * speed: 100 — начальная скорость разлёта частиц. * scale: { start: 1, end: 0 } — частицы будут плавно уменьшаться от полного размера до нуля. * blendMode: 'ADD' — режим наложения «ADD» делает частицы яркими и светящимися, что идеально подходит для эффектов огня, звёзд или энергии.

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

const emitter = particles.createEmitter({
    speed: 100,
    scale: { start: 1, end: 0 },
    blendMode: 'ADD'
});

Создание и настройка физического спрайта-цели

Теперь создадим спрайт, за которым будут следовать частицы. Мы добавляем его не просто как изображение, а как физическое тело, используя Arcade Physics.

this.physics.add.image создаёт изображение с прикреплённым к нему физическим телом. Мы задаём ему начальную позицию (400, 100).

Затем настраиваем его движение: * setVelocity(100, 200) — задаёт начальную скорость по осям X и Y. * setBounce(1, 1) — устанавливает коэффициент упругости (1 — идеальный отскок, без потерь энергии). * setCollideWorldBounds(true) — включает столкновение с границами мира (экрана), что заставляет спрайт отскакивать от краёв.

const logo = this.physics.add.image(400, 100, 'logo');

logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);

Привязка эмиттера к спрайту

Вот самый важный шаг — заставить эмиттер следовать за движущимся спрайтом. Для этого у объекта emitter есть метод startFollow.

emitter.startFollow(logo) делает две вещи: 1. Устанавливает источник испускания частиц в текущие координаты спрайта logo. 2. Автоматически обновляет позицию источника каждый кадр, синхронизируя его с движением спрайта.

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

emitter.startFollow(logo);

Конфигурация игры и физики

Работа физики и частиц возможна благодаря правильной глобальной конфигурации игры (config).

Обратите внимание на секцию physics: * default: 'arcade' — активирует простую и быструю систему Arcade Physics. * gravity: { y: 200 } — задаёт гравитацию, направленную вниз. В нашем примере она не влияет на спрайт, так как он отскакивает от границ, но может влиять на поведение частиц, если у них тоже включена физика (в данном примере у частиц физики нет).

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

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

Метод startFollow — это элегантный и мощный инструмент для создания динамических визуальных эффектов, привязанных к игровым объектам. Он избавляет от необходимости вручную обновлять позицию эмиттера в каждом кадре. **Идеи для экспериментов:** 1. Попробуйте изменить параметры эмиттера: lifetime (время жизни частицы), frequency (частота испускания), angle (направление разлёта). 2. Добавьте несколько эмиттеров с разными текстурами и настройками, следующих за одним объектом, чтобы создать сложный составной эффект (например, огонь + дым). 3. Используйте followOffset (доступен в методе startFollow) для смещения источника частиц относительно центра спрайта, чтобы создать эффект выхлопа из задней части корабля.