Canvas2d isometric renderer
Skill 0xheycat/isometric-game-skills/skills/canvas2d-isometric-renderer
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 canvas2d-isometric-rendererAssembled 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 building a Canvas 2D renderer that draws an isometric tilemap and sprites efficiently with correct ordering.
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.8 KB, as published. Nobody here has run it
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
- Use
isometric-grid-mathfor all coordinate conversions. - Draw ground tiles in back-to-front order (by row+col).
- Draw objects/characters AFTER tiles, sorted by depth (see
depth-sorting-occlusion). - Source every image from the atlas (see
spritesheet-atlas-packing). - Apply the camera transform once per frame (see
camera-pan-zoom-controls). - Only draw tiles within the visible viewport (culling).
- Keep the draw loop pure - no allocations per frame.
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).