I love hexagons. In videogames, hexagons have come to mean strategy. The moment you see a hex grid on screen, you know that you are about to engage in thoughtful, strategic war gaming.
Hexagon grids have come to symbolize tactical battles, turn-based strategy, and wargaming played over top of a map. Take, for example, the recently released blockbuster Sid Meier’s Civilization V.
Or the board game Settlers of Catan. Or pretty much every single wargame ever.
Fantasy RPGs have hex grids in tactical battles, some puzzle games use them well, and war simulations (both in real world boardgames and computer games) are almost exclusively played on hexagon grids.
So why do hexagons work so well for strategic gameplay? Why not simply use a square gid? After all, pixels on screen use a square gid, as do arrays in ram, graph paper, and the like.
The main reason is that the directional math works better: from the center point of a hexagon, the distance to all surrounding hexes is equal. On a square grid if you move diagonally the distance is larger than if you go horizontally or vertically.
Hexagons add a little more flair in terms of graphics as well: instead of a basic graph-paper square grid, hexes allow for jagged terrain that looks more realistic.
Why not use octogons? With a corner at each of the 8 different diagonal directions, an eight-sided figure would be perfect in terms of matching the directions the arrow keys can generate. The reason we can’t use octogons is that they don’t tesselate properly; they don’t tile without overlaps. Octogons would indeed be perfect, if only we could tile them without any gaps.
Hexagon grids do pose some problems for the average game programmer.
Instead of being on a flat grid, each hex is surrounded by six other hexes. Luckily it is possible to define a hex grid using a regular two dimensional array – all you need to do is offset alternating rows of hexagons: in essence, you can conceptualize a hexagon grid as squares in memory (with regular x,y coordinates) but when rendering them on-screen, offset every second row half a tile horizontally.
Once this is accomplished it is a trivial task to implement all of gaming’s useful algorithms.
For example, you can get A-star pathfinding working with hexagons by simply checking six cells around a given point rather than a square grid’s four.
Here is an example of a working a-star pathfinding algorithms that works on a hex grid: http://www.amagam.com/hexpath/
Whenever a gamer sees a hex grid, they instantly know that the game is going to be some sort of tactics/strategy game. Hexagons are here to stay. And they are beautiful.
says:
Though they make for more natural looking terrain, they’re not so good for making buildings look right – you end up with either corners that you can’t get in to, or odd shaped angular structures.
How does R-Type Tactics deal with the very top and bottom row of tiles against those flat edges?
says:
R-Type Tactics simply doesn’t extend the hex grid all the way to the straight rows, avoiding the problem. One solution to wanting smooth lines for buildings is to do the same thing that you would do for diagonal lines in a square grid: draw the angled lines anyway, overlapping a small piece of an open tile. For example, in a hex grid, you can draw flat sides of buildings and they would only cover a tiny segment (between one sixth and a half depending on the angle) of an otherwise empty cell. Then mark that cell as either blocked or passable depending on how big the character sprites are, in the same way you would “alias” (allow the jaggies on) an a-star square grid to account for a diagonal line.
/ \_/ \_/ \_/ \_/
\_/ \_/ \_/ \_/ \
/ \_##########\_/
\_/ ##########/ \
/ \_##########\_/
\_/ \_/ \_/ \_/ \
/ \_/ \_/ \_/ \_/
You should get to know Neuroshima Hex definately!
Thanks for this great write-up of a great and under-appreciated technique for strategy games.
I wonder if/how you could use a basic ASCII map-drawing system like the one Akihabara uses (see the source code for Cap•Man to see what I mean). I could probably build a simple HTML5-and-jQuery-based hex mapping tool, but it’d be great to have a super-simple way to represent that map in a format that’s both human- and machine-readable.
Maybe I’m missing some obvious way to do this? I guess it’s just the programmer-human-readable part that suffers when you have to draw the hex grid as a 2D array.
says:
Although it takes a bit more work, you can definitely describe a hex map using ascii art, like in Cap-Man’s source code example where it uses the function asciiArtToMap() to change simple text strings into level data. I can think of two ways to do this. One would be to draw the map as a normal 2d grid (one byte per hex), but it wouldn’t look the same as the hex map in game, which makes drawing the map tough. Another way would be to make a 2d text grid that uses 8 bytes per hex (one for each side and two in the center) for full control of each side of the hex. Sadly this would make for a large amount of data. Like this:
One hex is represented by eight $’s, with dashes added for text formatting purposes:
________
___$$___
__$$$$__
___$$___
________
You are quite right, however, it gets a bit tougher to draw the data in a human-readable way when using ascii text, which by design is a 2d grid of bytes.