How do you convert screen mouse clicks to isometric tile coordinates?

The formula is `tileX = Math.floor((screenX / halfW + screenY / halfH) / 2)` and `tileY = Math.floor((screenY / halfH - screenX / halfW) / 2)` where `halfW = tileWidth / 2` and `halfH = tileHeight / 2`.

Updated: August 2026 • Verified v1.2

Isometric Pixel Art 2:1 Dimetric Grid & Tile Calculator

Creative & DesignDesign

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

Angle = arctan(0.5) = 26.565 deg; Screen_W = (Cols + Rows) * (TileW / 2); Screen_H = (Cols + Rows) * (TileH / 2)

Was this calculation helpful?

Understanding Your Results

Calculates true stair-stepping angle ($26.565^\circ$), total map bounding canvas in pixels, half-width/height offsets, and generates coordinate projection functions (`isoToScreen` and `screenToIso`) for game engines.

Practical Guidance & Next Steps

Standard video game 'isometric' projection is mathematically dimetric with a 2:1 pixel ratio (2 pixels horizontal for every 1 pixel vertical) to avoid jagged anti-aliasing artifacts on pixel displays.

What is this?

A game development geometry utility that calculates dimensions and coordinate conversion formulas for isometric pixel art.

How does it work?

1. Select a tile preset (64x32, 128x64, 32x16) or custom dimensions. 2. Enter map grid columns and rows. 3. View pixel angle, map canvas size, and copy coordinate conversion code.

Why use it?

Guarantees seamless tile alignment and clean non-aliased pixel stair-stepping in 2D game engines.

Technical Scope & Calculation Limitations

Calculates standard 2:1 dimetric pixel grid specifications.

Frequently Asked Questions

True isometric projection uses a 30° angle, which cannot be cleanly rendered on a square pixel grid without uneven stair-stepping. A 2:1 slope (arctan 0.5 ≈ 26.565°) steps exactly 2 pixels right for every 1 pixel down, creating perfectly crisp retro pixel lines.

Windows Desktop & Widget Options