2-6 颜色混合区域

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

　　在上一章中我们重构了一部分颜色混合的代码，提升了视觉效果。但是经过观察发现，边缘处的地图单元，颜色混合还是存在一些问题的。而且我们还会发现，在多个颜色互相混合的时候。地图单元自身的颜色会因为混合而变得模糊不清。让我们很难清晰的识别出每一个地图单元。
　　为了解决这个问题，我们需要改变一下思路。不再依靠地图单元自身的三角面片来处理颜色渐变的问题，而是在相邻的地图单元之间创建一个颜色混合区域来专门处理这个问题。这样不仅颜色混合区域可以单独处理，代码会更加清晰，而且地图单元也可以保持自身的颜色不会受到颜色混合的影响。

　　这里还要注意一点，颜色混合区域和地图单元自身颜色区域的占比不同，会产生不同的视觉效果。在这里，我们先把颜色混合区域设置为地图单元外径的25%。外径便分为了两部分，25%的颜色混合区域和75%的自身颜色区域。

HexMetrics.cs
1
2
3
4
5
6
7
…
    
//cell自身颜色区域，为75%外接圆半径
public const float solidFactor = 0.75f;

//cell的颜色混合区域，为25%外接圆半径
public const float blendFactor = 1f - solidFactor;

　　比例设置完成后，我们还需要添加两个静态方法，用来获取地图单元自身颜色区域的顶点信息。

HexMetrics.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
…
    
/// <summary>
/// 获取cell自身颜色区域的direction位置的顶点
/// </summary>
/// <param name="direction">顶点方位</param>
/// <returns></returns>
public static Vector3 GetFirstSolidCorner(HexDirection direction)
{
    return corners[(int)direction] * solidFactor;
}

/// <summary>
/// 获取cell自身颜色区域的direction+1位置的顶点
/// </summary>
/// <param name="direction">顶点方位</param>
/// <returns></returns>
public static Vector3 GetSecondSolidCorner(HexDirection direction)
{
    return corners[(int)direction + 1] * solidFactor;
}

　　现在我们在回到HexMesh.Triangulate方法中，修改构建三角面片的代码，让它变成只构建地图单元自身颜色区域的三角面片。

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

    //根据中点位置计算出其余两个顶点的信息
    AddTriangle(
        center,
        //center + HexMetrics.GetFirstCorner(direction),
        //center + HexMetrics.GetSecondCorner(direction)

        //因为将颜色混合区域、cell自身颜色区域分开了，这里首先构建cell自身颜色区域的三角面片
        center + HexMetrics.GetFirstSolidCorner(direction),
        center + HexMetrics.GetSecondSolidCorner(direction)
    );

　　这样我们就完成了将颜色混合区域、地图单元自身颜色区域分开的第第一步了。接下来的一章中，我们要对颜色混合区域进行三角剖分，并创建颜色混合区域。

Github代码