MCPInstall

particles

Use this skill when creating particle effects in Phaser 4. Covers ParticleEmitter, emission zones, death zones, particle properties, textures, gravity wells, and particle movement. Triggers on: particles, emitter, particle effect, explosion, fire, smoke.

Installs
872
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/phaserjs/phaser --skill particles
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads particles automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Particle System

Creating and controlling particle effects in Phaser 4 -- ParticleEmitter creation and configuration, emitter ops (value formats), gravity wells, emission and death zones, flow vs burst modes, following game objects, and particle callbacks.

Key source paths: src/gameobjects/particles/ Related skills: ../sprites-and-images/SKILL.md, ../loading-assets/SKILL.md

Quick Start

// In a Scene's create() method:

// Basic continuous emitter (flow mode)
const emitter = this.add.particles(400, 300, 'flares', {
    frame: 'red',
    speed: 200,
    lifespan: 2000,
    scale: { start: 1, end: 0 },
    alpha: { start: 1, end: 0 },
    gravityY: 150
});

// One-shot burst (explode mode)
const burst = this.add.particles(400, 300, 'flares', {
    frame: 'blue',
    speed: { min: 100, max: 300 },
    lifespan: 1000,
    scale: { start: 0.5, end: 0 },
    emitting: false   // don't auto-start
});
burst.explode(20);    // emit 20 particles at once

Core Concepts

ParticleEmitter

ParticleEmitter extends GameObject and is added directly to the display list. It is both a game object (positionable, scalable, maskable) and the emitter itself. There is no separate manager -- this.add.particles() returns a ParticleEmitter instance.

Factory signature:

this.add.particles(x, y, texture, config);
// x, y: world position (both optional, default 0)
// texture: string key or Texture instance
// config: ParticleEmitterConfig object (optional, can call setConfig later)

Mixins: AlphaSingle, BlendMode, Depth, Lighting, Mask, RenderNodes, ScrollFactor, Texture, Transform, Visible. So you can call setPosition(), setScale(), setDepth(), setBlendMode(), setMask(), setScrollFactor(), etc.

Particle

A lightweight object owned by its emitter. Key properties: x, y, velocityX/Y, accelerationX/Y, scaleX/Y, alpha, angle, rotation, tint, life (total ms), lifeCurrent (remaining ms), lifeT (0-1 normalized), bounce, delayCurrent, holdCurrent. Particles are pooled internally -- you never create them manually.

EmitterOp Value Formats

Most config properties (speed, scale, alpha, angle, x, y, etc.) accept flexible value formats:

x: 400                                        // static value
x: [100, 200, 300, 400]                       // random pick from array
x: { min: 100, max: 700 }                     // random float in range
x: { min: 100, max: 700, int: true }          // random integer
x: { random: [100, 700] }                     // random integer shorthand
scale: { start: 0, end: 1 }                   // ease over lifetime (default linear)
scale: { start: 0, end: 1, ease: 'bounce.out' }  // custom ease
scale: { start: 4, end: 0.5, random: true }   // random start, ease to end
x: { values: [50, 500, 200, 800], interpolation: 'catmull' }  // interpolation
x: { steps: 32, start: 0, end: 576 }          // stepped sequential
x: { steps: 32, start: 0, end: 576, yoyo: true }  // stepped with yoyo
x: {                                           // custom callbacks
    onEmit: (particle, key, t, value) => value,
    onUpdate: (particle, key, t, value) => value
}
x: (particle, key, t, value) => value + 50    // emit-time callback shorthand

Emit-only (no onUpdate): angle, delay, hold, lifespan, quantity, speedX, speedY. Emit + Update (support start/end, onUpdate): accelerationX/Y, alpha, bounce, maxVelocityX/Y, moveToX/Y, rotate, scaleX/Y, tint, x, y.

Flow vs Explode (Burst)

Flow mode (frequency >= 0): emits quantity particles every frequency ms. Default is frequency: 0 (every frame) with emitting: true.

