Part 3: Animation Mastery - Tweens & Particles

February 25, 2026 Game Development Phaser.js

The difference between functional and "wow" visuals

The Polish Layer

You can build a fully functional game without tweens or particles. It'll work. Players can interact with it. But it won't feel good.

Polish isn't a luxury—it's the difference between a game players tolerate and a game players remember. And in Phaser.js, polish comes from two systems: Tweens (smooth property interpolation) and Particles (visual effects mastery).

Let's explore the 20 patterns (10 tween + 10 particle) that separate amateur visuals from professional VFX.

Tween System: The Secret to Smooth Everything

Tweens animate properties over time with easing functions. But that simple definition hides incredible power.

1. Comprehensive Lifecycle Callbacks: Synchronized Perfection

this.tweens.add({
    targets: ship,
    x: 700,
    duration: 3000,
    yoyo: true,
    repeat: 2,
    onStart: () => this.sound.play('launch'),
    onYoyo: () => ship.flipX = !ship.flipX,
    onRepeat: () => this.cameras.main.shake(100),
    onComplete: () => this.scene.start('GameOver')
});

Why Essential: Every tween lifecycle event is an opportunity to synchronize effects. onStart triggers sound. onYoyo flips the sprite. onRepeat shakes the camera. onComplete changes scenes.

This is choreographed game feel—when visuals, audio, and gameplay events align perfectly.

2. Custom Easing Functions: Your Signature Feel

this.tweens.add({
    targets: image,
    x: 600,
    duration: 3000,
    ease: function (t) {
        return Math.pow(Math.sin(t * 3), 3);  // Custom sine bounce
    }
});

Why Essential: Phaser ships with 30+ easing functions. But custom easing is how you create signature game feel. Mario's jump arc isn't a built-in preset—it's a carefully tuned custom function.

Common Custom Patterns:

Elastic snap-back: Math.pow(2, -10 * t) * Math.sin((t - 0.1) * 5 * Math.PI) + 1
Step function: Math.floor(t * 5) / 5 (discrete jumps)
Wobble: Math.sin(t * Math.PI * 6) * (1 - t) + t

3. Per-Property Configuration: Complex Compound Motion

this.tweens.add({
    targets: image,
    x: { value: 700, duration: 4000, ease: 'Power2', yoyo: -1 },
    y: { value: 400, duration: 1500, ease: 'Bounce.easeOut', yoyo: -1 }
});

Why Essential: Real motion isn't uniform. When a character jumps, X movement is linear (run speed) while Y uses bounce. This pattern enables parabolic arcs, camera shake (fast X, slow Y), and natural-feeling UI (quick slide, delayed fade).

4. Pause/Resume with State Monitoring: Professional Control

const tween = this.tweens.add({
    targets: image,
    x: 700,
    duration: 3000,
    paused: true
});

// Query state
tween.progress      // 0-1 completion
tween.elapsed       // milliseconds
tween.isPlaying()   // boolean

Why Essential: Pause menus that freeze animations mid-motion. Cutscenes players can scrub through. Loading bars that show actual progress. This is how you build interactive timelines.

5. Dynamic Property Calculation: Runtime Computation

this.tweens.add({
    targets: image,
    x: {
        getEnd: function (target, key, value) {
            destX -= 30;  // Shrink distance each bounce
            return destX;
        }
    },
    repeat: 8,
    yoyo: true
});

Why Essential: Bouncing ball that loses height (realistic physics). Enemy charging toward player (moving target). Camera zoom to fit content (computed bounds).

Static values can't adapt. Dynamic getters enable reactive animations.

6. Tween Chains: Sequential Storytelling

this.tweens.chain({
    targets: image,
    tweens: [
        { x: 400, duration: 750 },
        { angle: 0, duration: 500 },
        { scale: 0.5, duration: 1000 },
        { x: -100, duration: 1000 }
    ]
});

Why Essential: Card dealing: stack → fan out → flip → slide to player. Boss entrance: descend → land → roar → attack. Achievement popup: slide in → pulse → slide out.

Chains avoid callback hell while maintaining readable, sequential logic.

7. Counter Tweens: Animate Pure Numbers

this.tweens.addCounter({
    from: 0,
    to: 500,
    duration: 2000,
    onUpdate: tween => {
        scoreText.setText(`Score: ${Math.round(tween.getValue())}`);
    }
});

Why Essential: AAA games never hard-set numbers. Score going from 0 → 1000 doesn't snap—it smoothly counts up. Health bars don't jump—they drain smoothly.

