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

Система частиц в Phaser — мощный инструмент для создания эффектов огня, дыма, магии и многого другого. Но что, если вы хотите, чтобы частицы не просто летели по прямой, а притягивались к определённой точке, как планеты к звезде? В этой статье мы разберём, как создать гравитационный колодец (Gravity Well) для эмиттера частиц, чтобы добавить динамики и реализма вашим визуальным эффектам. Это особенно полезно для симуляции чёрных дыр, магических воронок или просто интересных траекторий движения.

Версия 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 well = particles.createGravityWell({
            x: 400,
            y: 300,
            power: 3,
            epsilon: 100,
            gravity: 100
        });

        const emitter = particles.createEmitter({
            frame: [ 'red', 'green' ],
            x: 600,
            y: 400,
            lifespan: 4000,
            speed: 200,
            scale: { start: 0.7, end: 0 },
            blendMode: 'ADD'
        });
    }
}

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

const game = new Phaser.Game(config);

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

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

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 загружает сам атлас: первый аргумент ('flares') — это ключ ресурса, второй — путь к изображению, третий — путь к JSON-файлу с данными о кадрах внутри атласа.

Создание менеджера частиц и гравитационного колодца

В методе create мы создаём менеджер частиц, который будет управлять всеми эмиттерами и силами в сцене. Затем создаём гравитационный колодец — область, которая влияет на движение частиц.

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

    const well = particles.createGravityWell({
        x: 400,
        y: 300,
        power: 3,
        epsilon: 100,
        gravity: 100
    });
}

Метод this.add.particles('flares') создаёт и возвращает менеджер частиц, использующий загруженный атлас 'flares'. Далее createGravityWell создаёт колодец с параметрами: - `x,y` — координаты центра притяжения. - power — сила притяжения (положительное значение притягивает, отрицательное — отталкивает). - epsilon — минимальное расстояние, на котором сила перестаёт увеличиваться (нужно для избегания бесконечно больших значений при приближении частицы к центру). - gravity — общий множитель силы гравитации (масштабирует эффект).

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

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

const emitter = particles.createEmitter({
        frame: [ 'red', 'green' ],
        x: 600,
        y: 400,
        lifespan: 4000,
        speed: 200,
        scale: { start: 0.7, end: 0 },
        blendMode: 'ADD'
    });

Метод createEmitter настраивает эмиттер: - frame — массив ключей кадров из атласа (частицы будут случайного красного или зелёного цвета). - `x,y` — начальная точка испускания частиц. - lifespan — время жизни частицы в миллисекундах (4000 мс = 4 секунды). - speed — начальная скорость частицы (в пикселях в секунду). - scale — объект, задающий начальный и конечный масштаб частицы (здесь она уменьшается с 0.7 до 0, создавая эффект исчезновения). - blendMode — режим наложения 'ADD' делает частицы яркими и светящимися, что хорошо подходит для эффектов огня или энергии.

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

Весь код примера упакован в сцену Example. Чтобы запустить игру, необходимо создать конфигурационный объект и инстанс игры Phaser.Game.

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

const game = new Phaser.Game(config);

В конфиге: - type: Phaser.WEBGL предпочтительнее для производительности рендеринга частиц. - width и height задают размеры canvas. - backgroundColor — цвет фона. - parent — ID HTML-элемента, в который будет встроен canvas. - scene — класс сцены, которая запустится первой.

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

Гравитационные колодцы в Phaser — это простой, но мощный способ добавить физическую динамику системам частиц. Вы можете экспериментировать: создавать несколько колодцев с разными силами (притяжение и отталкивание), двигать их во времени с помощью well.x и well.y, или комбинировать с другими силами, такими как createVortex. Попробуйте изменить параметры epsilon и gravity, чтобы увидеть, как меняется поведение частиц — от резкого захвата в точку до плавного орбитального движения.