О чем этот пример
Система частиц — один из самых эффектных инструментов для визуализации в играх. С помощью эмиттеров частиц можно легко создавать взрывы, огонь, магические эффекты и другие динамичные элементы. В этой статье мы разберем готовый пример из официальной документации Phaser, который демонстрирует создание двойного взрыва разноцветных искр по клику мыши. Вы узнаете, как настраивать ключевые параметры эмиттера для управления поведением частиц, и как запускать эффекты в нужной точке игрового мира.
Версия 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('spark0', 'assets/particles/blue.png');
this.load.image('spark1', 'assets/particles/red.png');
}
create ()
{
const emitter0 = this.add.particles('spark0').createEmitter({
x: 400,
y: 300,
speed: { min: -800, max: 800 },
angle: { min: 0, max: 360 },
scale: { start: 0.5, end: 0 },
blendMode: 'SCREEN',
// active: false,
lifespan: 600,
gravityY: 800
});
const emitter1 = this.add.particles('spark1').createEmitter({
x: 400,
y: 300,
speed: { min: -800, max: 800 },
angle: { min: 0, max: 360 },
scale: { start: 0.3, end: 0 },
blendMode: 'SCREEN',
// active: false,
lifespan: 300,
gravityY: 800
});
this.input.on('pointerdown', pointer =>
{
emitter0.setPosition(pointer.x, pointer.y);
emitter1.setPosition(pointer.x, pointer.y);
emitter0.explode();
emitter1.explode();
});
}
update ()
{
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Подготовка сцены и загрузка ассетов
Любая сцена в Phaser начинается с методов жизненного цикла. В методе preload() мы загружаем текстуры для наших частиц. Важно использовать this.load.setBaseURL() для указания базового пути, если ассеты хранятся удаленно.
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('spark0', 'assets/particles/blue.png');
this.load.image('spark1', 'assets/particles/red.png');
}В данном примере загружаются две простые текстуры частиц: синяя (spark0) и красная (spark1). Эти изображения будут использоваться как спрайты для каждой испущенной частицы. Простота текстур (например, маленькие круги) часто предпочтительнее для частиц, так как они рисуются в больших количествах.
Создание и настройка эмиттеров частиц
Основная логика создания эффектов происходит в методе create(). Мы создаем два независимых эмиттера с помощью this.add.particles().createEmitter(). Этот метод возвращает объект ParticleEmitter, который можно конфигурировать.
const emitter0 = this.add.particles('spark0').createEmitter({
x: 400,
y: 300,
speed: { min: -800, max: 800 },
angle: { min: 0, max: 360 },
scale: { start: 0.5, end: 0 },
blendMode: 'SCREEN',
lifespan: 600,
gravityY: 800
});Давайте разберем ключевые параметры конфигурации:
* `x,y`: Начальная точка испускания частиц.
* speed: Диапазон начальной скорости. Частицы получат случайное значение от -800 до 800 пикселей в секунду.
* angle: Направление движения. Значения от 0 до 360 градусов означают разлет во все стороны.
* scale: Изменение размера частицы за время жизни от start до end. Уменьшение до 0 создает эффект исчезновения.
* blendMode: Режим наложения 'SCREEN' делает частицы яркими и светящимися на темном фоне.
* lifespan: Время жизни частицы в миллисекундах.
* gravityY: Симуляция гравитации, притягивающей частицы вниз.
Второй эмиттер (emitter1) настраивается аналогично, но с красной текстурой, меньшим начальным размером (scale.start: 0.3) и более коротким временем жизни (lifespan: 300). Это создает разнообразие в эффекте взрыва.
Запуск взрыва по клику мыши
Чтобы эффект воспроизводился интерактивно, мы настраиваем обработчик события клика (pointerdown). Внутри него выполняются две важные операции.
this.input.on('pointerdown', pointer =>
{
emitter0.setPosition(pointer.x, pointer.y);
emitter1.setPosition(pointer.x, pointer.y);
emitter0.explode();
emitter1.explode();
});1. **setPosition(x, y)**: Этот метод мгновенно перемещает точку испускания (emitZone) эмиттера в координаты курсора (pointer.x, pointer.y). Без этого вызова взрыв всегда происходил бы в изначально заданной точке (400, 300).
2. **explode(count, x, y)**: Метод запускает одноразовый «взрыв» — испускает заданное количество частиц (count) за один кадр. Если количество не указано (как в нашем примере), используется стандартное значение из конфигурации эмиттера (по умолчанию — 1). Мы также не передаем координаты `xиy, так как уже установили позицию черезsetPosition`.
Важно: метод explode() отличается от start() или flow(), которые запускают непрерывный поток частиц.
Инициализация игры и конфигурация
Весь пример завершается созданием экземпляра игры Phaser.Game с конфигурационным объектом. Обратите внимание на ключевые настройки.
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);* type: Phaser.WEBGL: Использование WebGL-рендерера критически важно для производительности при работе с большим количеством частиц. Canvas-рендерер может не справиться с высокой нагрузкой.
* backgroundColor: '#000000': Черный фон лучше всего контрастирует со светящимися частицами, особенно при использовании режима наложения 'SCREEN'.
* scene: Example: Указывает класс нашей сцены, который содержит всю логику.
Без правильной конфигурации рендерера система частиц может работать некорректно или сильно тормозить.
Что попробовать дальше
Вы разобрали основы создания интерактивных взрывов частиц в Phaser 3. Эмиттеры предоставляют огромный контроль над визуальными эффектами. Для экспериментов попробуйте изменить параметры: увеличьте lifespan для более медленного затухания, поиграйте с gravityY (даже задайте отрицательное значение для эффекта взлета), добавьте acceleration для изменения скорости со временем или используйте tint для покраски частиц. Также можно загрузить более сложные текстуры (например, звезды или брызги) вместо простых кругов. Комбинируя несколько эмиттеров с разными настройками, вы сможете создавать сложные и уникальные эффекты для своей игры.