Playing Warlock though gave me a desire to make my own 3D Hexagon-based game. I decided to start out by making a map editor to draw the hexagon maps, and its development has forced me learn a lot of new things about hexagons and how to draw them.
1. Drawing Hexagons
There's many great articles out there on the internet about hexagons. The two I found most helpful are here and here. Although these pointed me in the right direction at times, I eventually had to solve it mostly on my own by treating the hexagons like overlapping squares.
This technique has the advantage of keeping the simple coordinate system of a square map, which I find highly desirable. This also means that hexagon map coordinates look like normal square map coordinates when saved.
I'll begin by showing the basic concept before moving on to the maths behind this. Look at this simple square map here.
Now if we were to convert the squares directly into hexagons, it'd look something like this:
Keeping in mind that our hexagons are positioned like squares, the squares would look like this:
Unfortunately, the hexagons are positioned like they're squares. This isn't how a hexagon map should look like, but it's easily fixed. If we shift the bottom row slightly to the right, and then shift the bottom row slightly upwards then the hexagons line up nicely.
Now let's shift that bottom row to the right, and then upwards. The result will be something like this:
You've probably noticed that the overlapping squares form some interesting right angled triangles. Look closer and you'll notice that the opposite side of the triangle is exactly the length of the top left line of the hexagon, and that the bottom right corner of the triangle (where the 90 degree angle is) is also dead in the center between the two squares above it.
These pictures have hopefully shown you exactly how much the bottom row needs to be shifted in order to snap into place with the row above it. To summarise:
- Shift the bottom row to the right by exactly 50% of the width of a square.
- Shift the bottom row upwards by the length of the triangle's opposite side (you can figure this out by constructing a right angled triangle whose opposite side is the length of a side of your hexagon).
One final thing to mention is that every second row should be shifted like this, so you can test if the X coordinate of the tile is odd, and if it is, then shift the tile.
2. Saving a hexagon map
As mentioned above, saving a map like this is very easy. Simply save it as you would any square tiled map.
3. Result
I'm fairly certain that's all there is to mention regarding hexagon maps. To perform calculations such as figuring out if a user is clicking on a hexagon, you can again use the boxes to determine which tile is being clicked.
Here's a screenshot from my 3D map editor (which is nearly finished). It positions 3D hexagons like I've described in this post.