Explode mode (frequency = -1): emits a batch all at once, then stops.

emitter.flow(100, 5);           // 5 particles every 100ms
emitter.flow(100, 5, 50);       // auto-stop after 50 total
emitter.explode(30, 200, 400);  // burst 30 at position
emitter.explode(30);            // burst at emitter position

Common Patterns

Scale, Alpha, and Color Over Lifetime

// Scale and alpha with custom easing
this.add.particles(400, 300, 'spark', {
    lifespan: 2000,
    speed: 100,
    scale: { start: 1, end: 0, ease: 'power2' },
    alpha: { start: 1, end: 0, ease: 'cubic.in' }
});

Color Interpolation

The color property interpolates through an array of colors over particle lifetime (overrides tint):

this.add.particles(400, 300, 'spark', {
    lifespan: 2000, speed: 100, scale: { start: 0.5, end: 0 },
    color: [0xfacc22, 0xf89800, 0xf83600, 0x9f0404], colorEase: 'quad.out'
});

Tinting Particles

this.add.particles(400, 300, 'spark', { tint: 0xff0000 });                           // static
this.add.particles(400, 300, 'spark', { tint: { start: 0xffffff, end: 0xff0000 } }); // over lifetime

Gravity Wells

A GravityWell applies inverse-square gravitational force, pulling (or repelling with negative power) particles toward a point.

const emitter = this.add.particles(400, 300, 'spark', {
    speed: 100, lifespan: 4000, scale: { start: 0.4, end: 0 }, quantity: 2
});

const well = emitter.createGravityWell({
    x: 400, y: 300, power: 2, epsilon: 100, gravity: 50
});

// Update at runtime
well.x = 300;
well.power = -1;  // negative = repel

// Or create manually and add
const well2 = new Phaser.GameObjects.Particles.GravityWell(500, 200, 3, 100, 50);
emitter.addParticleProcessor(well2);
emitter.removeParticleProcessor(well2);

Emission Zones (Random)

A RandomZone spawns particles at random positions within a shape. The source must have a getRandomPoint(point) method -- all Phaser geometry classes (Circle, Ellipse, Rectangle, Triangle, Polygon, Line) support this, or provide a custom source:

// Using built-in geometry
this.add.particles(400, 300, 'spark', {
    speed: 50, lifespan: 2000,
    emitZone: { type: 'random', source: new Phaser.Geom.Circle(0, 0, 100) }
});

// Custom source object (any object with getRandomPoint)
emitter.addEmitZone({
    type: 'random',
    source: {
        getRandomPoint: (point) => {
            const a = Math.random() * Math.PI * 2;
            point.x = Math.cos(a) * 100;
            point.y = Math.sin(a) * 50;
            return point;
        }
    }
});

Emission Zones (Edge)

An EdgeZone places particles sequentially along shape edges. The source must have a getPoints(quantity, stepRate) method. Curves, Paths, and all geometry shapes support this:

this.add.particles(400, 300, 'spark', {
    lifespan: 1500, speed: 20,
    emitZone: {
        type: 'edge',
        source: new Phaser.Geom.Circle(0, 0, 150),
        quantity: 48,     // number of points on edge (use 0 with stepRate instead)
        yoyo: false,      // reverse direction at ends
        seamless: true    // remove duplicate endpoint
    }
});

// Or add post-creation with any source that has getPoints
emitter.addEmitZone({ type: 'edge', source: geom, quantity: 50, yoyo: false, seamless: true });

Multiple emission zones: Pass an array to emitZone or call addEmitZone() multiple times. Zones iterate in sequence. The total property controls how many particles emit before rotating to the next zone (-1 = never rotate).

this.add.particles(400, 300, 'spark', {
    emitZone: [
        { type: 'random', source: new Phaser.Geom.Circle(0, 0, 50) },
        { type: 'random', source: new Phaser.Geom.Circle(200, 0, 50) }
    ]
});

