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

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

        particles.createEmitter({
            frame: 'blue',
            x: 64,
            y: { min: 100, max: 500 },
            lifespan: 2000,
            speedX: { min: 200, max: 400 },
            scale: { start: 0.4, end: 0 },
            quantity: 4,
            blendMode: 'ADD'
        });
    }
}

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

const game = new Phaser.Game(config);

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

Перед созданием эмиттера необходимо подготовить сцену и загрузить текстуры. В методе preload мы указываем базовый URL и загружаем атлас частиц. Атлас — это изображение (flares.png) вместе с файлом данных (flares.json), который описывает расположение отдельных кадров (фреймов) на этом изображении. Это позволяет эффективно использовать одну текстуру для множества различных частиц.

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.add.particles('flares') создает менеджер частиц, который будет использовать загруженный атлас с ключом 'flares'. Затем на этом менеджере мы создаем конкретный эмиттер с помощью метода createEmitter. Эмиттер — это источник, который испускает частицы с заданными свойствами.

create ()
{
    const particles = this.add.particles('flares');
    particles.createEmitter({
        // Конфигурация эмиттера будет здесь
    });
}

Конфигурация эмиттера: ключевые параметры

Объект конфигурации, передаваемый в createEmitter, определяет поведение и внешний вид частиц. Давайте разберем основные параметры из нашего примера.

{
    frame: 'blue',
    x: 64,
    y: { min: 100, max: 500 },
    lifespan: 2000,
    speedX: { min: 200, max: 400 },
    scale: { start: 0.4, end: 0 },
    quantity: 4,
    blendMode: 'ADD'
}

- frame: Указывает, какой конкретный кадр из атласа ('blue') использовать для частиц. - `x`: Фиксированная горизонтальная позиция эмиттера (64 пикселя от левого края). - `y: **Важный момент!** Здесь задается не одно число, а объект с полямиminиmax`. Это означает, что каждая новая частица будет появляться в случайной вертикальной позиции в диапазоне от 100 до 500 пикселей. - lifespan: Время жизни частицы в миллисекундах (2000 мс = 2 секунды). - speedX: Диапазон для горизонтальной скорости. Частицы будут лететь вправо с разной скоростью. - scale: Частица начнет жизнь с размера 0.4 и плавно уменьшится до 0 за время своей жизни. - quantity: Количество частиц, испускаемых за один выброс. - blendMode: Режим наложения 'ADD' делает частицы яркими и светящимися, что идеально для эффектов огня, магии или взрывов.

Почему диапазон для `y` — это мощный инструмент

Использование объекта `{ min, max }` для свойства `y` вместо одного числа кардинально меняет визуальный результат. Если бы мы задали `y: 300`, все частицы рождались бы строго на одной линии. Диапазон же размазывает область рождения частиц по вертикали. Это позволяет легко создавать эффекты, занимающие определенную зону на экране, например:
- **Струя фонтана:** Частицы появляются в узком диапазоне у "основания" и летят вверх.
- **Завеса дождя:** Диапазон `y` устанавливается за верхним краем экрана (`{ min: -50, max: -10 }`), а частицы летят вниз, создавая эффект поступающего сверху дождя.
- **Вертикальный взрыв:** Сочетание диапазона для `y` и `speedY` создает разлет частиц вверх и вниз от центра взрыва.

Таким образом, параметр `y` (и другие, поддерживающие такой формат) дает вам контроль не над точкой, а над целой зоной эмиссии.

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

Использование диапазонов значений для свойств эмиттера, таких как позиция `y`, — это простой, но крайне эффективный способ добавить вашим визуальным эффектам разнообразие и естественность. Вместо стерильной линии частиц вы получаете живую, динамичную область. Для экспериментов попробуйте

  1. Задать диапазон и для `x`, чтобы создать облако или площадь эффекта
  2. Связать диапазон `y` с движением игрового объекта, чтобы частицы следовали за ним по "дорожке"
  3. Использовать другие свойства, поддерживающие min/max, например speedY, angle или alpha, для еще более сложных и красивых эффектов