Range unit 01

Camera policy / npm 0.1.0

Keep the whole party in frame.

One small, inspectable camera policy for two-to-four-player browser games. Feed it rectangles; get a stable pose, visible safety envelope, and replayable proof.

Calibrate the camera

An illustrated mid-century optical instrument holding four game pieces inside a red framing reticle.
Optical policy4 subjects / 1 frame

Live viewfinder

See the safety margin working.

The vermilion box is the padded safe area. Change the formation or nudge a selected player; the exported camera policy does every piece of framing below.

Formation
A live camera view showing player rectangles inside a padded safety envelope.

The live viewfinder displays world-space players, the camera bounds, and a red padded safe area. Current values are repeated in the readout after the canvas.

Center X0000.0
Center Y0000.0
Zoom1.000×
SafeYES

Focus the viewfinder and use arrow keys to nudge. Press Space to pause.

Calibrating the camera…

Under 30 lines

Own the policy. Keep your renderer.

Coordinates are world pixels, +x right and +y down. The output is a top-left position and a pixels-per-world-pixel zoom—plain values that slot into Phaser, Pixi, Canvas, or WebGL.

Padding
Viewport pixels
Targets
Axis-aligned rectangles
Empty list
Holds the last pose
World edge
Camera clamps
camera.ts17 lines
import { createCamera } from 'multiplayer-camera-kit'

const camera = createCamera({
  viewport: { width: 1280, height: 720 },
  world: { x: 0, y: 0, width: 4096, height: 2048 },
  padding: 96,
  minZoom: 0.5,
  maxZoom: 1.5,
})

function tick(dt: number) {
  const pose = camera.update(players, dt)
  world.position.set(-pose.x * pose.zoom, -pose.y * pose.zoom)
  world.scale.set(pose.zoom)
}
No engine adapter required

Deterministic trace runner

Turn “someone fell off-screen” into a failing test.

Timestamped rectangles are interpolated and replayed at a fixed simulation step. The report names the first target, time, and policy limit that failed.

MCK / replay receipt

Ready to run

Choose a known-good trace or a deliberate limit breach.

Policy, not framework

Small enough to audit between playtests.

  1. 01

    Fit the party

    Union the target rectangles, reserve screen-space padding, and preserve the viewport aspect ratio.

  2. 02

    Respect the rails

    Clamp against world bounds and explicit zoom limits. Impossible framing becomes visible metadata, never a surprise.

  3. 03

    Prove the path

    Replay target traces at a fixed step and assert the same safety rule you inspect in development.

MIT licensed / no telemetry

Your players move. Your framing math doesn’t have to.

Inspect the source