About

Isometric projection maps three-dimensional space onto a two-dimensional plane using a fixed viewing angle. The standard 2:1 ratio projects a Cartesian point (x, y) into isometric space by rotating the axes 45° and scaling the vertical axis by a factor of 0.5. Getting this transform wrong means tile misalignment, click-target drift, and broken pathfinding in any isometric game engine. This tool computes the exact forward and inverse projection so you can validate coordinates without debugging render loops.

The conversion assumes a true 2:1 isometric ratio where the tile width is twice the tile height. This matches the convention used by most 2D game frameworks (Phaser, LibGDX, Tiled). Note: this tool operates in screen-space coordinates. If your engine applies a camera offset or viewport scaling, you must subtract those before feeding values here. Pro tip: batch-convert your tilemap origin points first, then spot-check edge tiles to catch off-by-one errors early.

Formulas

The isometric projection used here follows the standard 2:1 diamond (staggered) convention. The forward transform converts Cartesian coordinates into isometric screen space:

iso_x = cart_x − cart_y

iso_y = cart_x + cart_y2

The inverse transform recovers Cartesian coordinates from isometric screen positions:

cart_x = 2 ⋅ iso_y + iso_x2

cart_y = 2 ⋅ iso_y − iso_x2

In matrix form, the forward projection is:

iso_xiso_y = 1−10.50.5 ⋅ cart_xcart_y

Where cart_x and cart_y are the original Cartesian coordinates, iso_x is the horizontal screen offset, and iso_y is the vertical screen offset. The matrix has determinant −1, confirming it is invertible. The factor of 12 on the second row produces the characteristic 2:1 width-to-height diamond ratio.

Reference Data

Property	Cartesian System	Isometric System (2:1)
Axis Orientation	Orthogonal (90°)	Rotated 45°, scaled vertically
Tile Shape	Square	Diamond (rhombus)
Width : Height Ratio	1 : 1	2 : 1
x-axis direction	Right →	Down-right ↘
y-axis direction	Up ↑	Down-left ↙
Forward Transform: iso_x	-	cart_x − cart_y
Forward Transform: iso_y	-	(cart_x + cart_y) ÷ 2
Inverse Transform: cart_x	(2 ⋅ iso_y + iso_x) ÷ 2	-
Inverse Transform: cart_y	(2 ⋅ iso_y − iso_x) ÷ 2	-
Common Tile Sizes	32×32, 64×64 px	64×32, 128×64 px
Use Case: RPGs	Top-down view	Pseudo-3D depth illusion
Use Case: Strategy	Grid-based movement	SimCity / Civilization style
Use Case: Architecture	Floor plans	Technical axonometric drawings
Rotation Matrix Angle	0°	45°
Vertical Scale Factor	1.0	0.5
Determinant of Transform	1	−1 (reflection + scale)
Invertible?	Yes (identity)	Yes (non-singular matrix)
Pixel-Perfect at	Any integer	Even x + y sums
Mouse Hit Detection	Simple AABB	Point-in-diamond test required
Scrolling Complexity	Linear offset	Diamond-shaped viewport culling
Z-Order Sorting	By y coordinate	By cart_x + cart_y
Origin Convention	Bottom-left or top-left	Top center of map diamond

Frequently Asked Questions

The 2:1 ratio means tile width is exactly twice tile height. This produces diamond tiles whose edges align perfectly on a pixel grid at integer coordinates, avoiding sub-pixel rendering artifacts. A true 30° dimetric projection would use a ratio of approximately 1.732:1, which causes fractional pixel positions and visible seam lines in tile-based rendering. The 2:1 convention sacrifices geometric accuracy for pixel-perfect alignment.

Negative isometric coordinates are mathematically valid and represent positions to the upper-left of the origin in screen space. The inverse transform handles them correctly. However, if your game engine uses unsigned tile indices, you must apply an offset: add half the map width to iso_x and half the map height to iso_y before indexing into your tile array.

No. This tool implements strictly the 2:1 isometric (equal-measure) projection. Dimetric projections use two different axis scales, and trimetric projections use three. Those require different transformation matrices with custom angle parameters. The formulas here assume exactly 45° rotation with 0.5 vertical scaling.

The raw coordinate transform is independent of tile size. To convert from tile indices to pixel positions, multiply by tile dimensions after the transform: screen_x = iso_x × (tileWidth / 2) and screen_y = iso_y × (tileHeight / 2). The tool's optional tile size field applies this scaling automatically.

The tool uses a mathematical origin where the Cartesian y-axis points upward and x-axis points rightward. In screen space (where y increases downward), the isometric y-component is effectively inverted. If your engine uses screen-space y-down convention, negate the cart_y input or invert the iso_y output depending on your pipeline stage.

Mouse coordinates are in screen space (Cartesian). You must apply the inverse transform to convert screen pixel position to isometric tile index. Common errors include forgetting to subtract the camera/viewport offset before transforming, or using integer truncation instead of Math.floor for negative coordinates, which rounds toward zero rather than downward.