Phaser.js: всё об играх и разработке

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

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

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

    create ()
    {
        const emitter = this.add.particles(400, 250, 'flares', {
            frame: [ 'red', 'yellow', 'green' ],
            lifespan: 4000,
            speed: { min: 150, max: 250 },
            scale: { start: 0.8, end: 0 },
            gravityY: 150,
            blendMode: 'ADD',
            emitting: false
        });

        this.input.on('pointerdown', pointer => {

            emitter.explode(16);

        });

        this.add.text(10, 10, 'Click to explode emit particles');
    }
}

const config = {
    type: Phaser.AUTO,
    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.png и соответствующий ему JSON-файл с данными о расположении фреймов. Ключ 'flares' — это идентификатор, по которому мы будем обращаться к этому атласу позже.

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

В методе create() создается и настраивается сам эмиттер — объект, который будет испускать частицы. Конфигурация передается третьим аргументом в метод this.add.particles.

const emitter = this.add.particles(400, 250, 'flares', {
    frame: [ 'red', 'yellow', 'green' ],
    lifespan: 4000,
    speed: { min: 150, max: 250 },
    scale: { start: 0.8, end: 0 },
    gravityY: 150,
    blendMode: 'ADD',
    emitting: false
});

Разберем ключевые параметры: - frame: Массив имен фреймов из атласа, которые будут случайно выбираться для частиц. Это задает разноцветный взрыв. - lifespan: Время жизни частицы в миллисекундах (4000 мс = 4 секунды). - speed: Объект с минимальной и максимальной скоростью разлета. Частицы получат случайное значение в этом диапазоне. - scale: Объект, задающий начальный и конечный масштаб. Здесь частицы начнут с размера 0.8 и плавно уменьшатся до 0, создавая эффект затухания. - gravityY: Сила гравитации, притягивающая частицы вниз. Положительное значение означает направление вниз. - blendMode: Режим наложения 'ADD' делает частицы яркими и светящимися при наложении друг на друга. - emitting: false: Важный параметр, который отключает постоянную эмиссию. Эмиттер не будет испускать частицы сам по себе, а будет ждать нашей команды.

Запуск взрыва по событию ввода

Чтобы эмиттер сработал в нужный момент, мы привязываем его к событию пользовательского ввода, например, клику мыши.

this.input.on('pointerdown', pointer => {
    emitter.explode(16);
});

Метод this.input.on регистрирует обработчик события 'pointerdown' (нажатие кнопки мыши или касание). Внутри колбэка мы вызываем метод эмиттера explode(16). Этот метод мгновенно испускает указанное количество частиц (в нашем случае 16) из точки, заданной при создании эмиттера (400, 250). Все частицы получают параметры, которые мы настроили ранее: разный цвет, скорость, гравитацию и анимацию масштаба.

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

this.add.text(10, 10, 'Click to explode emit particles');

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

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

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

const game = new Phaser.Game(config);

В конфиге config задаются базовые параметры: - type: Рендерер (Phaser.AUTO выбирает между WebGL и Canvas автоматически). - width / height: Размер игрового поля. - backgroundColor: Цвет фона ('#000' — черный), на котором яркие частицы будут смотреться особенно эффектно. - parent: ID HTML-элемента, в который будет встроен canvas. - scene: Класс главной сцены. Создание объекта new Phaser.Game(config) инициализирует игровой цикл и запускает сцену.

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

Вы создали управляемый взрыв частиц в Phaser. Ключевой шаг — настройка эмиттера с параметрами, которые определяют визуальный стиль эффекта, и его активация через explode(). Для экспериментов попробуйте изменить параметры: увеличьте gravityY, чтобы частицы быстрее падали, поиграйте с массивом frame, добавив другие цвета, или замените explode() на start() для создания непрерывного потока частиц (например, для огня или дыма). Можно также привязать эмиттер к движению спрайта игрока, создавая динамический след.