Hexagonal grid debugger

 from Red Blob Games
01 Dec 2018

pixel x = {{mouseover.x.toFixed(0)}} y = {{mouseover.y.toFixed(0)}}
hex, fractional = q:{{mouseoverFractionalHex.q.toFixed(3)}} r:{{mouseoverFractionalHex.r.toFixed(3)}} s:{{mouseoverFractionalHex.s.toFixed(3)}} ( x:{{mouseoverFractionalHex.q.toFixed(3)}} y:{{mouseoverFractionalHex.s.toFixed(3)}} z:{{mouseoverFractionalHex.r.toFixed(3)}} )
hex, rounded = q:{{mouseoverHex.q}} r:{{mouseoverHex.r}} s:{{mouseoverHex.s}} ( x:{{mouseoverHex.q}} y:{{mouseoverHex.s}} z:{{mouseoverHex.r}} )
differences = q-r:{{(mouseoverFractionalHex.q-mouseoverFractionalHex.r).toFixed(3)}} r-s:{{(mouseoverFractionalHex.r-mouseoverFractionalHex.s).toFixed(3)}} s-q:{{(mouseoverFractionalHex.s-mouseoverFractionalHex.q).toFixed(3)}}

orientation =

{{maxDistance}}

This is a debugging tool I use sometimes. The dashed line represents the pixel axes x=0, y=0. Move the mouse around and look at the hex coordinates at the bottom.

Email me , or tweet @redblobgames, or comment: