I Have been looking for a tutorial for this kind of thing for a while now, and have found none that solves the problem since it is a niche.

I assume what you want is something like this.

A line that surround a collections of hexagons.

I will also assume You have the following:

• A list or array of the tiles needed surrounding(and that it only needs 1 outline)
• A way to grab the surrounding 6 tiles
• A outline that can be generated by a series of points

I will be numbering the surrounding tiles as

First, pick any edge tile in the list.

Check the tiles surrounding it in order.

If the tile is not in the list. We that segment to the outline. and continue.

If it is, we move to that tile, remembering which direction we came from.

In this example, We check the 0 and 1 tiles. they are not in the list. Then we check the 2 tile, which is in the list. so we move to that and repeat.

But now, we start to check from where we come from. we came from number (2 + 3) % 6 = 5 relative to the second tile. So we start checking from 0.

Continue until you reach the first segment(not tile) since a tile can be visited multiple time.

This will not work when tiles are not at the edge already.

This will not work when the tiles are not connected or when the outline needs multiple lines.

If you know how to improve this, please tell me

The simplest implementation, using math:

1. Start with an empty array of line segments to draw
2. For each hexagon in the selected set
   1. For each side of the hexagon
      1. If that side connects to another hexagon in the set, continue
      2. Else add this side to the array of line segments to draw
3. Draw the line segments in the array

This algorithm is linear in number of hexagons to draw, as long as “test whether neighbor is member of the set” is linear (e g, uses a hash table or bit mask or similar.)

A fancier implementation, using the GPU:

1. Prep the stencil buffer (or some render target) to “empty”
2. Draw each hexagon in the selection set to “full”
3. Now, use the stencil buffer or render target in screen space, detecting the pixels where neighbors have different state – these make up “border” pixels

This algorithm uses slightly less CPU, and gives a more pixel perfect result, BUT may end up consuming more fill rate, if you're on a fill rate limited platform, and/or if you can't add the “is on border” test into other geometry you're already drawing.