Camera pan zoom controls
Skill 0xheycat/isometric-game-skills/skills/camera-pan-zoom-controls
Agent-ready toolkit for isometric games: ComfyUI art pipelines, seamless terrain, sprites, grid math, Canvas2D rendering, pathfinding, and asset automation.
npx -y skills add 0xheycat/isometric-game-skills --skill camera-pan-zoom-controlsAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Use when adding pan, zoom, and clamping to an isometric camera so the world stays crisp and within bounds across screen sizes.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
1.7 KB, as published. Nobody here has run it
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).