ta-phaser-visual-fx

name	ta-phaser-visual-fx
description	Adds post-processing and camera effects to Phaser games. Use proactively when implementing visual polish, camera effects, or post-processing.
category	techartist

Phaser Visual FX

"Add visual polish with camera effects, post-processing, and visual feedback."

When to Use This Skill

Use when:

• Adding screen shake effects
• Implementing camera transitions
• Creating flash/fade effects
• Building visual feedback systems
• Adding post-processing effects

Quick Start

// Screen shake
this.cameras.main.shake(200, 0.01);

// Flash effect
this.cameras.main.flash(200, 255, 255, 255);

// Fade effect
this.cameras.main.fadeOut(300);

Decision Framework

Need	Use
Impact feedback	Screen shake
Scene transition	Fade effect
Damage indication	Red flash
Hit confirmation	Camera zoom
Ambiance	Tint/color grading

Progressive Guide

Level 1: Basic Camera Effects

export class GameScene extends Phaser.Scene {
  create() {
    // Screen shake
    const shakeEffect = (duration: number, intensity: number) => {
      this.cameras.main.shake(duration, intensity);
    };

    // Flash effect
    const flashEffect = (duration: number, color = 0xffffff) => {
      this.cameras.main.flash(duration, color);
    };

    // Fade effect
    const fadeOut = (duration: number) => {
      this.cameras.main.fadeOut(duration, 0, 0, 0);
    };

    const fadeIn = (duration: number) => {
      this.cameras.main.fadeIn(duration, 0, , );
    };

    
    ..(,  {
      (, );
    });
  }
}

Level 2: Visual Feedback Systems

export class GameScene extends Phaser.Scene {
  private cameraEffects!: CameraEffects;

  create() {
    this.cameraEffects = new CameraEffects(this);

    // Player hit feedback
    this.events.on("player-hit", (damage: number) => {
      this.cameraEffects.hitImpact(damage);
    });

    // Enemy death feedback
    this.events.on("enemy-death", (position: Phaser.Math.Vector2) => {
      this.cameraEffects.deathImpact(position);
    });

    // Level complete celebration
    this.events.on("level-complete", () => {
      this.cameraEffects.celebrate();
    });
  }
}

class CameraEffects {
   : ...;

  () {
    . = scene..;
  }

  () {
    
     intensity = .(damage / , );
    ..(
      ,
      ,
      ,
      ,
      ,
       {
          - progress * intensity;
      },
    );

    
    ..(,  + intensity * );
  }

  () {
    
    ..(, );
  }

  () {
    
    ...({
      : .,
      : ,
      : ,
      : ,
      : ,
    });

    
    ..(, , , );
  }
}

Level 3: Advanced Camera Work

export class GameScene extends Phaser.Scene {
  create() {
    // Camera follow with smoothing
    this.cameras.main.startFollow(this.player, true, 0.1, 0.1);

    // Set camera bounds
    this.cameras.main.setBounds(
      0,
      0,
      this.map.widthInPixels,
      this.map.heightInPixels,
    );

    // Camera deadzone (player can move without camera moving)
    this.cameras.main.setDeadzone(
      this.scale.width * 0.3,
      this.scale.height * 0.3,
    );

    // Dynamic zoom
    const zoomOnSprint = () => {
      this.tweens.add({
        targets: ..,
        : ,
        : ,
        : ,
      });
    };

      = () => {
      ..({
        : ..,
        : ,
        : ,
        : ,
      });
    };
  }
}

Level 4: Post-Processing Pipeline

export class GameScene extends Phaser.Scene {
  create() {
    // Custom post-processing pipeline
    const pipeline = this.cameras.main.setPostPipeline(CustomPipeline);

    // Adjust pipeline properties
    pipeline.setFloat2("resolution", this.scale.width, this.scale.height);
    pipeline.setFloat1("time", 0);

    // Animate shader time
    this.events.on("update", () => {
      pipeline.setFloat1("time", this.time.now / 1000);
    });
  }
}

// Custom pipeline shader
class CustomPipeline extends Phaser.Renderer.WebGL.Pipelines.PostFXPipeline {
  constructor(game: Phaser.Game) {
    super({
      game: game,
      : ,
      : ,
    });
  }
}

Level 5: Visual FX Manager

class VisualFXManager {
  private effects = new Map<string, () => void>();

  constructor(private scene: Phaser.Scene) {
    this.setupBuiltInEffects();
  }

  private setupBuiltInEffects() {
    // Hit effect
    this.effects.set("hit-light", () => {
      this.scene.cameras.main.shake(100, 0.005);
      this.scene.cameras.main.flash(50, 255, 100, 100);
    });

    this.effects.set("hit-heavy", () => {
      this.scene.cameras.main.shake(300, 0.02);
      this....(, , , );

      
      ... = ;
      ...(,  {
        ... = ;
      });
    });

    
    ..(,  {
       camera = ...;

      
      ...({
        : camera,
        : ,
        : ,
        : ,
        : ,
      });

      
      camera.(, , , );
    });

    
    ..(,  {
       camera = ...;

      
       distance = ...(
        camera..,
        camera..,
        x,
        y,
      );
       intensity = .(,  - distance / );

      camera.(, intensity);
      camera.(, , , );
    });

    
    ..(,  {
      ...({
        : target,
        : ,
        : ,
        : ,
        : ,
      });
    });
  }

  () {
     effect = ..(effectName);
     (effect) {
      effect.(, args);
    }
  }

  
  () {
    ..(name, effect);
  }
}

Anti-Patterns

❌ DON'T:

• Overuse camera shake (dizzying)
• Chain too many effects at once
• Use long fade durations (feels slow)
• Forget to reset time scale
• Apply effects to wrong camera
• Ignore camera bounds during effects

✅ DO:

• Keep effects short and punchy
• Layer effects carefully
• Use appropriate duration for action
• Always reset time scale
• Target specific cameras
• Maintain camera bounds

Visual FX Guidelines

Effect	Duration	Intensity	Use Case
Light Hit	50-150ms	Low	Small damage
Heavy Hit	200-400ms	High	Big damage
Explosion	200-500ms	Distance-based	Explosions
Power-up	100-300ms	Medium	Collectibles
Death	300-800ms	High	Player death
Pickup	100-200ms	Low	Items
Transition	300-600ms	N/A	Scene changes

Code Patterns

Camera Follow with Lerp

// Smooth follow with custom lerp
this.cameras.main.startFollow(this.player, true, 0.08, 0.08);

Multi-Camera Setup

create() {
  // Main game camera
  const mainCam = this.cameras.main;
  mainCam.setName('game');
  mainCam.startFollow(this.player);

  // UI camera (fixed)
  const uiCam = this.cameras.add(0, 0, this.scale.width, this.scale.height);
  uiCam.setName('ui');
  uiCam.setScrollFactor(0);
  uiCam.setZoom(1);
}

Screen Effects Combination

// Dramatic entrance
const dramaticEntrance = () => {
  // Start black
  this.cameras.main.setBackgroundColor("#000000");

  // Zoom in while fading in
  this.cameras.main.setZoom(0.5);
  this.cameras.main.fadeIn(1000);

  this.tweens.add({
    targets: this.cameras.main,
    zoom: 1,
    duration: 1000,
    ease: "Power2.easeOut",
  });
};

Camera Methods Reference

Method	Description
shake(duration, intensity)	Shake the camera
flash(duration, r, g, b)	Flash screen color
fadeOut(duration, r, g, b)	Fade to black
fadeIn(duration, r, g, b)	Fade from black
setZoom(level)	Set camera zoom
startFollow(target)	Follow game object
setDeadzone(w, h)	Set no-move zone
setBounds(x, y, w, h)	Set camera limits
pan(x, y, duration)	Move camera to position
setScrollFactor(x, y)	Set parallax factor

Checklist

• Effects have appropriate duration
• Camera bounds maintained
• Time scale reset after slow-mo
• Effects don't interfere with gameplay
• Multiple cameras handled correctly
• Effects are readable on screen
• Performance considered (many effects)

Reference

• Camera API — Camera docs
• PostFX Pipeline — Post-processing