2-12 优化三色混合区域

发表于 分类于 本文字数： 1.3k 阅读时长 ≈ 1 分钟

　　在上一章中我们完成了双色混合区域连接的优化，现在来继续完成三色混合区域。根据上一张的思路，三色混合区域依然是在HexMesh.TriangulateConnection方法中处理。

HexMesh.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private void Triangulate(HexDirection direction, HexCell cell)
{
    …
    
    //获取相邻方位的下一个方位 的cell
    HexCell nextNeighbor = cell.GetNeighbor(direction.Next());

    //这里三个彼此相邻的cell都存在的时候，才会创建三角形混合区域
    if (nextNeighbor != null)
    {
        //这里注意，最后的v2只是临时占位，并不是三角形的最后一个顶点位置
        AddTriangle(v2, v4, v2);
        AddTriangleColor(cell.color, neighbor.color, nextNeighbor.color);
    }
}

　　这里注意，在AddTriangle(v2, v4, v2);中，最后的v2并不是三色混合区域中最后的一个顶点位置。我们应该通过第二个相邻地图单元的位置来计算得出这个顶点的位置。

HexMesh.cs
1
2
3
4
5
6
7
8
9
10
11
private void Triangulate(HexDirection direction, HexCell cell)
{
    …

    //v2 + HexMetrics.GetBridge(direction.Next()) 为三角形的最后一个顶点位置
    //首先通过HexMetrics.GetBridge(direction.Next()获取 相邻的第二个cell的矩形连接区域宽度，可以理解为一个向量
    //v2顶点位置再加上这个向量，得出了三角形最后一个顶点的位置
    AddTriangle(v2, v4, v2 + HexMetrics.GetBridge(direction.Next()));

    …
}

　　修改完代码之后，虽然视觉效果上基本没有问题了。但是通过分析代码，其实可以发现现在的三色混合区域是有重叠的。为了去掉重叠的三色混合区域，只需要在NE和E方向生成三色混合区域即可。

HexMesh.cs
1
2
3
4
5
6
7
8
9
10
11
private void Triangulate(HexDirection direction, HexCell cell)
{
    …

    //这里三个彼此相邻的cell都存在的时候，才会创建三角形混合区域
    //if (nextNeighbor != null)
    //为了避免三角形混合区域的重叠，这里只需要生成NE和E方位的即可
    if (direction <= HexDirection.E && nextNeighbor != null)

    …
}

　　修改代码之后，我们就完成了所有连接区域的优化工作。而且也解决了之前边缘处颜色混合视觉效果不正确的问题。在之后的章节中，我们要给现在的地图增加高低差的功能，让地图具有更多的细节和变化。

Github代码