| Engine | Phaser 3.60 or newer |
|---|---|
| Language | TypeScript |
| Time to run | ~3 minutes |
| Level | Beginner — comfortable with Phaser scenes |
| Output | One TS class (~70 lines) |
| Dependencies | None beyond Phaser itself. |
The prompt
Open claude.ai/new and paste this in.
$ Build me a pixel-perfect camera helper for Phaser 3.60+ in TypeScript. // shape - A class PixelCamera that wraps a Phaser.Cameras.Scene2D.Camera. - Constructor: PixelCamera(scene, target: Phaser.GameObjects.Sprite, options). - Options object: { deadzoneWidth: 80, deadzoneHeight: 60, lerp: 0.1 }. - One public method: update() to be called from the scene's update loop. // behavior - Each frame, compute desired camera center. - If target is inside the deadzone rect (centered on current camera center), don't move. - If outside, lerp camera center toward target by options.lerp (per second, frame-rate independent). - After lerp, snap the camera scrollX and scrollY to Math.floor(). - Set camera.roundPixels = true on construction. // constraints - TypeScript strict-mode safe: no any, no //@ts-ignore. - Use Math.floor on scrollX/scrollY only after the lerp, not during. // return format - One file PixelCamera.ts in a code block. - Include a 6-line example showing how to use it from a scene's create() and update(). - No prose before or after.
Open in Claude ▸
Run · 3 min
What this gets you
Pixel art that stays pixel-perfect even when the camera is following a moving target. Without this, sprites get drawn at fractional pixel coordinates and look slightly fuzzy or strobe-y in motion.
Quick checklist
- roundPixels = true is set. This is half the fix. The other half is the floor on scrollX/Y.
- Lerp uses delta time. If lerp doesn't account for delta, your camera will move at different speeds at different frame rates.
- The deadzone is a real rectangle. If it's just a distance check, diagonal movement will feel wrong.
Full breakdown coming soon
The walkthrough with screenshots and a worked example for parallax layers is on the roadmap. Bookmark this page or check back on the blog.