О чем этот пример
Создание визуальных эффектов — ключевой элемент геймдева. В этой статье разберём, как привязать систему частиц к физическому телу в Phaser, чтобы частицы реагировали на его состояние. Мы реализуем эффект дыма или пламени из двигателей космического корабля, где интенсивность частиц зависит от скорости объекта. Этот подход позволяет создавать динамичные и живые визуальные эффекты, которые органично вписываются в игровой процесс, а не являются статичной анимацией.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
cursors;
ship;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('background', 'assets/tests/space/nebula.jpg');
this.load.atlas('space', 'assets/tests/space/space.png', 'assets/tests/space/space.json');
}
create ()
{
this.add.image(400, 300, 'background');
const emitter = this.add.particles(0, 0, 'space', {
frame: 'blue',
speed: {
onEmit: (particle, key, t, value) => this.ship.body.speed
},
lifespan: {
onEmit: (particle, key, t, value) => Phaser.Math.Percent(this.ship.body.speed, 0, 300) * 20000
},
alpha: {
onEmit: (particle, key, t, value) => Phaser.Math.Percent(this.ship.body.speed, 0, 300) * 1000
},
scale: { start: 1.0, end: 0 },
blendMode: 'ADD'
});
this.ship = this.matter.add.image(400, 300, 'space', 'ship');
this.ship.setFixedRotation();
this.ship.setAngle(270);
this.ship.setFrictionAir(0.05);
this.ship.setMass(30);
emitter.startFollow(this.ship);
this.matter.world.setBounds(0, 0, 800, 600);
this.cursors = this.input.keyboard.createCursorKeys();
}
update ()
{
if (this.cursors.left.isDown)
{
this.ship.thrustLeft(0.1);
}
else if (this.cursors.right.isDown)
{
this.ship.thrustRight(0.1);
}
if (this.cursors.up.isDown)
{
this.ship.thrust(0.1);
}
else if (this.cursors.down.isDown)
{
this.ship.thrustBack(0.1);
}
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'matter',
matter: {
gravity: {
x: 0,
y: 0
}
}
},
scene: Example
};
const game = new Phaser.Game(config);
Инициализация сцены и загрузка ассетов
Класс Example наследуется от Phaser.Scene. В методе preload() мы загружаем фоновое изображение и атлас спрайтов с помощью this.load. Атлас 'space' содержит кадры как для корабля, так и для частиц.
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('background', 'assets/tests/space/nebula.jpg');
this.load.atlas('space', 'assets/tests/space/space.png', 'assets/tests/space/space.json');Создание системы частиц с динамическими параметрами
В методе create() сначала добавляется фон. Затем создаётся эмиттер частиц с помощью this.add.particles(0, 0, 'space', {...}). Ключевая особенность — использование функций обратного вызова onEmit для параметров speed, lifespan и alpha. Эти функции вызываются в момент создания каждой новой частицы, позволяя рассчитать её свойства на основе текущего состояния корабля.
Функция Phaser.Math.Percent(value, min, max) преобразует скорость корабля в процентное соотношение от 0 до 1 в заданном диапазоне (здесь от 0 до 300). Этот процент затем используется для вычисления времени жизни и прозрачности частиц. Таким образом, чем быстрее летит корабль, тем ярче и дольше живут частицы.
const emitter = this.add.particles(0, 0, 'space', {
frame: 'blue',
speed: {
onEmit: (particle, key, t, value) => this.ship.body.speed
},
lifespan: {
onEmit: (particle, key, t, value) => Phaser.Math.Percent(this.ship.body.speed, 0, 300) * 20000
},
alpha: {
onEmit: (particle, key, t, value) => Phaser.Math.Percent(this.ship.body.speed, 0, 300) * 1000
},
scale: { start: 1.0, end: 0 },
blendMode: 'ADD'
});Настройка физического тела корабля
Корабль создаётся как физическое тело Matter.js с помощью this.matter.add.image(). Далее производится его тонкая настройка:
- setFixedRotation() предотвращает вращение тела от столкновений.
- setAngle(270) изначально разворачивает корабль носом вверх.
- setFrictionAir(0.05) устанавливает низкое сопротивление воздуха, создавая ощущение движения в космосе.
- setMass(30) задаёт массу тела, влияющую на инерцию.
Связка эмиттера с кораблём происходит через emitter.startFollow(this.ship). После этого система частиц будет автоматически следовать за координатами тела. Также важно установить границы мира this.matter.world.setBounds().
this.ship = this.matter.add.image(400, 300, 'space', 'ship');
this.ship.setFixedRotation();
this.ship.setAngle(270);
this.ship.setFrictionAir(0.05);
this\.ship.setMass(30);
emitter.startFollow(this.ship);
this.matter.world.setBounds(0, 0, 800, 600);Управление кораблём и обновление состояния
Управление реализовано через курсорные клавиши в методе update(). Для движения корабля в Matter.js используются методы thrust(), thrustBack(), thrustLeft() и thrustRight(). Каждый вызов прикладывает силу в указанном направлении относительно текущего угла поворота тела. Поскольку скорость корабля меняется в реальном времени, параметры вновь создаваемых частиц (через onEmit) автоматически подстраиваются под эту скорость.
if (this.cursors.left.isDown)
{
this.ship.thrustLeft(0.1);
}
else if (this.cursors.right.isDown)
{
this.ship.thrustRight(0.1);
}
if (this.cursors.up.isDown)
{
this.ship.thrust(0.1);
}
else if (this.cursors.down.isDown)
{
this.ship.thrustBack(0.1);
}Конфигурация игры и физического движка
В конфигурационном объекте config указывается использование физического движка Matter.js в качестве движка по умолчанию. Важный параметр — gravity: { x: 0, y: 0 }, который отключает гравитацию, создавая условия для симуляции движения в невесомости.
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'matter',
matter: {
gravity: {
x: 0,
y: 0
}
}
},
scene: Example
};
const game = new Phaser.Game(config);Что попробовать дальше
Мы создали систему, где визуальный эффект (частицы) напрямую зависит от динамического состояния игрового объекта (его скорости). Это мощный паттерн для создания отзывчивой и immersive графики. Для экспериментов попробуйте: изменить логику в onEmit, чтобы частицы появлялись только при ускорении; привязать эмиттер не к центру корабля, а к точкам расположения двигателей; использовать другую функцию для зависимости параметров (например, квадратичную); или добавить вторую систему частиц для визуализации торможения другим цветом.