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

作者：观复 2019-10-08

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


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

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


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

用一个静态类以及一个枚举将这些定义下来：


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

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

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

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

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

复制代码

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

        

1. /// <summary>
   
2. 
   
3.         /// 绘制地形
   
4. 
   
5.         /// </summary>
   
6. 
   
7.         public void Draw()
   
8. 
   
9.         {
   
10. 
    
11.                 Clear();
    
12. 
    
13.                 Vector3 center = Vector3.zero;
    
14. 
    
15.                 for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
    
16. 
    
17.                 {
    
18. 
    
19.                         AddTriangle(center,
    
20. 
    
21.                                 HexMetrics.corners[(int)dir],
    
22. 
    
23.                                 HexMetrics.corners[(int)dir + 1]);
    
24. 
    
25.                 }
    
26. 
    
27. 
    
28. 
    
29.                 UpdateMesh();
    
30. 
    
31.         }

复制代码

然后贴上全部代码：

1. [RequireComponent(typeof(MeshFilter), typeof(MeshRenderer), typeof(MeshCollider))]
   
2. 
   
3. public class HexCell : MonoBehaviour {
   
4. 
   
5.         private Mesh mesh;
   
6. 
   
7.         private List<Vector3> vertices;
   
8. 
   
9.         private List<int> triangles;
   
10. 
    
11. 
    
12. 
    
13.         private void Awake()
    
14. 
    
15.         {
    
16. 
    
17.                 GetComponent<MeshFilter>().mesh = mesh = GetComponent<MeshCollider>().sharedMesh = new Mesh();
    
18. 
    
19.                 GetComponent<MeshCollider>().convex = true;
    
20. 
    
21.                 mesh.name = "Hex Cell";
    
22. 
    
23.                 vertices = new List<Vector3>();
    
24. 
    
25.                 triangles = new List<int>();
    
26. 
    
27.                 Draw();
    
28. 
    
29.         }
    
30. 
    
31. 
    
32. 
    
33.         // Use this for initialization
    
34. 
    
35.         void Start () {
    
36. 
    
37.                
    
38. 
    
39.         }
    
40. 
    
41.         
    
42. 
    
43.         // Update is called once per frame
    
44. 
    
45.         void Update () {
    
46. 
    
47.                
    
48. 
    
49.         }
    
50. 
    
51.         /// <summary>
    
52. 
    
53.         /// 绘制地形
    
54. 
    
55.         /// </summary>
    
56. 
    
57.         public void Draw()
    
58. 
    
59.         {
    
60. 
    
61.                 Clear();
    
62. 
    
63.                 Vector3 center = Vector3.zero;
    
64. 
    
65.                 for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
    
66. 
    
67.                 {
    
68. 
    
69.                         AddTriangle(center,
    
70. 
    
71.                                 HexMetrics.corners[(int)dir],
    
72. 
    
73.                                 HexMetrics.corners[(int)dir + 1]);
    
74. 
    
75.                 }
    
76. 
    
77. 
    
78. 
    
79.                 UpdateMesh();
    
80. 
    
81.         }
    
82. 
    
83. 
    
84. 
    
85.         /// <summary>
    
86. 
    
87.         /// 清空mesh数据
    
88. 
    
89.         /// </summary>
    
90. 
    
91.         private void Clear()
    
92. 
    
93.         {
    
94. 
    
95.                 mesh.Clear();
    
96. 
    
97.                 vertices.Clear();
    
98. 
    
99.                 triangles.Clear();
    
100. 
     
101.         }
     
102. 
     
103.         /// <summary>
     
104. 
     
105.         /// 绘制mesh数据
     
106. 
     
107.         /// </summary>
     
108. 
     
109.         private void UpdateMesh()
     
110. 
     
111.         {
     
112. 
     
113.                 mesh.vertices = vertices.ToArray();
     
114. 
     
115.                 mesh.triangles = triangles.ToArray();
     
116. 
     
117.                 mesh.RecalculateNormals();
     
118. 
     
119.                 mesh.RecalculateBounds();
     
120. 
     
121.         }
     
122. 
     
123.         /// <summary>
     
124. 
     
125.         /// 添加三角形。
     
126. 
     
127.         /// </summary>
     
128. 
     
129.         /// <param name="v1"></param>
     
130. 
     
131.         /// <param name="v2"></param>
     
132. 
     
133.         /// <param name="v3"></param>
     
134. 
     
135.         private void AddTriangle(Vector3 v1, Vector3 v2, Vector3 v3)
     
136. 
     
137.         {
     
138. 
     
139.                 int count = triangles.Count;
     
140. 
     
141.                 vertices.Add(v1);
     
142. 
     
143.                 triangles.Add(count++);
     
144. 
     
145.                 vertices.Add(v2);
     
146. 
     
147.                 triangles.Add(count++);
     
148. 
     
149.                 vertices.Add(v3);
     
150. 
     
151.                 triangles.Add(count++);
     
152. 
     
153.         }
     
154. 
     
155. }

复制代码

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

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

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

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

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

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

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

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

复制代码

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

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

复制代码

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

参考文章：

Hex Map 1
​
当初也是因为这篇文章，才萌生了做六边形SLG游戏的念头的
相关阅读:

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

作者：观复
专栏地址：https://zhuanlan.zhihu.com/p/44306412

参与评论