Menu
Particle emitters for visual effects like fire, smoke, explosions, and magic
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/feliperyba/ralph-orchestra --skill dev-phaser-particlesThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| name | dev-phaser-particles |
| description | Particle emitters for visual effects like fire, smoke, explosions, and magic |
"Create stunning visual effects with particle systems."
// Manual particle system without Phaser
class Particle {
x: number;
y: number;
vx: number;
vy: number;
life: number;
maxLife: number;
size: number;
alpha: number;
color: string;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
const angle = Math.() * . * ;
speed = + .() * ;
. = .(angle) * speed;
. = .(angle) * speed;
. = ;
. = + .() * ;
. = + .() * ;
. = ;
. = ;
}
(: ): {
. += . * dt / ;
. += . * dt / ;
. += * dt / ;
. += dt;
. = - (. / .);
. < .;
}
() {
ctx. = .;
ctx. = .;
ctx.();
ctx.(., ., ., , . * );
ctx.();
ctx. = ;
}
}
{
: [] = [];
() {
( i = ; i < count; i++) {
..( (x, y));
}
}
() {
. = ..( p.(dt));
}
() {
( p .) {
p.(ctx);
}
}
}
// Phaser handles particles automatically
export class GameScene extends Phaser.Scene {
create() {
// Explosion emitter - ONE config!
const explosion = this.add.particles(0, 0, 'explosion', {
speed: { min: 100, max: 400 },
angle: { min: 0, max: 360 },
scale: { start: 0.5, end: 2 },
alpha: { start: 1, end: 0 },
lifespan: 600,
quantity: 30,
emitting: false, // Don't auto-emit
blendMode: 'ADD' // Built-in blend modes!
});
// Trigger explosion anywhere - ONE line!
explosion.explode(30, 400, 300);
// Fire effect - continuous emitter
const fire = this.add.particles(400, 500, 'fire', {
speed: { min: 50, max: 100 },
angle: { min: 240, max: 300 },
scale: { start: 0.5, end: 0 },
alpha: { start: 0.8, end: 0 },
blendMode: 'ADD',
lifespan: 800,
frequency: 50, // Emit every 50ms
quantity: 3
});
// Trail following player - ONE line!
const trail = this.add.particles(0, 0, 'trail', {
speed: 0,
scale: { start: 0.8, end: 0 },
alpha: { start: 0.5, end: 0 },
lifespan: 300,
quantity: 1,
frequency: 50,
emitZone: {
type: 'edge', // Circle edge emission!
source: new Phaser.Geom.Circle(0, 0, 20),
quantity: 3
}
});
trail.startFollow(this.player); // Auto-follow!
// Custom per-particle behavior
const sparkles = this.add.particles(400, 300, 'sparkle', {
speed: { min: 50, max: 150 },
scale: { start: 0, end: 0.5, ease: 'Back.easeOut' },
alpha: { start: 1, end: 0 },
lifespan: { min: 500, max: 1000 },
onEmit: (particle: any) => {
// Customize each particle!
particle.tint = Phaser.Utils.Array.GetRandom([
0xff0000, 0x00ff00, 0x0000ff
]);
}
});
}
}
// Benefits:
// - Automatic object pooling (no GC!)
// - Built-in lifecycle management
// - GPU-accelerated rendering
// - Texture support + animation
// - Blend modes (ADD, MULTIPLY, SCREEN)
// - Emit zones (random, edge)
// - Death zones
// - Per-particle callbacks
// - Follow any game object
Use when:
create() {
const particles = this.add.particles(0, 0, 'flare', {
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
particles.startFollow(this.player);
}
| Need | Use |
|---|---|
| Trail effect | startFollow() + emitting |
| Explosion | One-time burst emitter |
| Continuous effect | Always-on emitter |
| Zone-based emission | Emitter zone |
| Texture animation | Animated particle frames |
export class GameScene extends Phaser.Scene {
create() {
// Simple particle emitter
const particles = this.add.particles(400, 300, "flare", {
speed: 100,
scale: { start: 1, end: 0 },
blendMode: "ADD",
lifespan: 1000,
quantity: 1,
});
// Particle at mouse position
this.input.on("pointermove", (pointer: Phaser.Input.Pointer) => {
particles.emitParticleAt(pointer.x, pointer.y);
});
}
}
create() {
// Fire effect
const fire = this.add.particles(400, 500, 'fire', {
speed: { min: 50, max: 100 },
angle: { min: 240, max: 300 },
scale: { start: 0.5, end: 0 },
blendMode: 'ADD',
lifespan: 800,
frequency: 50,
quantity: 3
});
// Smoke effect
const smoke = this.add.particles(400, 480, 'smoke', {
speed: 30,
angle: { min: 250, max: 290 },
scale: { start: 0.3, end: 1 },
alpha: { start: 0.5, end: 0 },
lifespan: 2000,
frequency: 100
});
// Explosion
const createExplosion = (x: number, y: number) => {
const explosion = this.add.particles(x, y, 'explosion', {
speed: { min: 100, max: 300 },
angle: { min: 0, max: 360 },
scale: { start: 0.5, end: 2 },
alpha: { start: 1, end: 0 },
lifespan: 500,
quantity: 30,
emitting: false
});
explosion.explode(30, x, y);
};
// Trigger explosion on click
this.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
createExplosion(pointer.x, pointer.y);
});
}
export class GameScene extends Phaser.Scene {
private trailEmitter!: Phaser.GameObjects.Particles.ParticleEmitter;
create() {
// Create player
this.player = this.add.image(400, 300, "player");
// Trail emitter
this.trailEmitter = this.add.particles(0, 0, "trail", {
speed: 0,
scale: { start: 0.8, end: 0 },
alpha: { start: 0.5, end: 0 },
lifespan: 300,
quantity: 1,
frequency: 50,
emitZone: {
type: "edge",
source: new Phaser.Geom.Circle(0, 0, 20),
quantity: 3,
},
});
// Follow player
this.trailEmitter.startFollow(this.player);
// Engine exhaust effect
const exhaust = this.add.particles(0, 20, "exhaust", {
speedX: { min: -20, max: 20 },
speedY: { min: 50, max: 100 },
scale: { start: 0.3, end: 0 },
alpha: { start: 0.8, end: 0 },
lifespan: 400,
frequency: 30,
});
exhaust.startFollow(this.player);
}
}
create() {
// Magic sparkles
const sparkles = this.add.particles(400, 300, 'sparkle', {
speed: { min: 50, max: 150 },
angle: { min: 0, max: 360 },
scale: { start: 0, end: 0.5, ease: 'Back.easeOut' },
alpha: { start: 1, end: 0, ease: 'Linear' },
lifespan: { min: 500, max: 1000 },
quantity: 2,
frequency: 100,
blendMode: 'ADD',
rotate: { start: 0, end: 180 },
emitting: true
});
// Rain effect
const rainZone = new Phaser.Geom.Rectangle(0, 0, this.scale.width, 20);
const rain = this.add.particles(0, 0, 'rain', {
x: { min: 0, max: this.scale.width },
y: -20,
speedY: 400,
speedX: 0,
scale: { start: 0.3, end: 0.3 },
alpha: { start: 0.5, end: 0.8 },
lifespan: 2000,
quantity: 5,
frequency: 20,
emitZone: { source: rainZone }
});
// Radial burst
const burstEmitter = this.add.particles(400, 300, 'particle', {
speed: 200,
scale: { start: 1, end: 0 },
alpha: { start: 1, end: 0 },
lifespan: 1000,
quantity: 50,
emitting: false,
onEmit: (particle: any) => {
// Set custom color per particle
particle.tint = Phaser.Utils.Array.GetRandom([0xff0000, 0x00ff00, 0x0000ff]);
}
});
this.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
burstEmitter.explode(50, pointer.x, pointer.y);
});
}
class ParticleManager {
private emitters = new Map<
string,
Phaser.GameObjects.Particles.ParticleEmitter
>();
constructor(private scene: Phaser.Scene) {
this.createPresets();
}
private createPresets() {
// Fire preset
this.createEmitter("fire", {
key: "fire",
config: {
speed: { min: 50, max: 100 },
angle: { min: 240, max: 300 },
scale: { start: 0.5, end: 0 },
alpha: { start: 0.8, end: 0 },
blendMode: "ADD",
lifespan: 800,
frequency: 50,
},
});
// Explosion preset
this.createEmitter("explosion", {
key: "explosion",
config: {
speed: { min: 100, max: 400 },
angle: { min: 0, max: 360 },
scale: { start: 0.3, end: 1 },
alpha: { start: 1, end: 0 },
lifespan: 600,
quantity: 30,
emitting: false,
},
});
// Trail preset
this.createEmitter("trail", {
key: "trail",
config: {
speed: 50,
scale: { start: 0.5, end: 0 },
alpha: { start: 0.6, end: 0 },
lifespan: 400,
frequency: 50,
},
});
}
createEmitter(name: string, { key, config }: any) {
const emitter = this.scene.add.particles(0, 0, key, config);
this.emitters.set(name, emitter);
return emitter;
}
emit(name: string, x: number, y: number) {
const emitter = this.emitters.get(name);
if (emitter) {
emitter.explode(emitter.config.quantity || 10, x, y);
}
}
follow(name: string, target: Phaser.GameObjects.GameObject) {
const emitter = this.emitters.get(name);
if (emitter) {
emitter.startFollow(target);
}
}
stop(name: string) {
const emitter = this.emitters.get(name);
if (emitter) {
emitter.stop();
}
}
start(name: string) {
const emitter = this.emitters.get(name);
if (emitter) {
emitter.start();
}
}
destroy(name: string) {
const emitter = this.emitters.get(name);
if (emitter) {
emitter.destroy();
this.emitters.delete(name);
}
}
}
// Usage in scene
export class GameScene extends Phaser.Scene {
private particles!: ParticleManager;
create() {
this.particles = new ParticleManager(this);
// Use presets
this.particles.follow("trail", this.player);
// Trigger explosion
this.input.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
this.particles.emit("explosion", pointer.x, pointer.y);
});
}
}
❌ DON'T:
✅ DO:
// Rectangle zone
const rectZone = new Phaser.Geom.Rectangle(x, y, width, height);
particles.setEmitZone({
type: "random",
source: rectZone,
});
// Edge zone (particles on perimeter)
const edgeZone = new Phaser.Geom.Circle(x, y, radius);
particles.setEmitZone({
type: "edge",
source: edgeZone,
quantity: 20,
});
// Random point zone
const pointZone = new Phaser.Geom.Circle(x, y, radius);
particles.setEmitZone({
type: "random",
source: pointZone,
});
// Particles die when entering zone
const deathZone = new Phaser.Geom.Rectangle(300, 200, 200, 200);
particles.setDeathZone({
type: "onEnter",
source: deathZone,
});
const particles = this.add.particles(400, 300, "spark", {
speed: 100,
lifespan: 1000,
onEmit: (particle: any) => {
// Customize each particle
particle.tint = 0xff0000;
particle.velocity.x *= Math.random();
},
onParticleEmit: (emitter, particle) => {
// Called when particle emits
},
onParticleDeath: (emitter, particle) => {
// Called when particle dies
},
});
| Property | Type | Description |
|---|---|---|
speed | number/min/max | Particle velocity |
angle | number/min/max | Emission angle |
scale | start/end | Size over life |
alpha | start/end | Opacity over life |
lifespan | number/min/max | Particle duration (ms) |
quantity | number | Particles per emission |
frequency | number | Time between emissions (ms) |
blendMode | string | Rendering blend mode |
rotate | start/end | Rotation over life |
emitZone | object | Zone for emission |
deathZone | object | Zone for death |
| Mode | Description | Use For |
|---|---|---|
NORMAL | Default | Most effects |
ADD | Additive | Fire, sparks, magic |
MULTIPLY | Multiply | Shadows, smoke |
SCREEN | Screen | Glowing effects |
Complete Developer workflow orchestration - task research sequence, implementation flow, validation gates, PRD synchronization, exit conditions.
Complete Game Designer workflow - skill invocation protocol, GDD creation, playtest flow with GDD review, design sessions. MUST load before starting assignments.
Complete PM Coordinator workflow - task assignment, project orchestration, PRD management, worker coordination. Use proactively when starting PM agent work.