2-9 创建3色颜色混合区域

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

　　在上一章中我们创建了两种颜色的混合区域，而且在运行中的视觉效果也是符合预期的。在这一章中，我们来创建三种颜色的混合区域。这里的三色混合区域，就是上一章中所空出来的三角形区域。这个三角形区域目前是由6个三角面片组成的。也就是上一章中，除了矩形颜色混合区域，其两侧未进行构建的部分。
　　在这里我们先构建矩形颜色混合区域左侧的三角形。其顶点位置已经都计算出来了，现在主要是分析顶点颜色的问题。第一个顶点的颜色是地图单元自身的颜色，第二个顶点的颜色是三个相邻地图三个颜色的混合值，第三个顶点的颜色是双色混合区域的颜色的平均值。

HexMesh.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private void Triangulate(HexDirection direction, HexCell cell)
{
    …

    //矩形两色混合区域的中间过渡色
    Color bridgeColor = (cell.color + neighbor.color) * 0.5f;

    //新的矩形颜色混合区域顶点颜色赋值
    AddQuadColor(cell.color, bridgeColor);

    //组成cell的每个三角形区域，有1个矩形混色区域和2个三角形三色混合区域
    //生成其中一个三角形三色混合区域
    AddTriangle(v1, center + HexMetrics.GetFirstCorner(direction), v3);

    //为第一个三角形三色混合区域赋值颜色
    //自身颜色、三个相邻cell的平均色、矩形混合区域中间色
    AddTriangleColor(
        cell.color,
        (cell.color + prevNeighbor.color + neighbor.color) / 3f,
        bridgeColor
        );
}

　　使用同样的方式，我们使用相同的方式来生成矩形颜色混合区域右侧侧的三角形。

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

    //第二个三角形三色混合区域
    AddTriangle(v2, v4, HexMetrics.GetSecondCorner(direction));

    //第二个三角形三色混合区域的颜色
    AddTriangleColor(
        cell.color,
        bridgeColor,
        (cell.color + prevNeighbor.color + neighbor.color) / 3f
        );
}

　　现在我们就得到了比之前更好的视觉效果。而且我们还可以自定义颜色混合区域的面积大小，来改变整个地图的视觉效果。但是我们发现，在地图边缘处相邻地图单元的颜色过渡依然存在一些问题。不过我们先暂时忽略这个问题，把注意力放在优化和网格合并上。

为什么有了颜色混合区域，混合后的效果依然不好看？
这是线性颜色混合的极限了。事实上纯色之间的颜色混合效果都不是很好，未来的章节中将会升级到地形材质并做一些更漂亮的混合。

Github代码