PixiJS Particles — Creating Visual Particle Systems
In this tutorial, you will learn about PixiJS Particles. We cover key concepts, practical examples, and best practices to help you master this topic.
PixiJS particle systems emit many small sprites with configurable behavior for fire, smoke, rain, and magical effects.
What You'll Learn
By the end of this guide, you will create particle emitters with @pixi/particle-emitter, configure particle config for lifespan, speed, scale, and color, use emitter for fire and smoke effects, apply gravity and rotation, and optimize particle performance with max particles.
Basic Particle Emitter
var emitter = new PIXI.particles.Emitter(container, [texture], {
emit: true,
lifespan: 1.5,
speed: { start: 100, end: 50 },
scale: { start: 0.5, end: 0.1 },
alpha: { start: 1, end: 0 },
frequency: 0.02
});
Fire Effect
var fireConfig = {
emit: true,
lifespan: 1.0,
speed: { start: 80, end: 20 },
scale: { start: 0.4, end: 0.05 },
alpha: { start: 0.8, end: 0 },
color: { start: '#ff6b35', end: '#ffd700' },
frequency: 0.01,
maxParticles: 200
};
Rain Effect
var rainConfig = {
emit: true,
lifespan: 2.0,
speed: { start: 300, end: 400 },
scale: { start: 0.05, end: 0.02 },
alpha: { start: 0.6, end: 0.1 },
rotationSpeed: { start: 0, end: 0 },
frequency: 0.005,
spawnType: 'rect',
spawnRect: { x: -200, y: -50, w: 800, h: 10 }
};
Updating Emitter
app.ticker.add(function(delta) {
emitter.update(delta * 0.01);
});
Common Mistakes
1. Not Calling update
Emitter.update(delta) must be called every frame. Without it, no particles appear.
2. lifespan Too Short
Lifespan under 0.3 seconds makes particles invisible. Start at 0.5-2 seconds.
3. maxParticles Too Low
If maxParticles is reached, new particles stop emitting. Set high enough for the desired density.
4. Missing Texture
The particle texture is required. Without it, particles render as white squares.
5. Not Cleaning Up
Call emitter.destroy() when done to free GPU resources.
Practice Questions
Q1: What npm package provides particles? A: @pixi/particle-emitter.
Q2: How do you update the emitter? A: Call emitter.update(delta) each frame with elapsed time in seconds.
Q3: What does lifespan control? A: How long each particle exists in seconds before fading.
Q4: How do you control particle color? A: Use the color config with start and end hex color strings.
Q5: How do you stop the emitter? A: Set emitter.emit = false. Existing particles finish their lifespan.
Challenge: Build a magic wand effect: when clicked, emit a burst of star particles with rainbow colors that expand outward and fade. Add a trail effect with smaller particles.
FAQ
Try It Yourself
Create a fire particle effect.
<!DOCTYPE html>
<html>
<head>
<title>PixiJS Particles</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pixi/particle-emitter@5/dist/pixi-particle-emitter.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Particle Demo</h2>
<button onclick="toggleFire()">Toggle Fire</button>
<script>
var app = new PIXI.Application({ width: 400, height: 300, background: 0x1a1a2e });
document.body.appendChild(app.view);
var emitterContainer = new PIXI.Container();
app.stage.addChild(emitterContainer);
// Create a small circle texture for particles
var g = new PIXI.Graphics();
g.beginFill(0xffffff);
g.drawCircle(0, 0, 8);
g.endFill();
var texture = app.renderer.generateTexture(g);
var emitter = new PIXI.particles.Emitter(emitterContainer, texture, {
emit: true,
lifespan: 1.2,
speed: { start: 60, end: 20 },
scale: { start: 0.5, end: 0.05 },
alpha: { start: 0.9, end: 0 },
color: { start: '#ff6b35', end: '#ffd700' },
frequency: 0.01,
maxParticles: 150,
pos: { x: 200, y: 280 }
});
var fireOn = true;
function toggleFire() {
fireOn = !fireOn;
emitter.emit = fireOn;
}
app.ticker.add(function(delta) {
emitter.update(delta * 0.016);
});
</script>
</body>
</html>
What's Next
Implement drag and drop.
Drag Drop — Drag and drop interaction. Interaction — Event handling.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro