# Melonjs Particles And Trails

Use this skill for particle effects and motion trails in melonJS, ParticleEmitter...

- Repository: https://github.com/melonjs/melonJS (6430 stars)
- Category: Media
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add melonjs/melonJS --skill melonjs-particles-and-trails -g -a claude-code -y`
Codex: `npx skills add melonjs/melonJS --skill melonjs-particles-and-trails -g -a codex -y`
Cursor: `npx skills add melonjs/melonJS --skill melonjs-particles-and-trails -g -a cursor -y`
Gemini CLI: `npx skills add melonjs/melonJS --skill melonjs-particles-and-trails -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add melonjs/melonJS`

## Description

Use this skill for particle effects and motion trails in melonJS, ParticleEmitter configuration, burst versus stream emission, the referenceSpace frame of reference introduced in 20.2, 3D particle motion through elevation and minSpread/maxSpread in 20.8, and the Trail renderable. Covers the emitter that silently does nothing until you call an emit method. Triggers on: Trail3d, ribbon, exhaust trail, speed streak, ski track, tyre mark, ribbonNormal, ParticleEmitter, particles, particle editor, tune particles, spawn depth, volume, burstParticles, streamParticles, referenceSpace, ParticleEmitterSettings, elevation, minSpread, maxSpread, spawn area, Trail, explosion, smoke, sparks, debris, ring, exhaust, emitter, tintOverLife, colour over life, color over life, flame, fire.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Particles and trails

## An emitter does nothing until you tell it to emit

Adding a `ParticleEmitter` to the world is not enough. Nothing appears, and
nothing warns you.

```js
const emitter = new ParticleEmitter(x, y, {
    image: loader.getImage("spark"),
    totalParticles: 60,
    speed: 4,
    minLife: 200, maxLife: 800,
});

world.addChild(emitter);
emitter.streamParticles();     // continuous, or:
emitter.burstParticles();      // one shot
```

`streamParticles(ms)` takes an optional run time; without one it uses the
`duration` setting, which defaults to `Infinity`, a stream runs until
`stopStream()`. `burstParticles(n)` launches `n`, or `totalParticles`.

## Tuning an effect: the Particle Editor

Settings are easier to find by eye than by reasoning. The
[Particle Editor](https://melonjs.github.io/melonJS/examples/#/particle-editor)
runs one emitter live, with every setting on a slider, from a preset (fire,
smoke, rain, explosions, 3D bursts and rings…), a built-in texture or a sprite
(sheet) of your own, under a 2D camera or an orbiting 3D one. It writes out the
matching `new ParticleEmitter(...)` call, listing only what differs from the
defaults, and the same settings as JSON, in the emitter's own units, to load at
run time:

```js
// preloaded with { name: "smoke-fx", type: "json", src: "data/fx/smoke.json" }
const effect = loader.getJSON("smoke-fx");
const emitter = new ParticleEmitter(x, y, {
    ...effect.settings,
    // no `image` for the plain square: `getImage` would give null
    ...(effect.image ? { image: loader.getImage(effect.image) } : {}),
});
```

Point a user there when they are tuning numbers by trial and error.

It covers every setting that changes how one emitter looks, but not:

The rest: https://github.com/melonjs/melonJS/blob/HEAD/packages/melonjs/skills/melonjs-particles-and-trails/SKILL.md