# Camera Pan Zoom Controls

> Use when adding pan, zoom, and clamping to an isometric camera so the world stays crisp and within bounds across screen sizes.

- **Type:** Skill
- **Install:** `agentstack add skill-0xheycat-isometric-game-skills-camera-pan-zoom-controls`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [0xheycat](https://agentstack.voostack.com/s/0xheycat)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [0xheycat](https://github.com/0xheycat)
- **Source:** https://github.com/0xheycat/isometric-game-skills/tree/master/skills/camera-pan-zoom-controls
- **Website:** https://0xheycat.github.io/isometric-game-skills/demo/

## Install

```sh
agentstack add skill-0xheycat-isometric-game-skills-camera-pan-zoom-controls
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

1. Represent the camera as offset (x, y) and scale (zoom).
2. Apply it once per frame before drawing (translate then scale).
3. Pan by adding drag delta to the offset.
4. Zoom toward the cursor: adjust offset so the point under the cursor stays put.
5. Clamp offset and zoom so the view never leaves the map bounds.
6. Snap the final transform to whole pixels to avoid tile shimmer.
7. Feed the inverse transform into `tile-picking-interaction`.

```js
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).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [0xheycat](https://github.com/0xheycat)
- **Source:** [0xheycat/isometric-game-skills](https://github.com/0xheycat/isometric-game-skills)
- **License:** MIT
- **Homepage:** https://0xheycat.github.io/isometric-game-skills/demo/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-0xheycat-isometric-game-skills-camera-pan-zoom-controls
- Seller: https://agentstack.voostack.com/s/0xheycat
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.