# Pleasing isometric hexagons

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

• There's some irony here in that to have visually pleasing hexagons in an isometric view, you will have to avoid actually isometric hexagons. May 16, 2011 at 14:36

## 4 Answers

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.

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

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.

• Is that Heavy Metal: Map? :) Feb 15, 2011 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 :).

• Heh, +1 for stealth pun. Jan 5, 2012 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.

http://www-cs-students.stanford.edu/~amitp/game-programming/grids/hex-grid-metrics-labeled.png

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.

Necroing a dead thread, but I actually stumbled upon this and it helped what I'm trying to achieve.

However, it seems to me that the answer by Dan Healy is incorrect, or maybe just the math notation failed since the original post.

In any case, I am doing the same - viewing hexagons under a certain angle, keeping it orthogonal, and here is my math.

The terms I use are just 'height' and 'width', with the following meaning:

0 degree projection (bird's eye):

width = X
height = (sqrt(3)/2) * X
example: width = 140, height = 121 (approx)


The other projections simply take cos(angle) and multiply the height by that, so...

45 degree projection:

width = X
height = (sqrt(3)/2) * X * cos(45)
example: width = 140, height = 121 * cos(45) = 85.6 (approx)


60 degree projection (most 'eye pleasing' in my opinion):

width = X
height = (sqrt(3)/2) * X * cos(60)
example: width = 140, height = 121 * cos(60) = 60.5


Of course, if I am mistaken, feel free to correct me.

Full disclosure: the hex I used comes from Kenney's free assets, specifically this one

New contributor
Mahana is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.