Melonjs Particles And Trails
Use this skill for particle effects and motion trails in melonJS, ParticleEmitter...
Install
npx skills add melonjs/melonJS --skill melonjs-particles-and-trails -g -a claude-code -y- Repository
- melonjs/melonJS6.4k
- Category
- Media
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
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.
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
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:
// 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:
