Click.
Bam!
BOOM💥
START SHIPPING
Click.
Bam!
BOOM💥
START

Isometric Grid Coordinates

Master 2.5D projection matrices and inverse screen-space mappings.

How does it work? ↓
Hover mouse to detect Tile.
Screen Pos: (0.0, 0.0)
Iso Tile (Col, Row): (0, 0)

True Isometric is exactly a 2:1 Width/Height ratio.

Code Snippet

Related Tools

Projecting 2D Arrays into 2.5D Space

Creating an "Isometric" game like Hades or classic RollerCoaster Tycoon doesn't actually require a 3D engine. It is entirely an illusion generated by mathematical projection.

An Isometric tilemap is just a standard 2D `int[][]` array. When rendering the level, we apply a mathematical formula to skew the X and Y coordinates. The industry standard is mapping the `X Axis` diagonally down-and-right, and the `Y Axis` diagonally down-and-left. Because pixels are squarish, a true isometric projection (30 degree angles) is virtually impossible to draw cleanly on an LCD without severe aliasing. Thus, the gaming industry universally adopted the 2:1 pixel ratio (where a tile is exactly twice as wide as it is tall) because it allows for perfectly clean stair-stepping pixel art.

Screen to Isometric Inverse Mapping

Rendering an isometric grid is easy, but discovering exactly which tile the player's physical mouse is clicking on is notoriously difficult mathematics. To solve this, we cannot use colliders. We must take the raw Screen `(X, Y)` coordinate of the mouse and feed it into an Inverse Matrix. This formula mathematically reverse-engineers the projection and returns the exact integer `(Column, Row)` index of the array that was clicked on.

Answers to Common Developer Questions

How do you render an Isometric Grid?
An Isometric grid is computationally just a standard 2D Cartesian grid that has been mathematically rotated by 45 degrees and scaled vertically by 0.5 (or 50%). To draw a tile at map coordinate `(Column, Row)`, the screen position is: `ScreenX = (Column - Row) * (TileWidth / 2)` and `ScreenY = (Column + Row) * (TileHeight / 2)`.
How do you detect which Isometric Tile the mouse is hovering over?
You must build an inverse mathematical function that converts physical Screen (X, Y) pixels back into Map (Column, Row) grids. The formula is: `Column = (ScreenX / HalfWidth + ScreenY / HalfHeight) / 2` and `Row = (ScreenY / HalfHeight - ScreenX / HalfWidth) / 2`. Because you want integers to lock the tile, you always `Math.floor()` the result.
How does Z-Sorting Work in an Isometric 2D game?
Because 2D isometric games don't actually use 3D math, drawing depth correctly requires sorting your sprites from back-to-front every single frame. The industry standard sorting algorithm calculates depth using the sum of the tile's coordinates: `Z-Index = Column + Row`. Larger sums represent tiles closer to the camera.