Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What angles and long-side:short-side ratios give the most aesthetically pleasing and graphically regular isometric (squashed, flat side up) hexes; that additionally resolve to whole pixel sizes for several sizes when rendered?

share|improve this question
There's some irony here in that to have visually pleasing hexagons in an isometric view, you will have to avoid actually isometric hexagons. – Grace Note May 16 '11 at 14:36
up vote 9 down vote accepted

Since you presenting the hexmap through an isometric view that shifts things around.

Here is the traditional version with horizontal hexes that are effectively squished in the vertical axis to make a pseudo-isometric look.

hex view 2

This takes a different approach with the hexes that are rotated to present no vertical or horizontal lines.

hex view 1

Either style can work, just depends on what you want to do, the primary direction players will move through the world, and how much you want to avoid zig-zagging.

share|improve this answer
Is that Heavy Metal: Map? :) – James Feb 15 '11 at 20:05

By "flat side up", I assume you mean "flat side horizontal" (as "up" could mean either the edge itself points up or it "faces" up, i.e. its normal points up).

I experimented with both orientations for a game I developed in college. Personally, I found "flat side vertical" hexagons more pleasing on the eyes. I could certainly be in the minority here, but I believe Civilization V uses the same orientation, so I'm definitely not alone. If you're not dead set on using one orientation over the other, then I suggest you experiment with both. Since most of the online resources I've found regarding hex grids use the "flat side horizontal" orientation, many equations you come across may require adjustments; this site should help.

I built my project with a resolution-independent UI framework that performed device pixel snapping automatically, so I didn't spend much time tweaking the angles and ratios. I believe each of my hexes had a bounding box of 96 device independent pixels squared (96 device pixels on a standard 96dpi display with scale = 1.0). You should be able to derive the rest from the screenshot :).

share|improve this answer
Heh, +1 for stealth pun. – Williham Totland Jan 5 '12 at 16:26

These are for flat side horizontal. The terminology I am using is from Amit's thoughts on grids page, with the additional language of "narrow side length" meaning the length of the squished non-horizontal sides.

equilateral (0 degree projection):
"height" = L√3
"wide width" = L
"narrow width" = L√3
narrow side length = L

45 degree projection:
"height" = L
"wide width" = L
"narrow width" = 2 * √(3/8)L
narrow side length = √(2)L

60 degree projection:
"height" = (3/2)L
"wide width" = L
"narrow width" = 2 * √(3/4)L
narrow side length = √(13/16)L

I calculated these by hand, so please check my work.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.