ta-phaser-camera-work

name	ta-phaser-camera-work
description	Implements camera controls, bounds, and follow behavior. Use proactively when setting up camera controls, camera bounds, or follow behavior.
category	techartist

Phaser Camera Work

"Cinematic camera controls that enhance gameplay and storytelling."

When to Use This Skill

Use when:

• Setting up camera follow behavior
• Implementing camera bounds
• Creating cinematic sequences
• Building camera transitions
• Adding visual polish with camera

Quick Start

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

// Camera bounds
this.cameras.main.setBounds(0, 0, 2000, 2000);

Decision Framework

Need	Use
Player tracking	startFollow() with lerp
Confined area	setBounds()
Cinematic pan	pan() tween
Zoom effect	Camera zoom tween
Letterboxing	Custom camera for UI

Progressive Guide

Level 1: Basic Camera Setup

export class GameScene extends Phaser.Scene {
  create() {
    // Get reference
    const camera = this.cameras.main;

    // Set background color
    camera.setBackgroundColor("#2d2d2d");

    // Set bounds (world limits)
    camera.setBounds(0, 0, 2000, 1500);

    // Follow player
    camera.startFollow(this.player, true, 0.1, 0.1);

    // Set zoom
    camera.setZoom(1.5);

    // Center camera on spawn
    camera.centerOn(this.player.x, this.player.y);
  }
}

Level 2: Camera Follow Behaviors

export class GameScene extends Phaser.Scene {
  create() {
    // Tight follow (no lag)
    this.cameras.main.startFollow(this.player, true, 1, 1);

    // Loose follow (smooth lag)
    this.cameras.main.startFollow(this.player, true, 0.05, 0.05);

    // Horizontal only (side-scroller)
    this.cameras.main.startFollow(this.player, true, 0.1, 0);

    // Locked Y, free X
    this.cameras.main.startFollow(this.player, true, 0, 0.1);

    // With deadzone (player can move without camera moving)
    this.cameras.main.startFollow(., , , );
    ...(
      .. * ,
      .. * ,
    );
  }
}

Level 3: Cinematic Camera Moves

export class CutsceneScene extends Phaser.Scene {
  create() {
    // Pan to location
    const panToLocation = (x: number, y: number, duration = 2000) => {
      this.tweens.add({
        targets: this.cameras.main,
        x: x,
        y: y,
        duration: duration,
        ease: "Power2.easeInOut",
      });
    };

    // Zoom in on object
    const focusOn = (target: Phaser.GameObjects.Sprite, duration = 1000) => {
      this.tweens.add({
        targets: this.cameras.main,
        x: target.x,
        y: target.y,
        zoom: 2,
        duration: duration,
        ease: "Power2.easeInOut",
      });
    };

    
      = () => {
       camera = ..;

      
      camera.();
      camera.(.., ..);

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

    
      = () => {
      ..({
        : ..,
        : path.[].,
        : path.[].,
        : duration,
        : ,
        :  {
           progress = tween.;
           point = path.(progress);
          ...(point., point.);
        },
      });
    };
  }
}

Level 4: Multi-Camera Setups

export class GameScene extends Phaser.Scene {
  private gameCamera!: Phaser.Cameras.Scene2D.Camera;
  private uiCamera!: Phaser.Cameras.Scene2D.Camera;
  private minimapCamera!: Phaser.Cameras.Scene2D.Camera;

  create() {
    // Main game camera
    this.gameCamera = this.cameras.main;
    this.gameCamera.setName("game");
    this.gameCamera.setBounds(0, 0, 2000, 2000);
    this.gameCamera.startFollow(this.player);

    // UI camera (fixed, no scroll)
    this.uiCamera = this.cameras.add(0, 0, .., ..);
    ..();
    ..();
    ..();
    ..();

    
    . = ..(.. - , , , );
    ..();
    ..(, , , );
    ..();

    
    .
      .(.. - , , , , )
      .(, )
      .();

    
    .. = ;

    
    ..(.);
  }
}

Level 5: Advanced Camera Controller

class CameraController {
  private states = new Map<string, CameraState>();
  private currentState: string = "default";
  private tween?: Phaser.Tweens.Tween;

  constructor(private camera: Phaser.Cameras.Scene2D.Camera) {
    this.setupStates();
  }

  private setupStates() {
    // Default follow state
    this.states.set("default", {
      follow: null,
      lerp: 0.08,
      zoom: 1,
      deadzone: { x: 0.3, y: 0.3 },
    });

    // Combat state
    this.states.set("combat", {
      follow: null,
      lerp: 0.12,
      : ,
      : { : , :  },
    });

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

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

  () {
     state = ..(stateName);
     (!state || stateName === .) ;

    . = stateName;

    
     (.) {
      ..();
    }

    
    . = ....({
      : .,
      : state.,
      : duration,
      : ,
      :  {
        ..(state., state.);
         (state.) {
           w = .. * state..;
           h = .. * state..;
          ..(w, h);
        }
      },
    });
  }

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

  () {
     x =
      target  .. ? target. : target.;
     y =
      target  .. ? target. : target.;

    . = ....({
      : .,
      : x,
      : y,
      : duration,
      : ,
    });
  }

  
  () {
     startTime = .();

      = () => {
       elapsed = .() - startTime;
       (elapsed >= duration) {
        ..();
        ;
      }

       progress = elapsed / duration;
       currentIntensity = intensity * ( - progress);

      ..(, currentIntensity);

      ....(, update);
    };

    ();
  }

  
  () {
    . = ....({
      : .,
      : targetZoom,
      : duration,
      : ,
    });
  }
}

Camera Methods Reference

Method	Parameters	Description
startFollow(target)	target, roundPx, lerpX, lerpY	Follow game object
stopFollow()	-	Stop following
setZoom(level)	number	Set zoom level
setBounds(x, y, w, h)	bounds	Set world bounds
setDeadzone(w, h)	size	Set no-move zone
pan(x, y, duration)	position, ms	Pan to position
setLerp(lerpX, lerpY)	0-1 values	Set follow smoothness
setScrollFactor(x, y)	0-1 values	Set parallax
centerOn(x, y)	position	Center camera
ignore(objs)	array	Don't render objects

Anti-Patterns

❌ DON'T:

• Set lerp too high (jittery) or too low (laggy)
• Forget camera bounds for open worlds
• Use zoom without considering gameplay impact
• Mix coordinate systems when panning | Ignore camera in multi-camera setups | Change camera during player input

✅ DO: | Tune lerp for game feel | Set bounds for world limits | Test gameplay at different zoom levels | Use consistent coordinate systems | Name cameras for debugging | Change camera between gameplay segments

Camera Effect Presets

const CAMERA_PRESETS = {
  // Platformer
  platformer: {
    followLerp: 0.08,
    zoom: 1,
    deadzone: { x: 0.3, y: 0.4 },
  },

  // Top-down action
  topdown: {
    followLerp: 0.1,
    zoom: 1.2,
    deadzone: { x: 0.2, y: 0.2 },
  },

  // Bullet hell
  bullethell: {
    followLerp: 0.05,
    zoom: 1,
    deadzone: { x: 0.1, y: 0.1 },
  },

  // Cinematic
  cinematic: {
    followLerp: 0.03,
    zoom: 1,
    deadzone: { x: 0.05, y: 0.05 },
  },
};

Checklist

• Camera follow tuned for game feel
• World bounds set correctly
• Deadzone configured
• Multi-camera setup working
• Lerp values appropriate
• Camera effects don't break gameplay
• Minimap (if used) updating correctly

Reference

• Camera API — Camera docs
• Camera Manager — Manager API