Depth sorting occlusion
Skill 0xheycat/isometric-game-skills/skills/depth-sorting-occlusion
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 depth-sorting-occlusionAssembled 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 sprites draw in the wrong order so characters appear in front of objects they should be behind in an isometric scene.
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
Depth Sorting & Occlusion
Overview
In isometric, draw order IS depth. A character is behind a tree if its anchor tile sorts earlier. This skill gives the correct sort key and handles tall/multi-tile objects that break naive sorting.
When to Use
- Characters render in front of trees/walls they should be behind.
- Tall or multi-tile objects sort incorrectly.
- You added objects and the layering looks wrong.
Process
- Give every drawable a depth key based on its anchor tile: depth = row + col.
- Sort all objects by depth ascending before drawing.
- For ties, break by a secondary key (e.g. y, then creation order).
- For multi-tile objects, sort by the FRONT-most occupied tile.
- For very tall objects, consider splitting into stackable slices.
- Re-sort only when objects move, not every frame if static.
- Test the classic case: walk a character around all four sides of a tree.
objects.sort((a, b) => (a.row + a.col) - (b.row + b.col));
Rationalizations (Stop Lying to Yourself)
| Excuse | Reality |
|---|---|
| "Painter order by y is good enough" | Pure y fails for multi-tile and tall sprites. Use anchor row+col. |
| "I will sort once at load" | Moving objects must re-sort. Sort on movement. |
Red Flags - STOP if you catch yourself:
- Sorting by raw y instead of anchor tile.
- Multi-tile objects using their center instead of front tile.
- Characters clipping through tall buildings.
Verification
You are NOT done until every box is checked:
- Walking around all sides of an object always sorts correctly.
- Multi-tile and tall objects occlude properly.
- Sorting updates when objects move.