Design, Games, Programming

Dehexifying a hex map. Say what?

21 Comments

Hexagon has appealing characteristics for a map tile. It has six neighbours and the distance from any hexagon to its neighbour is exactly same. More traditional square based map tile has eight neighbours and distance varies from 1 to 1.414.., depending on in which direction particular neighbour is located at. However, they both have one characteristic in common, they look dull.

If you take a closer look at Small World map you will see that map tiles have hexagonal aspect and they do not look dull. Tiles have pretty strong border in high contrast which separates tiles from each other. Hexagon segments have been deformed and the tiles are textured using hand drawn textures with some extra details on top of them. These little finishing touches make them look great and pretty hard to spot hexagon aspect when you look at the map.

As a part of Farout project I have been playing around with Dehexifying algorithm to make hexagon map looks something like Small World map in the image above. Algorithm is simple, yet the results are quite stunning. Algorithm can be divided into following steps:

  1. Create vertices for hexagon map (in my implementation caller gives number of hexagons in horizontal and vertical direction, and width of one hexagon as parameters)
  2. Connect vertices into segments, every segment contains exactly two vertices at this point (segments reference to vertices, therefore altering one vertex affects every other segment using same vertex)
  3. Create hexagons from segments (hexagons reference segments, therefore modifying one segment alters other hexagons using same segment)
  4. Deform the vertices (this could be done before step 3 it just happens to be 4th step in my implementation)
  5. Split segments into several vertices. Number of vertices created for segment depends on the segment’s length after step 4. The longer the segment is the more vertices will be created.
  6. Deform newly created vertices to make segments non planar.

 

Dehexifying algorithm steps
Dehexifying algorithm steps

 

After these six steps hexagon map looks surprisingly lot like a Small World map, depending on how well your deforming algorithms work. One has to remember that this is just a model for the dehexified map – what it really looks like depends on rendering algorithm, which I will talk more about in my next post.

Dehexified map example
Dehexified map example with textured rendering

21 thoughts on “Dehexifying a hex map. Say what?”

  2. It’s doable. We can do more refining in later phases of the map generation and as one refinement we can combine several hexagons into regions. So regions would be the ones that have border and they could have more than six neighbours.

  14. Im impressed, I must say. Really rarely do I come across a weblog thats each informative and entertaining, and let me let you know, youve hit the nail on the head. Your blog is crucial; the concern is some thing that not adequate people are talking intelligently about. Im really happy that I stumbled across this in my search for some thing relating to this issue.

  17. I’ll gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod. (There are other players worth considering out there, like the Sony Walkman X, but I hope this gives you enough info to make an informed decision of the Zune vs players other than the iPod line as well.)

Leave a Reply