Death Zones

A DeathZone kills particles when they enter (or leave) a region. The source must have a contains(x, y) method.

// Kill particles entering a rectangle
this.add.particles(400, 100, 'spark', {
    speed: 200, lifespan: 5000, gravityY: 100,
    deathZone: { type: 'onEnter', source: new Phaser.Geom.Rectangle(300, 400, 200, 50) }
});

// Kill particles leaving a circle (confine to area)
this.add.particles(400, 300, 'spark', {
    speed: 100, lifespan: 5000,
    deathZone: { type: 'onLeave', source: new Phaser.Geom.Circle(400, 300, 150) }
});

// Custom death zone source (any object with contains)
emitter.addDeathZone({
    type: 'onEnter',
    source: { contains: (x, y) => x > 600 && y > 400 }
});

Following a Game Object

const player = this.add.sprite(100, 100, 'player');
const emitter = this.add.particles(0, 0, 'spark', {
    speed: 50, lifespan: 800, scale: { start: 0.5, end: 0 }
});

emitter.startFollow(player);                       // follow position
emitter.startFollow(player, 10, -20);              // with offset
emitter.startFollow(player, 0, 0, true);           // track visibility too
emitter.stopFollow();

// Or via config:
this.add.particles(0, 0, 'spark', { follow: player, followOffset: { x: 0, y: -20 } });

Particle Callbacks

// Via config
const emitter = this.add.particles(400, 300, 'spark', {
    speed: 100, lifespan: 2000,
    emitCallback: (particle, emitter) => { /* on emit */ },
    deathCallback: (particle) => { /* on death */ }
});

// Or set after creation
emitter.onParticleEmit((particle, emitter) => { /* ... */ });
emitter.onParticleDeath((particle) => { /* ... */ });

// Iterate alive/dead particles
emitter.forEachAlive((particle, emitter) => { /* particle.x, particle.lifeT */ });

Duration, StopAfter, and Advance

// Auto-stop after 3 seconds (alive particles continue until they expire)
this.add.particles(400, 300, 'spark', { speed: 100, duration: 3000 });

// Emit exactly 50 particles then stop
this.add.particles(400, 300, 'spark', { speed: 100, stopAfter: 50 });

// Pre-warm: fast-forward 2 seconds so particles visible on first frame
this.add.particles(400, 300, 'spark', { speed: 100, lifespan: 2000, advance: 2000 });
// Or manually: emitter.fastForward(2000, 50);

Particle Bounds (Bounce)

this.add.particles(400, 300, 'spark', {
    speed: 200, lifespan: 5000, bounce: 0.8,
    bounds: { x: 100, y: 100, width: 600, height: 400 },
    collideLeft: true, collideRight: true, collideTop: true, collideBottom: true
});
// Or: emitter.addParticleBounds(100, 100, 600, 400);

Texture Frames and Animations

// Random frame per particle
this.add.particles(400, 300, 'flares', { frame: ['red', 'green', 'blue'] });

// Sequential frames cycling through with quantity per frame
this.add.particles(400, 300, 'flares', {
    frame: { frames: ['red', 'green', 'blue'], cycle: true, quantity: 4 }
});

// Particle animation (plays anim over particle lifetime)
this.add.particles(400, 300, 'explosion', { anim: 'explode_anim', lifespan: 1000 });

// Multiple anims, randomly assigned
this.add.particles(400, 300, 'sheet', {
    anim: { anims: ['fire', 'smoke'], cycle: false, quantity: 1 }
});

Sorting Particles

this.add.particles(400, 300, 'spark', { sortProperty: 'y', sortOrderAsc: true });
// Or: sortCallback: (a, b) => a.y - b.y

Custom Particle Processor

Extend ParticleProcessor to apply custom per-particle logic each frame. Implement update(particle, delta, step, t):

class WindProcessor extends Phaser.GameObjects.Particles.ParticleProcessor {
    constructor (windX, windY) {
        super(0, 0);
        this.windX = windX;
        this.windY = windY;
    }

