从零开始做一个SLG游戏（二）：用mesh实现简单的地形

本文主要是用mesh实现简单的地形。暂时先绘制三种地形：高山、平原、水域。

首先要做的是网格的细化：

上一篇已经实现了单个六边形的绘制，实现方式是将六边形分割成6个等边三角形，然后分别绘制。

现在需要将每个三角形再次细化，将一个三角形细化为4个小三角形。

如下图：
 

细化原理如下图：
 

在上一篇文章中，封装了三角形绘制的函数：
 

1. private void AddTriangle(Vector3 v1, Vector3 v2, Vector3 v3)
3.         {
5.                 int count = triangles.Count;
7.                 vertices.Add(v1);
9.                 triangles.Add(count++);
11.                 vertices.Add(v2);
13.                 triangles.Add(count++);
15.                 vertices.Add(v3);
17.                 triangles.Add(count++);
19.         }

复制代码

其中v1,v2,v3如图所示，而v4,v5,v6分别为三条边的中点。

所以有：

Vector3 v4 = Vector3.Lerp(v1, v2, 0.5f);
Vector3 v5 = Vector3.Lerp(v2, v3, 0.5f);
Vector3 v6 = Vector3.Lerp(v1, v3, 0.5f);
所以新的4个三角形分别为：(v1, v4, v6)(v4, v2, v5)(v4, v5, v6)(v3, v6, v5)

于是，新写一个递归函数用于细化(原函数保留)：
 

1.          private void AddTriangle(Vector3 v1, Vector3 v2, Vector3 v3, int time)
3.         {
5.                 if (time == 0)
7.                 {
9.                         AddTriangle(v1, v2, v3);
11.                 }
13.                 else
15.                 {
17.                         time--;
19.                         Vector3 v4 = Vector3.Lerp(v1, v2, 0.5f);
21.                         Vector3 v5 = Vector3.Lerp(v2, v3, 0.5f);
23.                         Vector3 v6 = Vector3.Lerp(v1, v3, 0.5f);
25.                         AddTriangle(v1, v4, v6, time);
27.                         AddTriangle(v4, v2, v5, time);
29.                         AddTriangle(v4, v5, v6, time);
31.                         AddTriangle(v3, v6, v5, time);
33.                 }
35.         }
37.         /// <summary>
39.         /// 绘制地形
41.         /// </summary>
43.         public void Draw(HexTerrian type)
45.         {
47.                 ……
49.                 for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
51.                 {
53.                         Vector3 v1 = HexMetrics.corners[(int)dir];
55.                         Vector3 v2 = HexMetrics.corners[(int)dir + 1];
57.                         AddTriangle(center, v1, v2, 2);
59.                 }
61.                 UpdateMesh();
63.         }

复制代码

其中time指的是细化次数。
 

但是，如今生成的图片还是一个六边形，与原来没有变化。原因是，没有对图片上的点做扰动处理，所以虽然生成的时候是细化了生成的，但拼在一起还是平的。

现加入扰动处理的函数：
 

1. private Vector3 Perturb(Vector3 pos)
3.         {
5.                 float level = 0.5f;
7.                 Vector3 localPos = transform.localPosition + pos;
9.                 pos.x += level * (Mathf.PerlinNoise(localPos.x, localPos.z) - 0.5f);
11.                 pos.y += level * (Mathf.PerlinNoise(localPos.x + 1f, localPos.z + 1f) - 0.5f);
13.                 pos.z += level * (Mathf.PerlinNoise(localPos.x + 2f, localPos.z + 2f) - 0.5f);
15.                 return pos;
17.         }

复制代码

这里用的是unity自带的柏林噪声函数 Mathf.PerlinNoise(float x,float y)，这个算法会根据x以及y的值生成一个随机的函数，固定的x和y，生成的随机值是固定的。所以暂时先用这个做扰动。

Mathf.PerlinNoise(float x,float y)得出的是0到1的一个值。

所以减去0.5。得到的是-0.5到0.5的一个值。

level是一个扰动的参数，扰动后，单个坐标最多偏移0.25个单位，这样显示出来的就是一个有轻微褶皱的地形图片。

将在AddTriangle(Vector3 v1, Vector3 v2, Vector3 v3, int time)函数中绘制三角形的部分加入扰动：
 

1.          private void AddTriangle(Vector3 v1, Vector3 v2, Vector3 v3, int time)
3.         {
5.                 if (time == 0)
7.                 {
9.                         AddTriangle(Perturb(v1), Perturb(v2), Perturb(v3));
11.                 }
13.                 ………………
15.         }

复制代码

运行后，我们得到如下的图：
 

然后再调一下材质的颜色，本游戏采用的是lowpoly风格，该风格的反射很弱，所以需要把材质上的specular hightlight的钩去掉，然后再调整一下图片的颜色：
 

有一点泥土的感觉了，暂时先这么用着吧。

下一步要解决的问题是，目前只是一个单面的六边形，将这个六边形绘制成一个棱柱，表现会更好一些，当然，棱柱的底就不画了，反正看不到。

首先写一个函数用于绘制一个矩形：
 

