How to draw an outline over a shape composed of many squares in a square grid?

I have a square grid, I need to display movement range. I can already compute which squares are within the movement range.

45171-sqauregridmove1.png

In that example, the squares with X’s are within the move range. Red X’s represent the exterior of the move range. The blue X is the starting point (where the character is).

But I want to draw an outline over all the squares in that collection of squares (they are currently stored in a generic Dictionary). How do I do that?

45172-sqauregridmove2.png

I edited the screenshot to show what I want. I want to draw that orange line somehow.

I can pretty much get that I need to check each side of the red X squares, if the neighboring square isn’t part of the move range, I should draw a line for that side. I would probably store all those in some list.

My problem is the line drawing method requires an ordered list of points (to draw lines on each resulting pair of Vector3 positions in that list), so I need to sort what I got, and that’s what I have no idea how to do so.

It gets even more difficult when I need to consider a move range with “holes” in them. Like this:
alt text

I colored it in a lighter shade of orange to compare.

If you did achieve, may you share your solution please. Looking for the same thing.

this is the first post that comes up on google so i thought i’d share my solution for my tile-based game:

    public class GizmoExtras 
    {
        public static void DrawAreaOutline(List<Vector3Int> area, Color color)
        {
            Gizmos.color = color;
            foreach (Vector3Int tilePos in area)
            {
                if (!area.Contains(tilePos + Vector3Int.left))
                    Gizmos.DrawLine(tilePos, tilePos + Vector3Int.up);
                if (!area.Contains(tilePos + Vector3Int.down))
                    Gizmos.DrawLine(tilePos, tilePos + Vector3Int.right);
                if (!area.Contains(tilePos + Vector3Int.right))
                    Gizmos.DrawLine(tilePos + Vector3Int.right, tilePos + new Vector3Int(1, 1, 0));
                if (!area.Contains(tilePos + Vector3Int.up))
                    Gizmos.DrawLine(tilePos + Vector3Int.up, tilePos + new Vector3Int(1, 1, 0));
            }
        }
    }

200898-6443a1a029755507035b5bdf824bbdb6.png