Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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
1  
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
add comment

3 Answers

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
add comment

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
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

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.