    update (particle, delta, step, t) {
        particle.velocityX += this.windX * step;
        particle.velocityY += this.windY * step;
    }
}

emitter.addParticleProcessor(new WindProcessor(0.5, 0));

Custom Particle Class

Extend Particle and override update for per-particle behavior. Set via particleClass in config:

class TrailParticle extends Phaser.GameObjects.Particles.Particle {
    update (delta, step, processors) {
        const result = super.update(delta, step, processors);
        this.alpha = this.lifeT;  // custom: alpha matches life progress
        return result;  // must return true if particle is still alive
    }
}

this.add.particles(400, 300, 'spark', {
    particleClass: TrailParticle,
    speed: 100, lifespan: 2000
});

Configuration Reference

ParticleEmitterConfig -- Simple Properties

PropertyTypeDefaultDescription
activebooleantrueFalse = emitter does not update at all
emittingbooleantrueFalse = no new particles (alive ones still update)
blendModestring/number0Blend mode for rendering
frequencynumber0ms between flow cycles; 0 = every frame; -1 = explode
gravityX, gravityYnumber0Gravity in px/s^2
maxParticlesnumber0Hard limit on total particle objects (0 = unlimited)
maxAliveParticlesnumber0Max alive particles at once (0 = unlimited)
durationnumber0Auto-stop after ms (0 = forever)
stopAfternumber0Auto-stop after N particles emitted (0 = unlimited)
advancenumber0Fast-forward on creation (ms)
radialbooleantrueTrue = speed+angle; false = speedX/speedY
particleBringToTopbooleantrueNew particles render on top
timeScalenumber1Time multiplier for updates
followVector2LikenullObject to follow
followOffsetVector2LikeOffset from follow target
trackVisiblebooleanfalseMatch follow target's visibility
reservenumberPre-allocate particle objects
particleClassfunctionParticleCustom particle class
sortPropertystringParticle property to sort by
sortOrderAscbooleanSort ascending if true

ParticleEmitterConfig -- EmitterOp Properties

All accept the flexible value formats described above.

PropertyDefaultE/UDescription
x, y0E+UParticle offset from emitter
speed0ERadial speed (sets speedX, deactivates speedY)
speedX, speedY0EDirectional speed (sets radial=false)
angle{min:0,max:360}EEmission angle in degrees
scale1E+UUniform scale (sets scaleX, deactivates scaleY)
scaleX, scaleY1E+UNon-uniform scale
alpha1E+UAlpha transparency
rotate0E+URotation in degrees
tint0xffffffE+UTint color (WebGL)
colorE+UColor array to interpolate (overrides tint)
colorEaseEase for color interpolation
lifespan1000ELifetime in ms
delay0EDelay before visible (ms)
hold0EHold at end of life before dying (ms)
quantity1EParticles per flow cycle
accelerationX/Y0E+UAcceleration (px/s^2)
maxVelocityX/Y10000E+UMax velocity
bounce0E+UBounce restitution (0-1)
moveToX, moveToY0E+UTarget position (overrides angle/speed)

E = emit-only, E+U = emit + update (supports start/end, onUpdate)

Zone Config Properties

Config KeyTypeProperties
emitZoneobject or array{ type: 'random', source: <shape> }
{ type: 'edge', source: <shape>, quantity, stepRate, yoyo, seamless, total }
deathZoneobject or array{ type: 'onEnter'|'onLeave', source: <shape> }
boundsobject{ x, y, width, height } or { x, y, w, h }

Events

All events are emitted on the ParticleEmitter instance itself.

EventStringCallback ArgsWhen
START'start'(emitter)start() is called and emitter begins emitting
STOP'stop'(emitter)stop() is called, or duration/stopAfter limit reached
COMPLETE'complete'(emitter)Final alive particle dies after emitter has stopped
EXPLODE'explode'(emitter, particle)explode() is called
DEATH_ZONE'deathzone'(emitter, particle, zone)A death zone kills a particle
emitter.on('stop', (emitter) => { /* stopped emitting */ });
emitter.on('complete', (emitter) => { /* all particles dead */ });
emitter.on('deathzone', (emitter, particle, zone) => { /* ... */ });

