# How to draw the contour of a hexagon area, like in Civ 5

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:

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:

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"

• 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. – Perky Nov 17 '14 at 16:36
• 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. – Babis Nov 17 '14 at 16:45
• 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. – amitp Nov 17 '14 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.