Pleasing isometric hexagons

by Williham Totland   Last Updated May 04, 2018 01:13 AM

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?

Answers 3

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 :).

Mike Strobel
Mike Strobel
November 04, 2010 15:55 PM

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.

November 04, 2010 21:31 PM

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.

Dan Healy
Dan Healy
February 15, 2011 18:35 PM

Related Questions

Map Tiles Visible

Updated September 25, 2017 07:13 AM

Isometric Tile-Based Pixel Game Code Structure

Updated August 11, 2017 16:13 PM