Skip to main content
skill CX Codex

godot4-isometric-tilemap — Claude Code skill for Godot 4 isometric

Sets up 2:1 isometric rendering in Godot 4 with TileMapLayer and Y-sort, so draw order and picking stop fighting you.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add 0xheycat/isometric-game-skills --skill godot4-isometric-tilemap -a claude-code
Open on GitHub

What godot4-isometric-tilemap does

Reach for this skill when an isometric scene in Godot 4 draws wrong: a character slips in front of a tile that should hide it, tiles overlap, or a mouse click lands on the wrong cell. The skill walks through six steps and calls out the excuses that keep you from doing it properly.

It starts at the TileSet: Tile Shape = Isometric, Tile Layout = Diamond Down, tile size matching your 2:1 footprint such as 64x32. Ground goes on a TileMapLayer, and Y Sort Enabled is turned on for that layer and its parent node. Every movable sprite gets its y_sort_origin at the feet, not the top. Coordinate conversion goes through the built-in local_to_map() and map_to_local() rather than hand-rolled math, which breaks once zoom or sorting changes.

One tile size and one anchor convention across all layers and scenes — that is the rule. Mix them and sorting drifts, and nudging sprite offsets will not save it. The skill targets Godot 4.3+ and TileMapLayer.

What it helps with

  • fix a character drawing in front of tall objects
  • set up a TileSet for 2:1 isometric on the first try
  • drop manual pixel offsets on sprites
  • pick the cell under the cursor accurately
  • keep one tile size and anchor across layers

Example prompts for the agent

  • Set up an isometric TileSet in Godot 4: Diamond Down, 64x32 tiles
  • My character draws over a tile that should occlude it — fix it with Y-sort and y_sort_origin
  • Add cell highlighting under the cursor using local_to_map() and map_to_local()

How to install godot4-isometric-tilemap

1Skills CLI (Vercel)

npx skills add 0xheycat/isometric-game-skills --skill godot4-isometric-tilemap -a claude-code

2Manually: put the files in place

~/.claude/skills/godot4-isometric-tilemap/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/godot4-isometric-tilemap/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about godot4-isometric-tilemap

How do I install godot4-isometric-tilemap in Claude Code?

Run npx skills add 0xheycat/isometric-game-skills --skill godot4-isometric-tilemap -a claude-code. The skill lands at ~/.claude/skills/godot4-isometric-tilemap/SKILL.md.

What does godot4-isometric-tilemap do?

It guides 2:1 isometric setup in Godot 4: tile shape and layout, Y-sort, sprite anchors, and coordinate conversion through the TileMapLayer API.

Which Godot version does it need?

Godot 4.3 or newer, since the skill relies on TileMapLayer.

Source text

SKILL.md · MIT
---
name: godot4-isometric-tilemap
description: Use when setting up correct 2:1 isometric rendering in Godot 4 with TileMapLayer + Y-sort, mapping this repo's engine-agnostic grid math and depth rules onto Godot's native APIs.
license: MIT
---

# Godot 4 Isometric TileMap

## Overview

Godot 4 supports isometric natively, but the defaults fight you: wrong tile shape, broken draw order, and magic pixel offsets that look fine until something moves. This skill maps the repo's tested concepts (grid math, depth sorting) onto Godot's `TileMapLayer` + Y-sort so it is correct the first time.

## When to Use

- Starting an isometric scene in Godot 4 (4.3+, `TileMapLayer`).
- Characters draw in front of / behind tiles they should not.
- Tiles overlap, or mouse picking selects the wrong cell.

## Process

1. TileSet: set Tile Shape = **Isometric**, Tile Layout = **Diamond Down**, and Tile Size to your 2:1 footprint (e.g. 64x32).
2. Put ground on a `TileMapLayer`. For anything that must sort against characters, enable **Y Sort Enabled** on the layer and its parent node.
3. Set each movable sprite's `y_sort_origin` to the tile's feet/anchor (not its top). This is Godot's version of the `depth = col + row` rule (see depth-sorting-occlusion).
4. Convert coordinates with the built-ins `local_to_map()` / `map_to_local()` instead of hand-rolled offsets (mirrors isometric-grid-math).
5. Mouse picking: `local_to_map(get_local_mouse_position())` to get the cell, then `map_to_local()` to snap a highlight (see tile-picking-interaction).
6. Keep ONE tile size and anchor convention across every layer and scene.

```gdscript
# grid <-> world: let Godot do the iso math
var cell: Vector2i = ground.local_to_map(ground.get_local_mouse_position())
var world: Vector2 = ground.map_to_local(cell)  # center of that tile
```

## Rationalizations (Stop Lying to Yourself)

| Excuse | Reality |
|---|---|
| "I'll nudge sprite offsets until it lines up" | Manual offsets break under Y-sort and zoom. Set `y_sort_origin` to the anchor. |
| "I'll write the iso math myself" | `local_to_map` / `map_to_local` are exact and tested. Use them. |

## Red Flags - STOP if you catch yourself:

- Y Sort disabled, or `y_sort_origin` left at the default (0,0).
- Hand-written screen<->grid math instead of the `TileMapLayer` API.
- Mixed tile sizes or anchors across layers.

## Verification

You are NOT done until every box is checked:

- [ ] TileSet shape = Isometric, layout = Diamond Down, 2:1 tile size.
- [ ] Y Sort on; a character sorts correctly walking around a tall object.
- [ ] Picking via `local_to_map` selects the cell under the cursor.
- [ ] Round-trip `local_to_map(map_to_local(cell))` returns the same cell.

© 0xheycat · MIT · 0xheycat/isometric-game-skills

Similar skills

All skills for Game dev and 3D: Unity, Unreal, Godot, Blender →

From the same set7

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor