Particle effects are a powerful tool in game development, allowing you to create visually engaging elements such as explosions, fire, smoke, rain, magic spells, and more. Phaser provides a robust particle system that is both flexible and easy to use.
In this section, you will learn:
- What particle effects are and where they are used
- How to create and configure particle emitters in Phaser
- How to control particle behavior and appearance
- Practical examples and exercises
- What Are Particle Effects?
Particle effects are visual effects made up of many small images (particles) that are generated, animated, and destroyed over time. They are commonly used for:
- Explosions
- Fire and smoke
- Rain, snow, and weather effects
- Magic spells and power-ups
- Environmental effects (e.g., leaves blowing in the wind)
Key Concepts:
- Emitter: The source that creates and controls particles.
- Particle: A single visual element, usually a small image or shape.
- Config: Settings that define how particles behave (speed, lifespan, color, etc.).
- Creating a Basic Particle Emitter in Phaser
Phaser’s particle system is based on the ParticleEmitterManager and ParticleEmitter classes.
Step-by-Step Example
Let’s create a simple particle effect (e.g., a burst of stars when the player clicks).
1. Load a Particle Image
First, preload a small image to use as a particle (e.g., a star):
2. Create the Emitter
Add the emitter in the create method:
// In your scene's create method
const particles = this.add.particles('star');
const emitter = particles.createEmitter({
x: 400,
y: 300,
speed: { min: -200, max: 200 },
angle: { min: 0, max: 360 },
scale: { start: 0.5, end: 0 },
blendMode: 'ADD',
lifespan: 1000,
quantity: 20,
on: false // Only emit when triggered
});Explanation:
this.add.particles('star'): Creates a particle manager using the 'star' image.createEmitter({...}): Configures the emitter.x,y: Initial position.speed: Range of particle speeds.angle: Direction range (0-360° for all directions).scale: Particles shrink from 0.5 to 0.blendMode: 'ADD' makes particles glow.lifespan: How long each particle lives (ms).quantity: Number of particles per burst.on: false: Emitter is off by default (manual bursts).
3. Trigger the Effect
Emit particles when the player clicks:
this.input.on('pointerdown', (pointer) => {
emitter.setPosition(pointer.x, pointer.y);
emitter.explode(20, pointer.x, pointer.y);
});Explanation:
pointer.x,pointer.y: Mouse/touch position.emitter.explode(quantity, x, y): Emits a burst of particles at the given position.
- Particle Emitter Configuration Options
Here’s a table summarizing common emitter configuration options:
| Option | Description | Example Value |
|---|---|---|
x, y |
Emitter position | 400, 300 |
speed |
Particle speed (can be range) | { min: -200, max: 200 } |
angle |
Emission angle (degrees, can be range) | { min: 0, max: 360 } |
scale |
Particle size (start/end or fixed) | { start: 1, end: 0 } |
alpha |
Particle transparency (start/end or fixed) | { start: 1, end: 0 } |
lifespan |
How long particles live (ms) | 1000 |
quantity |
Number of particles per emission | 10 |
blendMode |
How particles blend with background | 'ADD', 'NORMAL' |
on |
Whether emitter is active continuously | true or false |
- Practical Example: Continuous Rain Effect
Let’s create a continuous rain effect using particles.
// In preload
this.load.image('raindrop', 'assets/raindrop.png');
// In create
const rain = this.add.particles('raindrop').createEmitter({
x: { min: 0, max: 800 },
y: 0,
lifespan: 2000,
speedY: { min: 300, max: 500 },
scale: { start: 0.2, end: 0.1 },
quantity: 2,
blendMode: 'NORMAL'
});Explanation:
x: { min: 0, max: 800 }: Rain falls across the width of the screen.y: 0: Starts at the top.speedY: Controls how fast raindrops fall.quantity: 2: Two raindrops per frame for a denser effect.onistrueby default, so the effect is continuous.
- Exercise: Create a Firework Effect
Task:
Create a firework effect that bursts at a random position when the player clicks anywhere on the screen. Use a colorful particle image (e.g., a small circle).
Steps:
- Preload a particle image (e.g., 'circle.png').
- Create a particle emitter with:
- Randomized speed and angle
- Short lifespan
- Colorful appearance (try using
tintor different images)
- On pointer down, emit a burst at the click position.
Starter Code:
// preload
this.load.image('circle', 'assets/circle.png');
// create
const particles = this.add.particles('circle');
const emitter = particles.createEmitter({
speed: { min: -300, max: 300 },
angle: { min: 0, max: 360 },
scale: { start: 0.3, end: 0 },
lifespan: 800,
quantity: 30,
blendMode: 'ADD',
on: false
});
this.input.on('pointerdown', (pointer) => {
emitter.setPosition(pointer.x, pointer.y);
emitter.explode(30, pointer.x, pointer.y);
});Solution Explanation:
- The emitter is configured for a burst effect with 30 particles.
blendMode: 'ADD'makes the effect more vibrant.- The effect is triggered at the pointer location.
Common Mistakes & Tips:
- Make sure the image path is correct and the image is small (e.g., 16x16 px) for best results.
- If nothing appears, check the
blendModeandlifespanvalues. - Experiment with
tintto add color variation:tint: { start: 0xff0000, end: 0xffff00 }
- Summary
- Particle effects are essential for adding visual flair to your games.
- Phaser’s particle system uses emitters to control how and when particles are created.
- You can customize particle behavior with a wide range of configuration options.
- Practice by creating different effects (explosions, rain, fireworks) to understand how each setting changes the result.
Next Steps:
In the next topic, you’ll learn about Tweens and Animations, which allow you to animate game objects smoothly and create even more dynamic effects!
Phaser - Game Development with JavaScript
Module 1: Introduction to Game Development and Phaser
- What is Game Development?
- Overview of Phaser
- Setting Up Your Development Environment
- Your First Phaser Project
Module 2: Phaser Basics
- Understanding the Game Loop
- Game Configuration and Scenes
- Loading and Displaying Images
- Working with Text
- Handling Input (Keyboard and Mouse)
Module 3: Sprites and Animation
Module 4: Game Physics and Interactivity
- Introduction to Physics in Phaser
- Enabling Physics on Sprites
- Collisions and Overlaps
- Interactive Objects and Events