1. /// <summary>
3.         /// v3  v4
5.         ///
7.         /// v1  v2
9.         /// </summary>
11.         /// <param name="v1"></param>
13.         /// <param name="v2"></param>
15.         /// <param name="v3"></param>
17.         /// <param name="v4"></param>
19.         private void AddSquare(Vector3 v1, Vector3 v2, Vector3 v3, Vector3 v4)
21.         {
23.                 AddTriangle(v1, v3, v2);
25.                 AddTriangle(v3, v4, v2);
27.         }

复制代码

v1,v2,v3,v4的位置备注所示。

如果不考虑细化，那么绘制边上的面的函数就可以如下表示：
 

1. /// <summary>
3.         /// 绘制地形
5.         /// </summary>
7.         public void Draw(HexTerrian type)
9.         {
11.                 ……………………
13.                 for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
15.                 {
17.                         Vector3 v1 = HexMetrics.corners[(int)dir];
19.                         Vector3 v2 = HexMetrics.corners[(int)dir + 1];
23.                         AddTriangle(center, v1, v2, 2);
25.                         Vector3 v3 = v1 + 5f * Vector3.down;
27.                         Vector3 v4 = v2 + 5f * Vector3.down;
29.                         AddSquare(v1, v2, v3, v4);
31.                 }
35.                 ……………………
37.         }

复制代码

接下来考虑分形的做法，先看下示意图：
 

然后是代码：
 

1. private void AddEdge(Vector3 v1, Vector3 v2, int time)
3.         {
5.                 if (time == 0)
7.                 {
9.                         v1 = Perturb(v1);
11.                         v2 = Perturb(v2);
13.                         float d = 5f;
15.                         Vector3 v3 = v1 + d * Vector3.down;
17.                         Vector3 v4 = v2 + d * Vector3.down;
19.                         AddSquare(v1, v2, v3, v4);
21.                 }
23.                 else
25.                 {
27.                         time--;
29.                         Vector3 v5 = Vector3.Lerp(v1, v2, 0.5f);
31.                         AddEdge(v1, v5, time);
33.                         AddEdge(v5, v2, time);
35.                 }
37.         }

复制代码

因为v3,v4是通过v1,v2计算得来的，所以输入就只需要v1,v2就行了。

因为点的扰动是最后计算的，所以会和六边形的边重合，手游账号买卖不会出现错位。

效果如下图：

接下来是河流和高山地块。

先定义一个地形类型的枚举：
 

1. public enum HexTerrian
3. {
5.         Water,
7.         Plain,
9.         Mountain,
11. }

复制代码

然后在HexCell类中加入地形类型，用于表示当前地形的类型，同时定义一个材质的数组用于保存不同地形对应的材质，并在绘制函数中加入地形参数：
 

1. public class HexCell : MonoBehaviour {
3.         ……
5.         public HexTerrian terr;
7.         public Material[] materials;
9.         ……
11.         public void Draw(HexTerrian type)
13.         {
15.                 terrianType = type;
17.                 GetComponent<Renderer>().material = materials[(int)type];
19.         ……
21. }

复制代码

将做好的3个地形材质拖到数组上，记得和枚举一一对应。

先处理湖泊地形，湖泊和平原相比，只在于水平面将会比平原低一点：
 

1. ………
3.         private readonly float deep = 5;//方块厚度
5.         private readonly float waterLevel = 2;//水平面离地距离
7.         public int fractalTime = 3;//细化次数
9. ………
11.                 for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
13.                 {
15.                         Vector3 v1 = HexMetrics.corners[(int)dir];
17.                         Vector3 v2 = HexMetrics.corners[(int)dir + 1];
19.                         switch (type)
21.                         {
23.                                 case HexTerrian.Water:
25.                                         if (dir == HexDirection.NE)
27.                                         {
29.                                                 center -= waterLevel * Vector3.up;
31.                                         }
33.                                         v1 -= waterLevel * Vector3.up;
35.                                         v2 -= waterLevel * Vector3.up;
37.                                         break;
39.                                 case HexTerrian.Plain:
41.                                         break;
43.                         }
45.                         AddTriangle(center, v1, v2, fractalTime);
47.                         AddEdge(v1, v2, fractalTime);
49.                 }
51. ……

复制代码

边缘六个面绘制的时候也要记得短一些：

 

1. private void AddEdge(Vector3 v1, Vector3 v2, int time)
3.         {
5.                 if (time == 0)
7.                 {
9.                         v1 = Perturb(v1);
11.                         v2 = Perturb(v2);
13.                         float d = (terrianType == HexTerrian.Water) ? (deep - waterLevel) : deep;
15.                         Vector3 v3 = v1 + d * Vector3.down;
17.                         Vector3 v4 = v2 + d * Vector3.down;
19.                         AddSquare(v1, v2, v3, v4);
21.                 }
23.                 ……
25.         }

复制代码

接下来绘制高山，对于高山，先简单处理一下：将顶点提高一些，然后细化一下。
 

1. ……
3. case HexTerrian.Mountain:
5. if (dir == HexDirection.NE)
7. {
9.         center += 5f * Vector3.up;
11. }
13. break;
15. ……

复制代码

然后测试一下地形效果，随机地形在这篇文章就不做了，主要是把所有的地形都显示出来，所以随便写一下吧：

2.                 foreach (HexCell c in hexCells)
4.                 {
6.                         int height = (c.Pos.x + c.Pos.y) % 3;
8.                         c.Draw((HexTerrian)height);
10.                 }

复制代码

于是，得到了封面上的效果图：