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

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

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

    create ()
    {
        const emitter = this.add.particles(400, 300, 'match3', {
            frame: { frames: [ 'Match3_Icon_12', 'Match3_Icon_11' ], cycle: true },
            angle: { min: 240, max: 300 },
            speed: { min: 200, max: 300 },
            lifespan: 3000,
            scale: { start: 0.2, end: 0.05 },
            gravityY: 200,
            frequency: 1000
        });
    }
}

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

const game = new Phaser.Game(config);

Разбираем структуру примера

Исходный код представляет собой минимальную сцену Phaser 3, которая загружает один атлас текстур и в методе create создает один эмиттер частиц.

Основные компоненты: * Класс сцены Example с методами preload и create. * Конфигурация игры (config), определяющая ее базовые параметры. * Создание экземпляра игры new Phaser.Game(config).

Давайте подробнее остановимся на загрузке ресурсов.

Загрузка атласа текстур

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

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('match3', 'assets/atlas/match3.png', 'assets/atlas/match3.json');

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

Ключевой метод this.load.atlas() регистрирует атлас под ключом 'match3'. Первый аргумент — это уникальный ключ ресурса, по которому мы будем к нему обращаться. Второй и третий аргументы — пути к PNG-изображению и JSON-файлу с данными соответственно.

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

Вся магия происходит в методе create. Эмиттер — это фабрика, которая создает (emit) и управляет частицами.

const emitter = this.add.particles(400, 300, 'match3', {
    frame: { frames: [ 'Match3_Icon_12', 'Match3_Icon_11' ], cycle: true },
    angle: { min: 240, max: 300 },
    speed: { min: 200, max: 300 },
    lifespan: 3000,
    scale: { start: 0.2, end: 0.05 },
    gravityY: 200,
    frequency: 1000
});

* this.add.particles(x, y, texture) — создает менеджер частиц (ParticleEmitter) в указанных координатах (400, 300) с заданной текстурой ('match3'). * Четвертым аргументом передается объект конфигурации, определяющий поведение каждой частицы.

Давайте пройдемся по самым важным параметрам конфигурации.

Детали конфигурации частиц

Объект конфигурации — это сердце эмиттера. Он описывает, как должны выглядеть и вести себя частицы.

**Анимация кадров (frame):**

frame: { frames: [ 'Match3_Icon_12', 'Match3_Icon_11' ], cycle: true }

Это самый интересный параметр в данном примере. Вместо одного статичного кадра мы задаем массив имен фреймов из атласа. Параметр cycle: true указывает, что частица должна циклически проигрывать эту последовательность кадров на протяжении всей своей жизни. Без этого флага использовался бы только первый кадр массива.

**Движение и физика:**

angle: { min: 240, max: 300 },
speed: { min: 200, max: 300 },
gravityY: 200

* angle определяет направление вылета частицы в градусах (0 — вправо, 90 — вниз). Диапазон 240-300 создает веер частиц, летящих вверх и влево. * speed задает начальную скорость. * gravityY имитирует силу тяжести, заставляя частицы, достигнув пика, падать вниз, создавая дугу.

**Время жизни и внешний вид:**

lifespan: 3000,
scale: { start: 0.2, end: 0.05 },
frequency: 1000

* lifespan — время жизни частицы в миллисекундах (3000 мс = 3 секунды). * scale — частица будет плавно уменьшаться от 20% к 5% от исходного размера текстуры. * frequency — интервал между испусканием новых частиц (1000 мс = 1 секунда).

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

Всего в 10 строчках настроек мы создали живой, анимированный фонтан частиц. Эмиттер в Phaser 3 — мощный и гибкий инструмент. Для экспериментов попробуйте: увеличить frequency для более плотного потока; добавить в массив frames больше кадров для сложной анимации; изменить angle и gravityY, чтобы создать эффект дождя или взрыва; поиграть с параметрами alpha (прозрачность) и tint (цветовой оттенок) для создания частиц огня, воды или магии.