API Quick Reference

ParticleEmitter Key Methods

Lifecycle: start(advance?, duration?), stop(kill?), pause(), resume(), flow(frequency, count?, stopAfter?), explode(count?, x?, y?), emitParticleAt(x?, y?, count?), emitParticle(count?, x?, y?), fastForward(time, delta?).

Config: setConfig(config), updateConfig(config).

Following: startFollow(target, offX?, offY?, trackVisible?), stopFollow().

Zones: addEmitZone(config), removeEmitZone(zone), clearEmitZones(), addDeathZone(config), removeDeathZone(zone), clearDeathZones().

Processors: createGravityWell(config), addParticleProcessor(processor), removeParticleProcessor(processor), getProcessors().

Bounds: addParticleBounds(x, y, w, h, collideL?, collideR?, collideT?, collideB?).

Callbacks/Iteration: onParticleEmit(cb, ctx?), onParticleDeath(cb, ctx?), killAll(), forEachAlive(cb, ctx?), forEachDead(cb, ctx?).

Counts: getAliveParticleCount(), getDeadParticleCount(), getParticleCount(), atLimit(), reserve(count).

Property setters: setParticleSpeed(x, y?), setParticleScale(x, y?), setParticleGravity(x, y), setParticleAlpha(value), setParticleTint(value), setParticleLifespan(value), setEmitterAngle(value), setQuantity(qty), setFrequency(freq, qty?), setRadial(value), setEmitterFrame(frames, random?, qty?), setAnim(anims, random?, qty?).

Sorting: setSortProperty(property, ascending?), setSortCallback(callback), depthSort().

Utility: getBounds(padding?, advance?, delta?, output?), overlap(target).

GravityWell

Property/MethodDescription
x, yWorld position of the well
powerForce strength (negative to repel)
epsilonMin distance for force calc (default 100)
gravityGravitational constant (default 50)
activeEnable/disable processing (inherited from ParticleProcessor)

Constructor: new GravityWell(x, y, power, epsilon, gravity) or new GravityWell(config) where config is { x, y, power, epsilon, gravity }.

Gotchas

  • No ParticleEmitterManager: Removed in v3.60. this.add.particles() returns a ParticleEmitter directly.
  • speed vs speedX/speedY: speed sets speedX and deactivates speedY (radial). speedX/speedY switches to point mode (radial: false).
  • scale vs scaleX/scaleY: scale applies to scaleX and deactivates scaleY. Use both for non-uniform scaling.
  • color overrides tint: They are mutually exclusive; color (array) takes priority.
  • moveToX/moveToY: Both must be set to activate. Overrides angle and speed.
  • emitting vs active: emitting: false = no new particles but alive ones update. active: false = entire emitter frozen.
  • stop vs complete: 'stop' fires when emission stops. 'complete' fires when the last alive particle dies.
  • frequency: 0: Means emit every frame (max rate), not "never." Use emitting: false to prevent emission.
  • frequency: -1: Puts the emitter in explode mode -- it will not flow automatically. Use explode() to emit bursts.
  • hold freezes particle: After lifespan expires, hold keeps the particle visible and frozen for the specified ms before it dies. Useful for trail/lingering effects.
  • advance fast-forwards: Pre-warms the emitter by simulating the given ms on creation, so particles are already visible on the first frame.
  • reserve(count) pre-allocates: Call reserve() or set reserve in config to pre-create particle objects upfront, avoiding GC spikes during gameplay from on-demand allocation.
  • Zone source methods: RandomZone needs getRandomPoint(point). EdgeZone needs getPoints(quantity, stepRate). DeathZone needs contains(x, y).
  • Particle pool: maxParticles limits total objects (not alive count). Use maxAliveParticles for visible limit.
  • Texture required: The emitter needs a valid texture key. Use frame config for multi-frame textures.

