As I stated in my last post about map generation, I was satisfied by Voronoi as a map representation system, but it was not the right tool for me because I needed a wrap-wround map.
After some googling I found another great post by Amit Patel that describes in great detail hexagonal maps, so I decided to use an hexagonal grid for my map. It seemed a good compromise.
Good and fascinating. A regular hexagon:
- can be inscribed inside a circle;
- is composed of six equilateral triangles with 60° angles inside;
- is composed by six edges and six vertices, each edge having the same size.
There are a lot of other interesting facts about hexagons. Last but not least hexagons can be easily found in nature (e.g. honeycombs) and it’s often considered nature’s perfect shape:
Back to my goal of map generation, hexagonal maps are not so easy to deal with due to the nature of the hexagons themselves. As Amit’s says:
Squares share an edge with four neighbors but also touch another four neighbors at just one point. This often complicates movement along grids because diagonal movements are hard to weight properly with integer movement values. You either have four directions or eight directions with squares, but with hexagons, you have a compromise—six directions. Hexagons don’t touch any neighbor at only a point; they have a small perimeter-to-area ratio; and they just look neat. Unfortunately, in our square pixel world of computers, hexagons are harder to use…
In any case, having found no libraries to deal with hexagons in js, I decided to write one: hexagonal.js. I tried to give the library enough flexibility to be used following any of the approaches described by Amit in his post. At the moment some features are still missing (like the cube coordinates) but I’ll add them in the next few days along with demos and better documentation.
Here you can find a codepen demo that uses an hexagonal map and a heightmap.
Leave a Reply