# Canvas2d Isometric Renderer

> Use when building a Canvas 2D renderer that draws an isometric tilemap and sprites efficiently with correct ordering.

- **Type:** Skill
- **Install:** `agentstack add skill-0xheycat-isometric-game-skills-canvas2d-isometric-renderer`
- **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/canvas2d-isometric-renderer
- **Website:** https://0xheycat.github.io/isometric-game-skills/demo/

## Install

```sh
agentstack add skill-0xheycat-isometric-game-skills-canvas2d-isometric-renderer
```

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

## About

# Canvas2D Isometric Renderer

## Overview

This skill builds the core render loop: draw ground tiles back-to-front, then depth-sorted objects, using the grid math transform and the atlas. It is the backbone every gameplay skill plugs into.

## When to Use

- You need to actually draw the isometric world.
- Tiles or sprites render in the wrong order.
- You are wiring grid math + atlas into a render loop.

## Process

1. Use `isometric-grid-math` for all coordinate conversions.
2. Draw ground tiles in back-to-front order (by row+col).
3. Draw objects/characters AFTER tiles, sorted by depth (see `depth-sorting-occlusion`).
4. Source every image from the atlas (see `spritesheet-atlas-packing`).
5. Apply the camera transform once per frame (see `camera-pan-zoom-controls`).
6. Only draw tiles within the visible viewport (culling).
7. Keep the draw loop pure - no allocations per frame.

```js
for (const tile of tilesInView) drawTile(tile);
for (const obj of sortByDepth(objectsInView)) drawSprite(obj);
```

## Rationalizations (Stop Lying to Yourself)

| Excuse | Reality |
|---|---|
| "I will draw everything every frame" | Drawing off-screen tiles wastes the frame budget. Cull. |
| "Order does not matter much" | Wrong order = objects behind walls. Sort every frame. |

## Red Flags - STOP if you catch yourself:

- Drawing the entire map instead of the viewport.
- Allocating arrays/objects inside the draw loop.
- No separation between tile pass and object pass.

## Verification

You are NOT done until every box is checked:

- [ ] Ground tiles draw back-to-front correctly.
- [ ] Objects draw after tiles in depth order.
- [ ] Only visible tiles are drawn (culling works).

## 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-canvas2d-isometric-renderer
- 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%.