Source Files

See references/REFERENCE.md for the full source file map. Key entry points: src/gameobjects/particles/ParticleEmitter.js (main class), src/gameobjects/particles/Particle.js (individual particle), src/gameobjects/particles/zones/ (zone classes).

FAQ

What does the particles skill do?

Use this skill when creating particle effects in Phaser 4. Covers ParticleEmitter, emission zones, death zones, particle properties, textures, gravity wells, and particle movement. Triggers on: particles, emitter, particle effect, explosion, fire, smoke.

How do I install particles?

Run npx skills add https://github.com/phaserjs/phaser --skill particles in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/particles/ (personal) or .claude/skills/particles/ (project).

Which AI agents can use particles?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is particles safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains particles?

It is published by phaserjs in phaserjs/phaser. It has 872 recorded installs.

More from phaserjs/phaser

View all →

game-setup-and-config

phaserjs/phaser

Use this skill when creating a new Phaser 4 game instance or configuring GameConfig options. Covers renderer selection, canvas setup, scaling, pixel art, FPS settings, boot sequence, and all config sub-objects. Triggers on: new Phaser.Game, GameConfig, game setup, renderer, pixel art, FPS.

Media & Creative1.2K installs

sprites-and-images

phaserjs/phaser

Use this skill when creating Sprites or Images in Phaser 4. Covers factory methods, texture/frame selection, position, scale, rotation, tint, flip, alpha, origin, depth, and the component mixin system. Triggers on: Sprite, Image, this.add.sprite, this.add.image, texture, setTint, setAlpha.

Media & Creative1.1K installs

animations

phaserjs/phaser

Use this skill when creating or controlling sprite animations in Phaser 4. Covers spritesheets, atlases, AnimationManager, AnimationState, play/stop/chain, frame callbacks, and animation events. Triggers on: sprite animation, spritesheet, play animation, animation frames.

Frontend & Design1.1K installs

tilemaps

phaserjs/phaser

Use this skill when working with tilemaps in Phaser 4. Covers loading Tiled JSON maps, creating tilemap layers, tile collision, dynamic tiles, tile properties, and tilemap camera culling. Triggers on: Tilemap, Tiled, tilemap layer, tile collision, tile properties.

972 installs

v4-new-features

phaserjs/phaser

Use this skill when learning about new features, game objects, components, and rendering capabilities added in Phaser 4. Covers Filters, RenderNodes, CaptureFrame, Gradient, Noise, SpriteGPULayer, TilemapGPULayer, Lighting component, RenderSteps, and new tint modes. Triggers on: new in v4, Phaser 4 features, RenderNode, SpriteGPULayer, CaptureFrame, Gradient game object, Noise game object, new tint modes. For migrating v3 code to v4, see the v3-to-v4-migration skill instead.

Media & Creative965 installs

scenes

phaserjs/phaser

Use this skill when working with Phaser 4 scenes. Covers scene lifecycle methods, scene transitions, parallel scenes, scene communication, sleeping, pausing, restarting, and the SceneManager. Triggers on: Scene, scene lifecycle, preload, create, update, scene transition, SceneManager.

956 installs

Popular other skills

View category →

hyperframes-cli

heygen-com/hyperframes

The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.

1.3M installs

triage

mattpocock/skills

Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.

1M installs

ask-matt

mattpocock/skills

Ask which skill or flow fits your situation. A router over the skills in this repo.

778.4K installs

to-questionnaire

mattpocock/skills

Turn a decision you can't fully answer into a questionnaire for someone else to fill in.

508.9K installs

wait-what

mattpocock/skills

Stop. That last message did not land: re-pitch it.

459.7K installs

loop-me

mattpocock/skills

Grill me about specs for the workflows I want to build, within this workspace.

447.9K installs