I am trying to achieve the hexagon contour look you find in Civilization V:


I want to outline the area a unit can move to on a hexagon grid, so far I can get a list of all the tiles a unit can move to and from that select the tiles that are on the boundary, which looks like this:

Boundary Tiles

Assume the list of boundary tiles are in random order. I can also get a list of all the corners on each hex. As you can see above the island in the middle would create a hole in the contour shape, Civ 5 also seems to handle these holes nicely:

enter image description here


2 Answers 2


The logic is simple: your contour is the set of all the edges that separate border tiles from non-border tiles. You can code the following:

for each boundary tile
    for each edge
        if edge is shared with a hex tile that is NOT in the boundary tile list
            mark as contour edge
render all contour edges

Note that if you want the contour to encompass the whole green area, rather than just the boundary tiles, then the condition becomes "if edge is shared with a hex tile that is NOT in the green tile list", and the outer for loop becomes "for each tile in the green list"

  • \$\begingroup\$ Thanks! I don't even need to build the list of boundary tiles if I use the other condition. The only problem now is how do I order these edges? I can draw each edge independently but it would be more efficient if I could draw them as a poly-line. \$\endgroup\$
    – Perky
    Commented Nov 17, 2014 at 16:36
  • \$\begingroup\$ I doubt that polyline would be more efficient, as if you want to convert them to a polyline form you need to sort your edges appropriately, and that's going be a bit expensive if you do it naively. \$\endgroup\$
    – Babis
    Commented Nov 17, 2014 at 16:45
  • \$\begingroup\$ If you really need to build polylines, each edge endpoint is connected to two more edges. Only one of those two edges is the one you need to follow. There is a hex to your left, a hex to your right, and a hex in front of you. If the hex in front matches the one to the left, you need to follow the edge to the right; otherwise follow the edge to the left. \$\endgroup\$
    – amitp
    Commented Nov 17, 2014 at 17:38

Do you have edge connectivity? If so pick an edge you know to be on the boundary and add to your list. Working in a consistent winding order (clockwise or counter clockwise) pick a vertex of that esge. Look at all neighbouring edges that share that vertex. If an edge is on the boundary travel down it and add to your list. Rinse and repeat. Eventually you will return to the original edge. Now the contour is complete.

For this to work you need dat on vertices and which edges of which tiles share them. As you traverse some edges will be on the same tile and some will take you to neigjbourinf tiles. In the end you have a polyline in the order of the boundary which would let you smooth it like civ does.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .