0xheycat Camera Pan & Zoom Controls
Overview
A camera is a single transform applied before drawing. This skill implements pan (drag), zoom (toward cursor), and clamping to map bounds, keeping tiles pixel-aligned to avoid shimmer.
When to Use
- The world is bigger than the screen.
- You need drag-to-pan and scroll-to-zoom.
- Tiles shimmer or the camera leaves the map.
Process
- Represent the camera as offset (x, y) and scale (zoom).
- Apply it once per frame before drawing (translate then scale).
- Pan by adding drag delta to the offset.
- Zoom toward the cursor: adjust offset so the point under the cursor stays put.
- Clamp offset and zoom so the view never leaves the map bounds.
- Snap the final transform to whole pixels to avoid tile shimmer.
- Feed the inverse transform into
tile-picking-interaction.
ctx.setTransform(zoom,0,0,zoom, -cam.x*zoom, -cam.y*zoom);
Rationalizations (Stop Lying to Yourself)
| Excuse | Reality |
|---|---|
| "Zoom toward center is fine" | Users expect zoom toward the cursor. Anchor the zoom point. |
| "Clamping is optional" | Without clamps the player pans into the void. Clamp to bounds. |
Red Flags - STOP if you catch yourself:
- Zoom anchored to screen center, not cursor.
- No bounds clamping.
- Sub-pixel camera offsets causing shimmer.
Verification
You are NOT done until every box is checked:
- Drag pans and scroll zooms toward the cursor.
- Camera is clamped within map bounds at all zooms.
- Transform snaps to whole pixels (no shimmer).