What is the difference between pointy-topped and flat-topped hexagons?

Pointy-topped hexagons have a vertical vertex at the top and bottom, while flat-topped hexagons have horizontal edges at the top and bottom. The projection formulas differ by a 30-degree rotation.

Updated: August 2026 • Verified v1.2

Hexagonal Tile Coordinate Picker (Screen Pixel to Hex)

Creative & DesignDesign

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

Pointy: q = (sqrt(3)/3*x - 1/3*y)/size, r = (2/3*y)/size; Cube Rounding: enforce rx + ry + rz = 0

Was this calculation helpful?

Understanding Your Results

Calculates fractional coordinates, applies cube rounding to identify the discrete Axial `(q, r)` and Cube `(x, y, z)` tile, returns snapped center pixel coordinates, and provides copy-ready TypeScript/JavaScript picking functions.

Practical Guidance & Next Steps

Cube rounding is the cleanest mathematical method for hex picking: convert to 3D cube coordinates, round each axis, and adjust the axis with the largest rounding error to enforce $x + y + z = 0$.

What is this?

A game development geometry utility that translates screen pixel coordinates into exact hexagonal tile grid indices using cube rounding.

How does it work?

1. Enter mouse screen coordinates (X, Y) and hex size/radius. 2. Choose Pointy-Top or Flat-Top orientation. 3. View discrete Axial/Cube tile indices, snapped center pixels, and copy TypeScript code.

Why use it?

Eliminates inaccurate hit-testing and edge-selection bugs on interactive hexagonal game maps.

Technical Scope & Calculation Limitations

Calculates standard regular planar hexagonal geometry.

Frequently Asked Questions

When converting pixel coordinates to hexes, the resulting coordinates are floating-point numbers. Cube rounding rounds each axis to the nearest integer, then recalculates the axis with the largest deviation to guarantee the invariant `rx + ry + rz = 0`.

Windows Desktop & Widget Options