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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('crate', 'assets/sprites/chunk.png');
    }

    create ()
    {
        const emitter = this.add.particles(0, 64, 'crate', {
            x: { min: 100, max: 700 },
            gravity: 20,
            lifespan: 3000,
            quantity: 8
        });

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

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

const game = new Phaser.Game(config);

Инициализация эмиттера частиц

Первым делом нужно создать источник частиц. В нашем примере это делается в методе create сцены. Мы используем метод this.add.particles, который создаёт и сразу возвращает объект ParticleEmitter.

Ключевые параметры эмиттера: - **Текстура:** Используется спрайт 'crate'. - **Зона появления:** Частицы будут появляться в случайной точке по оси X между 100 и 700 пикселями, а по Y — на фиксированной координате 64. - **Основные силы:** Частицам задана гравитация (gravity: 20), направленная вниз. - **Время жизни:** Каждая частица существует 3 секунды (lifespan: 3000). - **Интенсивность:** За один выпуск создаётся 8 частиц (quantity: 8).

const emitter = this.add.particles(0, 64, 'crate', {
    x: { min: 100, max: 700 },
    gravity: 20,
    lifespan: 3000,
    quantity: 8
});

Без дополнительных воздействий такой эмиттер создаст простой вертикальный поток, похожий на падающий снег или дождь.

Создание гравитационного колодца

Вот где начинается магия. У созданного эмиттера есть метод createGravityWell(). Он добавляет в систему частиц новую зону влияния и возвращает её объект для возможного дальнейшего управления (например, перемещения).

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

Разберём параметры колодца: - **`x,y`** — координаты центра силы на холсте. - **power** — показатель степени закона притяжения. Значение 2 соответствует классическому закону обратных квадратов (как в реальной гравитации). - **epsilon** — минимальное расстояние, на которое частица может приблизиться к центру. Это страховка от деления на ноль и слишком резкого ускорения. - **gravity** — общая сила (или «гравитационная постоянная») колодца. Положительное значение притягивает частицы, отрицательное — отталкивает.

Как это работает в движении

При запуске сцены частицы начинают падать вниз под действием глобальной гравитации эмиттера (gravity: 20). Однако, пролетая в зоне влияния колодца (с центром в точке 400x300), на них начинает действовать дополнительная сила.

**Физика процесса:** 1. Для каждой частицы вычисляется вектор, направленный от неё к центру колодца. 2. Длина этого вектора (расстояние) используется в формуле силы: F = (gravity * power) / (distance + epsilon). Чем ближе частица, тем сильнее её «затягивает». 3. Эта сила добавляется к текущей скорости частицы, изменяя её траекторию.

В результате падающий поток изгибается, и частицы начинают вращаться вокруг центра колодца или втягиваться в него, создавая эффект водоворота. Поскольку частицы продолжают стареть (lifespan), они исчезают, и эффект остаётся динамичным.

Практическое применение и вариации

Гравитационные колодцы — это не просто визуальный эффект. Их можно использовать для геймдизайна.

**Идеи для использования:** - **Ловушки и порталы:** Создайте колодец с большой силой (gravity: 500), который засасывает врагов или игрока. - **Сбор ресурсов:** Ресурсы, выпадающие из врагов, могут медленно притягиваться к кораблю игрока. - **Защитные поля:** Отрицательное значение gravity создаст поле отталкивания, отбрасывающее снаряды. - **Динамические эффекты:** Вы можете изменять параметры колодца well в реальном времени, например, перемещать его за курсором мыши.

// Пример: Перемещение колодца за мышью
this.input.on('pointermove', (pointer) => {
    well.x = pointer.x;
    well.y = pointer.y;
});

Экспериментируйте с параметрами power и epsilon, чтобы получить разные типы притяжения — от резкого и сильного до плавного и обширного.

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

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