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

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

Система частиц (Particle Emitter) — это ключевой инструмент для создания динамичных визуальных эффектов в играх: от взрывов и огня до магии и погодных явлений. В 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.image('spark', 'assets/particles/blue.png');
    }

    create ()
    {
        const particles = this.add.particles('spark');

        const emitter = particles.createEmitter({
            x: 400,
            y: 300,
            angle: { min: 180, max: 360 },
            speed: 400,
            gravityY: 350,
            lifespan: 4000,
            quantity: 6,
            scale: { start: 0.1, end: 1 },
            blendMode: 'ADD'
        });
    }
}

const config = {
    type: Phaser.WEBGL,
    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.image('spark', 'assets/particles/blue.png');
}

Здесь setBaseURL устанавливает базовый URL для загрузки, что удобно, если все ресурсы лежат в одной директории. Метод load.image регистрирует текстуру под ключом 'spark'. Именно этот ключ мы будем использовать позже для создания системы частиц.

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

Основная логика создания эффекта находится в методе create. Сначала мы создаем менеджер частиц (Particle Manager), который отвечает за рендеринг и общее управление всеми эмиттерами, связанными с одной текстурой.

const particles = this.add.particles('spark');

Затем на этом менеджере мы вызываем метод createEmitter, передавая ему конфигурационный объект. Именно в этом объекте и заключается вся магия настройки поведения частиц.

const emitter = particles.createEmitter({
    x: 400,
    y: 300,
    angle: { min: 180, max: 360 },
    speed: 400,
    gravityY: 350,
    lifespan: 4000,
    quantity: 6,
    scale: { start: 0.1, end: 1 },
    blendMode: 'ADD'
});

Разбор параметров конфигурации эмиттера

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

- `x`, `y`: Координаты точки испускания частиц. В нашем случае это центр экрана (400, 300).
- `angle`: Угол вылета частицы. Использование объекта `{ min: 180, max: 360 }` означает, что каждая частица получит случайный угол в этом диапазоне (от 180 до 360 градусов), создавая веер в нижней полусфере.
- `speed`: Начальная скорость движения частицы в пикселях в секунду.
- `gravityY`: Имитация силы тяжести. Положительное значение тянет частицы вниз, заставляя их падать по параболе.
- `lifespan`: Время жизни частицы в миллисекундах. Через 4000 мс (4 секунды) частица автоматически уничтожится.
- `quantity`: Количество частиц, испускаемых за один вызов эмиттера (например, за кадр, если эмиттер работает постоянно).
- `scale`: Изменение размера частицы за время ее жизни. Объект `{ start: 0.1, end: 1 }` заставляет частицу плавно увеличиваться от 10% до 100% от исходного размера текстуры.
- `blendMode`: Режим наложения. Значение `'ADD'` складывает цвета частицы и фона, создавая яркие, светящиеся эффекты, что идеально подходит для искр или огня.

Сборка игры: конфигурация Phaser.Game

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

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

const game = new Phaser.Game(config);

Ключевые параметры: - type: Рендерер. Phaser.WEBGL используется для лучшей производительности и поддержки таких эффектов, как blendMode 'ADD'. - width, height: Размер игрового холста. - backgroundColor: Цвет фона. - parent: ID HTML-элемента, в который будет встроен canvas. - scene: Класс сцены, который будет запущен сразу после инициализации игры.

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

Использование конфигурационного объекта в createEmitter — это мощный и читаемый способ создания сложных эффектов частиц в Phaser 3. Вы можете экспериментировать: измените angle на { min: 0, max: 180 }, чтобы частицы летели вверх; попробуйте режим наложения 'SCREEN'; добавьте параметр alpha для плавного исчезновения или rotate для вращения частиц. Комбинируя эти параметры, вы легко создадите дождь, снег, звёздное небо или реактивный след.