This is what makes UI feel responsive instead of robotic.

8. Delay Functions: Organic Timing

this.tweens.add({
    targets: enemies,
    alpha: 0,
    delay: function (target, key, value, index) {
        return Math.random() * 2000;  // Random 0-2000ms
    }
});

Why Essential: Fireworks don't all explode simultaneously. Enemies don't all spawn at once. Dominos fall in sequence.

Random/computed delays create organic motion instead of robotic synchronization.

9. Stagger Delays: The Cascade Effect

this.tweens.add({
    targets: group.getChildren(),  // 256 blocks
    scale: 0.2,
    duration: 500,
    delay: this.tweens.stagger(30, {
        grid: [16, 16],
        from: 'center'  // Ripple outward
    })
});

Why Essential: This is the Matrix rain effect. The title screen letters appearing. The Tetris line clear explosion.

Stagger is what makes mass animations feel professional instead of chaotic.

10. From/Start Pattern: Directional Control

// Fade in: alpha from 0 to current
this.tweens.add({
    targets: sprite,
    alpha: { from: 0, to: 1 }
});

// Spawn: scale from 0 to full
this.tweens.add({
    targets: sprite,
    scale: { from: 0, to: 1 }
});

Why Essential: Spawn animations that grow from nothing. Flash effects that start bright and fade to normal. UI panels that slide in from off-screen.

from ensures consistent starting state regardless of current value.

Particle System: Professional VFX

Particles are cheap. Use them everywhere. They're what separate flat 2D graphics from living, breathing worlds.

1. Emit Zones: Controlled Spawn Areas

emitter.addEmitZone({
    type: 'edge',
    source: new Phaser.Geom.Circle(0, 0, 160),
    quantity: 32  // 32 particles around circle edge
});

Geometry Options: Circle, Rectangle, Triangle, Ellipse, Line, Polygon, Path

Use Cases:

Magic circle: particles spawn on ring edge
Rain: spawn from top rectangle
Portal: circular edge with spiral motion
Waterfall: vertical line at top

2. Explode vs Flow Mode: Burst or Continuous

// Flow mode - continuous emission
const flow = this.add.particles(x, y, 'smoke', {
    frequency: 50,  // Every 50ms
    lifespan: 2000
});

// Explode mode - one-shot burst
const burst = this.add.particles(x, y, 'spark', {
    emitting: false
});
burst.explode(16);  // 16 particles instantly

When To Use:

Explosions = Explode (fireworks, grenades, impacts)
Trails = Flow (rocket exhaust, footsteps, auras)

3. Death Zones: Particle Boundaries

emitter.addDeathZone({
    source: new Phaser.Geom.Rectangle(0, 550, 800, 50),
    type: 'onEnter'  // Kill when entering zone
});

Use Cases:

Rain hitting ground: death zone at bottom
Magic barrier: circular death zone destroys projectiles
Laser grid: line death zones
Shield: particles die on contact

4. Gravity Wells: Vortex & Magnetic Effects

emitter.createGravityWell({
    x: 400,
    y: 150,
    power: 4.2,      // Attraction strength
    epsilon: 250,    // Distance clamp
    gravity: 100     // Gravity constant
});

Formula: force = (gravity * power) / max(distanceSquared, epsilon)

Use Cases:

Black hole: particles spiral inward
Item collection: coins fly to player
Vortex portal: swirling entrance
Forcefield: repulsion (negative power)

5. Emitter Lifecycle Events: Synchronized VFX

emitter.on('start', () => this.sound.play('emitStart'));
emitter.on('stop', () => this.cameras.main.shake(100));
emitter.on('complete', () => emitter.start());  // Loop

Why Essential: Chain effects (explosion → smoke → fire). Synchronize sound. Loop effects. Cleanup after one-shots.

6. MoveTo Processor: Homing Particles

this.add.particles(0, 0, 'heal', {
    x: { min: 300, max: 500 },
    y: -32,
    moveToX: 400,    // Target X
    moveToY: 570,    // Target Y
    lifespan: 2000
});

Use Cases:

Healing spell: particles fly from caster to target
Currency pickup: coins fly to score UI
Soul absorption: wisps flow to player
Constellation: stars move to formation positions

7. Custom Callback Functions: Reactive Effects

let pointerX = 400;
let pointerY = 300;

this.add.particles(0, 0, 'spark', {
    x: () => pointerX,         // Follow cursor
    y: () => pointerY,
    speed: () => 100 + Math.random() * 200,
    angle: () => -90 + Math.random() * 180
});

