Phaser Particles — Visual Effects and Emitters
In this tutorial, you will learn about Phaser Particles. We cover key concepts, practical examples, and best practices to help you master this topic.
Phaser particle system creates visual effects using configurable emitters that control particle speed, lifespan, gravity, scale, and color.
What You'll Learn
By the end of this guide, you will create particle emitters with textures, configure speed and lifespan, use gravity and angle for directional effects, emit particles on events, create explosions, and optimize performance.
Basic Particle
var particles = this.add.particles(0, 0, 'particle', {
speed: { min: 50, max: 100 },
lifespan: 1000,
scale: { start: 1, end: 0 },
emitting: true
});
particles.setPosition(300, 200);
Fire Effect
var fire = this.add.particles(300, 300, 'particle', {
speed: { min: 30, max: 60 },
angle: { min: 250, max: 290 },
lifespan: 800,
scale: { start: 0.5, end: 0 },
tint: [0xff6b35, 0xffd700],
alpha: { start: 0.8, end: 0 },
frequency: 20,
quantity: 2
});
Explosion Burst
function explode(x, y) {
var emitter = this.add.particles(x, y, 'particle', {
speed: { min: 100, max: 300 },
angle: { min: 0, max: 360 },
lifespan: 500,
scale: { start: 0.8, end: 0 },
tint: [0xff6b35, 0xffffff],
emitting: false
});
emitter.explode(30);
}
Following Particles
var trail = this.add.particles(0, 0, 'particle', {
speed: { min: 5, max: 15 },
lifespan: 400,
scale: { start: 0.3, end: 0 },
tint: 0x4ecdc4
});
trail.startFollow(player);
Common Mistakes
1. Missing Particle Texture
Particles need a texture. Use a small circle graphic or load a particle image.
2. Frequency Too Low
Frequency > lifespan causes gaps between particles. Set frequency < lifespan for continuous streams.
3. Not Using explode for Burst
For explosions, set emitting: false and call emitter.explode(count) for a one-shot burst.
4. Particle Count Too High
More than 2000 particles at once drops frame rate. Use quantity and maxParticles limits.
5. Angle Not Set Correctly
Angle 0 is right. 90 is down. 180 is left. 270 is up. Adjust for your effect.
Practice Questions
Q1: How do you create a particle emitter? A: Use this.add.particles(x, y, texture, config).
Q2: How do you make a continuous fire effect? A: Set emitting: true with frequency < lifespan.
Q3: How do you create a one-shot explosion? A: Set emitting: false and call emitter.explode(count).
Q4: How do particles follow a sprite? A: Call trail.startFollow(sprite).
Q5: How do you tint particles? A: Set tint as an array of hex colors. Particles randomly pick from the array.
Challenge: Build a magic spell effect where a burst of star particles shoots from the player toward the mouse cursor when clicked. Stars should have trailing tails.
FAQ
Try It Yourself
Create a fire particle effect.
<!DOCTYPE html>
<html>
<head>
<title>Phaser Particles</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Particle Demo</h2>
<button onclick="explode()">Explode</button>
<script>
var config = {
type: Phaser.AUTO,
width: 600,
height: 400,
backgroundColor: '#1a1a2e',
scene: {
create: function() {
// Create particle texture
var g = this.make.graphics({ add: false });
g.fillStyle(0xffffff);
g.fillCircle(4, 4, 4);
g.generateTexture('particle', 8, 8);
g.destroy();
// Fire particles
this.fire = this.add.particles(300, 300, 'particle', {
speed: { min: 20, max: 50 },
angle: { min: 260, max: 280 },
lifespan: 600,
scale: { start: 0.6, end: 0 },
tint: [0xff6b35, 0xffd700, 0xff4500],
alpha: { start: 0.9, end: 0 },
frequency: 30,
quantity: 1
});
this.emitter = this.fire;
this.add.text(300, 30, 'Fire Effect', { fill: '#ff6b35' }).setOrigin(0.5);
}
}
};
var game = new Phaser.Game(config);
function explode() {
if (game.scene.scenes[0]) {
var scene = game.scene.scenes[0];
// Create a burst
var burst = scene.add.particles(300, 250, 'particle', {
speed: { min: 100, max: 250 },
angle: { min: 0, max: 360 },
lifespan: 500,
scale: { start: 0.5, end: 0 },
tint: [0xff6b35, 0xffffff, 0xffd700],
emitting: false
});
burst.explode(20);
scene.time.delayedCall(1000, function() { burst.destroy(); });
}
}
</script>
</body>
</html>
What's Next
Add Websocket multiplayer.
WebSockets — WebSocket multiplayer. Tweens — Tween animations.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro