Particle effects in Phaser

Particles are many small, short-lived images used for fire, sparks, smoke and explosions. Phaser creates and recycles them through an emitter.

All Phaser examples Phaser: usage and stats

Particle effects in Phaser: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Generate the particle texture. A soft white dot is drawn with Graphics and saved with generateTexture('spark', 16, 16), so no image is loaded. [1]
Configure the emitter. this.add.particles(x, y, 'spark', config) creates an emitter. The config sets speed, angle, lifespan, gravityY, and start/end values for scale and alpha. [2]
Color and blend. A tint array gives each spark one of three warm colors, and blendMode: 'ADD' brightens overlapping sparks. [1]
Follow the pointer. On pointermove the emitter is moved with setPosition, so the fountain follows the mouse. [2]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import Phaser from 'phaser';

class Sparks extends Phaser.Scene {
  create() {
    // A small white dot as the particle texture
    const g = this.add.graphics();
    g.fillStyle(0xffffff, 1);
    g.fillCircle(8, 8, 8);
    g.generateTexture('spark', 16, 16);
    g.destroy();

    const emitter = this.add.particles(300, 330, 'spark', {
      speed: { min: 150, max: 320 },
      angle: { min: 245, max: 295 },
      gravityY: 300,
      lifespan: 1600,
      scale: { start: 0.9, end: 0 },
      alpha: { start: 1, end: 0 },
      tint: [0xfacc15, 0xf97316, 0xef4444],
      blendMode: 'ADD',
      frequency: 20,
    });

    this.input.on('pointermove', (pointer) => emitter.setPosition(pointer.x, pointer.y));

    this.add.text(12, 10, 'Move the mouse to drag the fountain', {
      fontSize: '16px', color: '#e5e7eb',
    });
  }
}

new Phaser.Game({
  type: Phaser.AUTO,
  parent: 'root',
  width: 600,
  height: 380,
  backgroundColor: '#111111',
  scene: Sparks,
});

Ctrl/⌘ + Enter runs

Sparks start right away from the bottom centre; move the mouse over the frame to drag the fountain. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with phaser 4.2.1. Needs WebGL.

More Phaser examples

Draw shapes in a Phaser scene Arcade physics in Phaser Tweens in Phaser Keyboard and pointer input in Phaser

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with Phaser? Ask AgentGid →