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.
By phaserjs · 552 installs
npx skills add phaserjs/phaser --skill particles
Source repository · Upstream listing
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
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:
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:
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.
Common Patterns
Scale, Alpha, and Color Over Lifetime
Color Interpolation
The color property interpolates through an array of colors over particle lifetime (overrides tint ):
Tinting Particles
Gravity Wells
A GravityWell applies inverse square gravitational force, pulling (or repelling with negative power ) particles toward a point.
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:
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:
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).
Death Zones
A DeathZone kills particles when they enter (or leave) a region. The source must have a contains(x, y) method.
Following a Game Object
Particle Callbacks
Duration, StopAfter, and Advance
Particle Bounds (Bounce)
Texture Frames and Animations
Sorting Particles
Custom Particle Processor
Extend ParticleProcessor to apply custom per particle logic each frame. Implement update(particle, delta, step, t) :
Custom Particle Class
Extend Particle and override update for per particle behavior. Set via particleClass in config:
Configuration Reference
ParticleEmitterConfig Simple Properties
Property Type Default Description
active boolean true False = emitter does not update at all
emitting boolean true False = no new particles (alive ones still update)
blendMode string/number 0 Blend mode for rendering
frequency number 0 ms between flow cycles; 0 = every frame; 1 = explode
gravityX , gravityY number 0 Gravity in px/s^2
maxParticles number 0 Hard limit on total particle objects (0 = unlimited)
maxAliveParticles number 0 Max alive particles at once (0 = unlimited)
duration number 0 Auto stop after ms (0 = forever)
stopAfter number 0 Auto stop after N particles emitted (0 = unlimited)
advance number 0 Fast forward on creation (ms)
radial boolean true True = speed+angle; false = speedX/speedY
particleBringToTop boolean true New particles render on top
timeScale number 1 Time multiplier for updates
follow Vector2Like null Object to follow
followOffset Vector2Like Offset from follow target
trackVisible boolean false Match follow target's visibility
reserve number Pre allocate particle objects
particleClass function Particle Custom particle class
sortProperty string Particle property to sort by
sortOrderAsc boolean Sort ascending if true
ParticleEmitterConfig EmitterOp Properties
All accept the flexible value formats described above.
Property Default E/U Description
x , y 0 E+U Particle offset from emitter
speed 0 E Radial speed (sets speedX, deactivates speedY)
speedX , speedY 0 E Directional speed (sets radial=false)
angle {min:0,max:360} E Emission angle in degrees
scale 1 E+U Uniform scale (sets scaleX, deactivates scaleY)
scaleX , scaleY 1 E+U Non uniform scale
alpha 1 E+U Alpha transparency
rotate 0 E+U Rotation in degrees
tint 0xffffff E+U Tint color (WebGL)
color E+U Color array to interpolate (overrides tint)
colorEase Ease for color interpolation
lifespan 1000 E Lifetime in ms
delay 0 E Delay before visible (ms)
hold 0 E Hold at end of life before dying (ms)
quantity 1 E Particles per flow cycle
accelerationX/Y 0 E+U Acceleration (px/s^2)
maxVelocityX/Y 10000 E+U Max velocity
bounce 0 E+U Bounce restitution (0 1)
moveToX , moveToY 0 E+U Target position (overrides angle/speed)
E = emit only, E+U = emit + update (supports start/end, onUpdate)
Zone Config Properties
Config Key Type Properties
emitZone object or array { type: 'random', source: <shape }
{ type: 'edge', source: <shape , quantity, stepRate, yoyo, seamless, total }
deathZone object or array { type: 'onEnter'\ 'onLeave', source: <shape }
bounds object { x, y, width, height } or { x, y, w, h }
Events
All events are emitted on the ParticleEmitter instance itself.
Event String Callback Args When
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
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/Method Description
x , y World position of the well
power Force strength (negative to repel)
epsilon Min distance for force calc (default 100)
gravity Gravitational constant (default 50)
active Enable/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).