从零开始做一个SLG游戏（一）：六边形网格

本文的主要工作是六边形网格的绘制。
 

如图所示。六边形有6个方向，6个顶点，同时定义中心点到边的最短距离为内径innerRadius，定义中心点到顶点的距离为外径outerRadius。

六边形可以拆分为6个等边三角形，所以很容易得出：
 

定义游戏中六边形的边长(即外径)为10.

手游账号买号用一个静态类以及一个枚举将这些定义下来：

1. using UnityEngine;
5. public static class HexMetrics
7. {
9.         /// <summary>
11.         /// 外径，中心到顶点距离
13.         /// </summary>
15.         public const float outerRadius = 10f;
17.         /// <summary>
19.         /// 内径，中心到边距离，0.866025404为二分之根号三的近似值
21.         /// </summary>
23.         public const float innerRadius = outerRadius * 0.866025404f;
25.         
27.         /// <summary>
29.         /// 六边形的六个顶点坐标
31.         /// </summary>
33.         public static readonly Vector3[] corners = {
35.                 new Vector3(0f, 0f, outerRadius),
37.                 new Vector3(innerRadius,0f,0.5f*outerRadius),
39.                 new Vector3(innerRadius,0f,-0.5f*outerRadius),
41.                 new Vector3(0f,0f,-outerRadius),
43.                 new Vector3(-innerRadius,0f,-0.5f*outerRadius),
45.                 new Vector3(-innerRadius,0f,0.5f*outerRadius)
47.         };
49. }
53. /// <summary>
55. /// 六边形的方向
57. ///                NW /\ NE
59. ///                W |  |E
61. ///                SW \/ SE
63. /// </summary>
65. public enum HexDirection
67. {
69.         NE,
71.         E,
73.         SE,
75.         SW,
77.         W,
79.         NW,
81. }

复制代码

之后开始写关于图片绘制的代码：

将六边形分解为6个等边三角形，三角形的三个顶点分别为六边形中心点，以及六边形一条边的两个顶点：

即HexMetrics.corners和HexMetrics.corners[i+1]

因为第六条边的时候，i=5,i+1=6，corners[6]不存在，所以在定义里加一个coners[6]，和coners[0]相等：
 

1. public static readonly Vector3[] corners = {
3.                 new Vector3(0f, 0f, outerRadius),
5.                 new Vector3(innerRadius,0f,0.5f*outerRadius),
7.                 new Vector3(innerRadius,0f,-0.5f*outerRadius),
9.                 new Vector3(0f,0f,-outerRadius),
11.                 new Vector3(-innerRadius,0f,-0.5f*outerRadius),
13.                 new Vector3(-innerRadius,0f,0.5f*outerRadius),
15.                 new Vector3(0f,0f,outerRadius),
17.         };

复制代码

所以绘制三角形的时候，代码可以写成这样：

        

1. /// <summary>
3.         /// 绘制地形
5.         /// </summary>
7.         public void Draw()
9.         {
11.                 Clear();
13.                 Vector3 center = Vector3.zero;
15.                 for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
17.                 {
19.                         AddTriangle(center,
21.                                 HexMetrics.corners[(int)dir],
23.                                 HexMetrics.corners[(int)dir + 1]);
25.                 }
29.                 UpdateMesh();
31.         }

复制代码

然后贴上全部代码：
 

1. [RequireComponent(typeof(MeshFilter), typeof(MeshRenderer), typeof(MeshCollider))]
3. public class HexCell : MonoBehaviour {
5.         private Mesh mesh;
7.         private List<Vector3> vertices;
9.         private List<int> triangles;
13.         private void Awake()
15.         {
17.                 GetComponent<MeshFilter>().mesh = mesh = GetComponent<MeshCollider>().sharedMesh = new Mesh();
19.                 GetComponent<MeshCollider>().convex = true;
21.                 mesh.name = "Hex Cell";
23.                 vertices = new List<Vector3>();
25.                 triangles = new List<int>();
27.                 Draw();
29.         }
33.         // Use this for initialization
35.         void Start () {
37.                
39.         }
41.         
43.         // Update is called once per frame
45.         void Update () {
47.                
49.         }
51.         /// <summary>
53.         /// 绘制地形
55.         /// </summary>
57.         public void Draw()
59.         {
61.                 Clear();
63.                 Vector3 center = Vector3.zero;
65.                 for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
67.                 {
69.                         AddTriangle(center,
71.                                 HexMetrics.corners[(int)dir],
73.                                 HexMetrics.corners[(int)dir + 1]);
75.                 }
79.                 UpdateMesh();
81.         }
85.         /// <summary>
87.         /// 清空mesh数据
89.         /// </summary>
91.         private void Clear()
93.         {
95.                 mesh.Clear();
97.                 vertices.Clear();
99.                 triangles.Clear();
101.         }
103.         /// <summary>
105.         /// 绘制mesh数据
107.         /// </summary>
109.         private void UpdateMesh()
111.         {
113.                 mesh.vertices = vertices.ToArray();
115.                 mesh.triangles = triangles.ToArray();
117.                 mesh.RecalculateNormals();
119.                 mesh.RecalculateBounds();
121.         }
123.         /// <summary>
125.         /// 添加三角形。
127.         /// </summary>
129.         /// <param name="v1"></param>
131.         /// <param name="v2"></param>
133.         /// <param name="v3"></param>
135.         private void AddTriangle(Vector3 v1, Vector3 v2, Vector3 v3)
137.         {
139.                 int count = triangles.Count;
141.                 vertices.Add(v1);
143.                 triangles.Add(count++);
145.                 vertices.Add(v2);
147.                 triangles.Add(count++);
149.                 vertices.Add(v3);
151.                 triangles.Add(count++);
153.         }
155. }

复制代码

在unity中新建一个空的物体，挂上这个脚本，然后随便扔一个材质上去，运行就会出现如下图片：
 

接下来就是构建地图网格：
 

如图，仔细观察我们就可以我们可以发现：

1.同一行的相邻六边形的间距为2个内径的距离

2.两列六边形，在纵坐标上相差1.5个外径的距离

3.列数为奇数的六边形在横坐标上，会向右偏移1个内径的距离。

所以我们可以通过如下方式将队列上的坐标(x,y)转换为空间上的坐标：
 

1. private Vector3 GetPos(int x, int y)
3.         {
5.                 float posX = x;
7.                 float posY = y;
9.                 if ((y & 1) != 0)
11.                 {
13.                         posX += 0.5f;
15.                 }
17.                 Vector3 pos = new Vector3(2f * posX * HexMetrics.innerRadius, 0f, 1.5f * posY * HexMetrics.outerRadius);
19.                 return pos;
21.         }

复制代码

        
为了便于区分，再将网格的颜色变一下：
 

1. cell.GetComponent<MeshRenderer>().material.color = new Color(posX / width, (posX + posY) / (height + width), posY / height);

复制代码

一个六边形的网格地图的雏形就做好了，运行一下，我们就可以得到下面图片：