在上一章中,我们重构了为三角面片赋值颜色的代码,为每个不同的顶点赋值了不同的颜色。实现了最基本的颜色不同切相邻的两个地图单元之间,会有颜色过渡的功能。但是视觉效果上并没有达到我们的预期。在这一章中,我们将优化现在的颜色混合视觉效果,让颜色过渡更加平滑。
首先,颜色不同切相邻的两个地图单元之间的边界颜色,应该是两个地图单元颜色的平均值。
HexMesh.cs1 2 3 4 5 6 7 8 9 10 11
| private void Triangulate(HexDirection direction, HexCell cell) { …
Color edgeColor = (cell.color + neighbor.color) * 0.5f;
AddTriangleColor(cell.color, edgeColor, edgeColor); }
|
经过修改,虽然视觉效果好了一些,但是颜色交界的地方过渡依然显得有些突兀。这是因为在颜色过渡不平滑的位置,会有三个地图单元共享一个顶点位置的颜色,我们之前的方法只是在两两混合颜色。
按照这个思路,我们在混合N方位地图单元的颜色时,还需要考虑N+1和N-1位置地图单元的颜色。
HexDirection.cs1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| public static class HexDirectionExtensions { …
public static HexDirection Previous(this HexDirection direction) { return direction == HexDirection.NE ? HexDirection.NW : (direction - 1); }
public static HexDirection Next(this HexDirection direction) { return direction == HexDirection.NW ? HexDirection.NE : (direction + 1); } }
|
现在,我们可以通过新增的两个方法,来获取N+1和N-1位置地图单元的颜色了。然后再分别进行颜色混合。
HexMesh.cs1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| private void Triangulate(HexDirection direction, HexCell cell) { …
HexCell prevNeighbor = cell.GetNeighbor(direction.Previous()) ?? cell;
HexCell neighbor = cell.GetNeighbor(direction) ?? cell;
HexCell nextNeighbor = cell.GetNeighbor(direction.Next()) ?? cell;
AddTriangleColor( cell.color, (cell.color+prevNeighbor.color+neighbor.color)/3.0f, (cell.color+nextNeighbor.color+neighbor.color)/3.0f ); }
|
现在,我们就得到了新的颜色混合效果。但是通过观察发现,在地图边缘的这些地图单元,颜色混合是存在一些问题的。造成这种现象的原因是边缘的单元格缺失了N+1和N-1位置的地图单元,导致了颜色混合还是会有明显的边界。在下一章中,我们需要更换一下思路,来解决这个问题。
Github代码