2-8 创建双色颜色混合区域

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

　　在上一章中，我们将地图单元自身颜色区域和颜色混合区域分开了。但是通过观察运行效果发现，当相邻的多个切颜色互不相同的地图单元进行颜色混合时，会产生类似“溢色”的错误效果。为了解决这个问题，我们现在要吧也是呢混合区域继续进行细分。将它分为双色混合区域和三色混合区域。

　　如上图所示，新的V1、V2、V3、V4顶点所构成的区域，就是双色混合区域。这个区域只负责混合2个相邻地图单元的颜色。首先计算出V3、V4中点的位置，然后用该位置乘以颜色混合区域所占比例的数值，就的出来了V1到V3或V2到V4的距离。

HexMetrics.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
…

/// <summary>
/// 获取矩形混合区域中，内边缘顶点到外边缘顶点的距离
/// </summary>
/// <param name="direction">顶点方位</param>
/// <returns></returns>
public static Vector3 GetBridge(HexDirection direction)
{
    //参考图片 http://magi-melchiorl.gitee.io/pages/Pics/Hexmap/2-8-1.png
    //(corners[(int)direction] + corners[(int)direction + 1]) * 0.5f 是得出cell相邻两个顶点所连线的中点的位置
    //其实也就是内切圆和cell相切的一个切点，也就是线段V3V4的中点，其实也是角∠(V1 center v2)的角平分线
    //具体可以看图 http://magi-melchiorl.gitee.io/pages/Pics/Hexmap/1-1-3.png 来理解
    //得出V3 V4中点位置后，再乘以颜色混合区域所占比例，即25%，得出V1到V3的距离
    return (corners[(int)direction] + corners[(int)direction + 1]) * 0.5f * blendFactor;
}

　　接着再回到HexMesh中，先修改为颜色混合区域顶点赋值的方法，因为只需要混合两个地图单元的颜色，所以参数修改为2个。

HexMesh.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
…

/// <summary>
/// 为四边形颜色混合区域的每个顶点赋值颜色
/// 因为该区域只负责混合2个cell的颜色，所以4个顶点只需要2个颜色
/// </summary>
/// <param name="c1">cell祖神颜色</param>
/// <param name="c2">混合后的颜色</param>
private void AddQuadColor(Color c1, Color c2)
{
    colors.Add(c1);
    colors.Add(c1);
    colors.Add(c2);
    colors.Add(c2);
}

　　最后回到private void Triangulate(HexDirection direction, HexCell cell)方法中，修改构建颜色混合区域的代码。

HexMesh.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
…

private void Triangulate(HexDirection direction, HexCell cell)
{
    
    …
    
    //颜色混合区域变为了矩形，V3和V4的位置，其实是通过V1和V2顶点分别加上矩形区域的高来计算得出的
    //具体可以查看HexMetrics.GetBridge方法的说明
    Vector3 bridge = HexMetrics.GetBridge(direction);
    Vector3 v3 = v1 + bridge;
    Vector3 v4 = v2 + bridge;
    
    …
    
    //新的矩形颜色混合区域顶点颜色赋值
    AddQuadColor(cell.color, (cell.color + neighbor.color) * 0.5f);
}

　　现在我们就完成了两个相邻地图单元之间的颜色混合功能。接下来的一章中，我们将实现3个彼此相邻地图单元的颜色混合区域，也就是要混合三种颜色的区域。

Github代码