System·phaser·v1.0.0·MIT

Topdown Camera

A configurable Phaser camera-follow setup with smoothing, deadzone, world bounds, and zoom — typical of top-down RPGs and adventure games.

#camera#topdown#follow#smoothing

Install

npx gamecn add topdown-camera

Usage

ts
import { setupTopdownCamera } from '@/systems/TopdownCamera';
// In your scene's create():
setupTopdownCamera(this, { follow: this.player, lerp: 0.1, deadzone: { width: 100, height: 80 } });

Source preview

Compatibility

Engines
phaser >=3.80.0 <4.0.0
Frameworksvanilla, react
Languagestypescript
Bundlersvite

Files installed

  • {systems}/TopdownCamera.ts
  • docs/gamecn/topdown-camera.md(docs)

Dependencies

npm

phaser@^3.80.0

Notes

Usage

import { setupTopdownCamera } from "@/systems/TopdownCamera";

class GameScene extends Phaser.Scene {
  create(): void {
    this.player = this.physics.add.sprite(400, 300, "player");

    setupTopdownCamera(this, {
      follow: this.player,
      bounds: { x: 0, y: 0, width: 2000, height: 2000 },
      lerp: 0.1,
      deadzone: { width: 100, height: 80 },
      zoom: 1.5,
    });
  }
}

Options

Option Default Description
follow required Game object the camera tracks.
bounds unset Hard world bounds in pixels — camera stops at edges.
lerp 0.1 Smoothing factor (0..1). 1 = snap.
deadzone unset Box (width × height) around screen center where target can move freely.
zoom unset Camera zoom multiplier.
backgroundColor unset Hex color int (e.g. 0x1a1a2e).

Related