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

Эффекты частиц оживляют игровой мир, но иногда требуется не хаотичный поток, а упорядоченный. В Phaser Particle Emitter позволяет легко создавать ступенчатые анимации, где частицы появляются по чётко заданным точкам. Это полезно для создания эффектов лестниц, порталов, пошагового распространения волшебной ауры или механических устройств, где движение должно быть дискретным и предсказуемым. В этой статье мы разберём как с помощью одного параметра превратить плавный поток в серию аккуратных шагов.

Версия 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('bg', 'assets/tweens/sky.png');
        this.load.atlas('match3', 'assets/atlas/match3.png', 'assets/atlas/match3.json');
    }

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

        this.add.particles(0, 100, 'match3', {
            x: { start: 100, end: 640, steps: 16 },
            frame: 'Match3_Icon_17',
            lifespan: 3000,
            gravityY: 200,
            scale: 0.15
        });
    }
}

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

const game = new Phaser.Game(config);

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

В методе preload мы загружаем два изображения: фоновое небо и атлас с текстурами для частиц. Атлас — это единый файл изображения с набором спрайтов и сопутствующий JSON-файл, описывающий координаты каждого спрайта внутри. Использование атласов повышает производительность, сокращая количество запросов к графическому процессору.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/tweens/sky.png');
    this.load.atlas('match3', 'assets/atlas/match3.png', 'assets/atlas/match3.json');
}

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

В методе create мы сначала добавляем фоновое изображение. Затем вызываем this.add.particles() для создания менеджера и эмиттера частиц. Первые два аргумента (0, 100) задают глобальные координаты источника частиц. Третий аргумент 'match3' указывает на ключ загруженного атласа.

create ()
{
    this.add.image(400, 300, 'bg');
    this.add.particles(0, 100, 'match3', {
        // Конфигурация эмиттера будет здесь
    });
}

Магия параметра `steps`

Секрет создания ступенчатого эффекта кроется в конфигурационном объекте, передаваемом четвёртым аргументом. Ключевой параметр — `x, который принимает не просто число, а объект с настройками. Свойствоstepsразбивает диапазон междуstart(100) иend` (640) на 16 равных интервалов. Частицы будут рождаться только в этих точках, а не в любой позиции между ними, создавая чёткие колонки.

{
    x: { start: 100, end: 640, steps: 16 },
    frame: 'Match3_Icon_17',
    lifespan: 3000,
    gravityY: 200,
    scale: 0.15
}

- frame: задаёт конкретный спрайт из атласа, который будет использоваться как частица. - lifespan: время жизни частицы в миллисекундах (здесь 3 секунды). - gravityY: сила гравитации, которая тянет частицы вниз, создавая дугу падения. - scale: масштабирует размер частиц.

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

Используя параметр steps в настройках координат эмиттера, вы легко создаёте упорядоченные, геометрически правильные эффекты частиц. Для экспериментов попробуйте: 1. Применить steps к свойству `y`, чтобы создать горизонтальные ряды. 2. Комбинировать ступенчатые координаты с разными frame для разноцветных паттернов. 3. Анимировать само свойство steps во времени, чтобы создавать "растущие" цепочки частиц.