Explaining the Hexagon Layout class

From Red Blob Games's Blog

On the Hexagon Implementation page I have a Layout class that controls how to convert back and forth between hexagonal coordinates and screen coordinates. It has parameters (size.x, size.y, origin) that aren't explained on the hexagon concepts page. That's in part because they complicate the explanation and aren't hexagon-specific. The size is a standard scale transform and the origin is a standard translate transform. Although I have some explanation on the implementation page, it's not very good. I made some improvements:

1. Added axes and measurements to the visualizations so that you can see how the size and origin parameter affect the size and position of the hexagons.
2. Added common uses of these two parameters, in a more “how to” style. The size is useful for stretching/shrinking your hexagons to match pixel/sprite art, or for flipping the y-axis. The origin is useful for setting x=0,y=0 to be the origin hexagon's top left instead of its center.

Here's how the size example looked before. I gave two different sizes and showed these diagrams:

Here's how the size example looks after. I give the two sizes, but the reader can read the sizes by looking at the axis labels, and can also visually see the dimensions formed by the measurements lines. I also give the formula instead of making the reader figure it out themselves.

I'm pretty happy with this change. Fitting hexagons to existing sprite art is something I knew was possible but I hadn't sat down with pen & paper to figure the formulas out until now.

Labels: design , hexagons