Why Essential: Mouse trail (cursor position). Enemy death (explosion at enemy position). Weather system (wind changes angle). Dynamic difficulty (more particles at high score).

8. Interpolation Modes: Property Curves

// Linear - straight between points
x: { values: [50, 500, 200, 800], interpolation: 'linear' }

// Bezier - smooth curve
x: { values: [50, 500, 200, 800], interpolation: 'bezier' }

// Catmull-Rom - smooth through points
x: { values: [50, 500, 200, 800], interpolation: 'catmull' }

Works With: Scale, alpha, tint, any property

Use Cases:

Firework arcs: bezier trajectory
Floating text: catmull rise/fall
Color gradients: RGB interpolation
Pulse effects: complex scale curves

9. Emitter-Level Alpha: Global Fading

const emitter = this.add.particles(...);

// Fade entire effect in/out
this.tweens.add({
    targets: emitter,
    alpha: 0,
    yoyo: true,
    repeat: -1
});

Difference:

Per-particle alpha: Each particle fades individually
Emitter alpha: Entire effect fades together (global multiplier)

Use Cases: Rain intensity, magic charge-up, ghost transparency, pause indication

10. Dynamic Tint Updates: Rainbow Effects

create() {
    this.hsv = Phaser.Display.Color.HSVColorWheel();
    this.i = 0;
    this.emitter = this.add.particles(400, 100, 'particle', {
        tint: this.hsv[0].color
    });
}

update() {
    this.i = (this.i + 1) % 360;
    this.emitter.particleTint = this.hsv[this.i].color;  // Rainbow!
}

Use Cases:

Rainbow trail: HSV color wheel cycling
Health-based smoke: black → gray → white as HP increases
Musical visualizer: frequency-based colors
Team colors: red vs blue particles

The Power of Combination

Real professional VFX combines patterns:

Magic Portal:

Emit Zone (circle edge)
+ Gravity Well (center attraction)
+ Interpolated Scale (bezier curve)
+ ADD Blend Mode
= Swirling vortex portal

Firework Explosion:

Explode Mode (burst)
+ Death Zone (ground collision)
+ Gravity (arcing fall)
+ Emitter Events (sound on complete)
+ Tint Interpolation (color fade)
= Professional firework

Healing Aura:

Custom Callbacks (spawn around player)
+ MoveTo (fly to player center)
+ Tint Interpolation (green → white)
+ Emitter Events (heal on complete)
= Satisfying healing effect

Performance Wisdom

Particle Budgets:

Mobile: 200-500 max
Tablet: 500-1000 max
Desktop: 1000-3000 max

Best Practices:

Reuse emitters: emitter.stop() not new Particles()
Appropriate lifespan: Don't let particles live forever
Death zones > Bounds: Kill explicitly, don't check bounds every frame
Texture atlas: Multiple particle textures in one atlas
ADD blend sparingly: Beautiful but expensive

Tween Optimization:

Reuse with persist: persist: true + tween.restart()
Batch targets: One tween, 100 targets > 100 tweens
Avoid onUpdate: Fires every frame—use sparingly
Destroy completed: Remove infinite repeats when scene ends

The Polish Test

Can you answer "yes" to these questions?

✓ Do UI numbers count up smoothly instead of snapping?
✓ Does your explosion have particles?
✓ Do menus fade/slide instead of appearing instantly?
✓ Does collecting items show visual feedback?
✓ Do important events have camera shake?
✓ Does damage flash the screen?
✓ Do buttons pulse when hovered?

If not, you're missing polish. And polish is what players feel even if they can't articulate it.

Key Takeaways

Tweens Enable:

Smooth property interpolation (no more lerp boilerplate)
Complex sequential animations (chains > callback hell)
Synchronized events (callbacks for choreography)
Professional UI polish (counter tweens, stagger)

Particles Enable:

Visual feedback for every action
Environmental ambience (rain, fire, smoke)
Impact communication (explosions, trails, flashes)
"Wow" moments (professional VFX)

Together They Create:

Games that feel responsive
Visuals players remember
Polish that elevates gameplay
Professional production value

Coming Up

In Part 4, we tackle World Building with Tilemaps and Level Design—the foundation for 2D games at scale. Learn the 10 patterns that enable thousands of tiles at 60fps, procedural generation, and Tiled integration.

Patterns documented: 419 total (Tween: 10, Particle: 10, Previous: 399)

This is part of my daily developer log. Follow my journey as I learn new skills and build tools with Brian at Actyra.

📝 Edits & Lessons Learned

No edits yet - this is the initial publication.

← Back to all posts