本文的主要工作是六边形网格的绘制。
如图所示。六边形有6个方向,6个顶点,同时定义中心点到边的最短距离为内径innerRadius,定义中心点到顶点的距离为外径outerRadius。
六边形可以拆分为6个等边三角形,所以很容易得出:
定义游戏中六边形的边长(即外径)为10.
手游账号买号用一个静态类以及一个枚举将这些定义下来:
- using UnityEngine;
- public static class HexMetrics
- {
- /// <summary>
- /// 外径,中心到顶点距离
- /// </summary>
- public const float outerRadius = 10f;
- /// <summary>
- /// 内径,中心到边距离,0.866025404为二分之根号三的近似值
- /// </summary>
- public const float innerRadius = outerRadius * 0.866025404f;
- /// <summary>
- /// 六边形的六个顶点坐标
- /// </summary>
- public static readonly Vector3[] corners = {
- new Vector3(0f, 0f, outerRadius),
- new Vector3(innerRadius,0f,0.5f*outerRadius),
- new Vector3(innerRadius,0f,-0.5f*outerRadius),
- new Vector3(0f,0f,-outerRadius),
- new Vector3(-innerRadius,0f,-0.5f*outerRadius),
- new Vector3(-innerRadius,0f,0.5f*outerRadius)
- };
- }
- /// <summary>
- /// 六边形的方向
- /// NW /\ NE
- /// W | |E
- /// SW \/ SE
- /// </summary>
- public enum HexDirection
- {
- NE,
- E,
- SE,
- SW,
- W,
- NW,
- }
复制代码
之后开始写关于图片绘制的代码:
将六边形分解为6个等边三角形,三角形的三个顶点分别为六边形中心点,以及六边形一条边的两个顶点:
即HexMetrics.corners和HexMetrics.corners[i+1]
因为第六条边的时候,i=5,i+1=6,corners[6]不存在,所以在定义里加一个coners[6],和coners[0]相等:
- public static readonly Vector3[] corners = {
- new Vector3(0f, 0f, outerRadius),
- new Vector3(innerRadius,0f,0.5f*outerRadius),
- new Vector3(innerRadius,0f,-0.5f*outerRadius),
- new Vector3(0f,0f,-outerRadius),
- new Vector3(-innerRadius,0f,-0.5f*outerRadius),
- new Vector3(-innerRadius,0f,0.5f*outerRadius),
- new Vector3(0f,0f,outerRadius),
- };
复制代码
所以绘制三角形的时候,代码可以写成这样:
- /// <summary>
- /// 绘制地形
- /// </summary>
- public void Draw()
- {
- Clear();
- Vector3 center = Vector3.zero;
- for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
- {
- AddTriangle(center,
- HexMetrics.corners[(int)dir],
- HexMetrics.corners[(int)dir + 1]);
- }
- UpdateMesh();
- }
复制代码
然后贴上全部代码:
- [RequireComponent(typeof(MeshFilter), typeof(MeshRenderer), typeof(MeshCollider))]
- public class HexCell : MonoBehaviour {
- private Mesh mesh;
- private List<Vector3> vertices;
- private List<int> triangles;
- private void Awake()
- {
- GetComponent<MeshFilter>().mesh = mesh = GetComponent<MeshCollider>().sharedMesh = new Mesh();
- GetComponent<MeshCollider>().convex = true;
- mesh.name = "Hex Cell";
- vertices = new List<Vector3>();
- triangles = new List<int>();
- Draw();
- }
- // Use this for initialization
- void Start () {
- }
- // Update is called once per frame
- void Update () {
- }
- /// <summary>
- /// 绘制地形
- /// </summary>
- public void Draw()
- {
- Clear();
- Vector3 center = Vector3.zero;
- for (HexDirection dir = HexDirection.NE; dir <= HexDirection.NW; dir++)
- {
- AddTriangle(center,
- HexMetrics.corners[(int)dir],
- HexMetrics.corners[(int)dir + 1]);
- }
- UpdateMesh();
- }
- /// <summary>
- /// 清空mesh数据
- /// </summary>
- private void Clear()
- {
- mesh.Clear();
- vertices.Clear();
- triangles.Clear();
- }
- /// <summary>
- /// 绘制mesh数据
- /// </summary>
- private void UpdateMesh()
- {
- mesh.vertices = vertices.ToArray();
- mesh.triangles = triangles.ToArray();
- mesh.RecalculateNormals();
- mesh.RecalculateBounds();
- }
- /// <summary>
- /// 添加三角形。
- /// </summary>
- /// <param name="v1"></param>
- /// <param name="v2"></param>
- /// <param name="v3"></param>
- private void AddTriangle(Vector3 v1, Vector3 v2, Vector3 v3)
- {
- int count = triangles.Count;
- vertices.Add(v1);
- triangles.Add(count++);
- vertices.Add(v2);
- triangles.Add(count++);
- vertices.Add(v3);
- triangles.Add(count++);
- }
- }
复制代码
在unity中新建一个空的物体,挂上这个脚本,然后随便扔一个材质上去,运行就会出现如下图片:
接下来就是构建地图网格:
如图,仔细观察我们就可以我们可以发现:
1.同一行的相邻六边形的间距为2个内径的距离
2.两列六边形,在纵坐标上相差1.5个外径的距离
3.列数为奇数的六边形在横坐标上,会向右偏移1个内径的距离。
所以我们可以通过如下方式将队列上的坐标(x,y)转换为空间上的坐标:
- private Vector3 GetPos(int x, int y)
- {
- float posX = x;
- float posY = y;
- if ((y & 1) != 0)
- {
- posX += 0.5f;
- }
- Vector3 pos = new Vector3(2f * posX * HexMetrics.innerRadius, 0f, 1.5f * posY * HexMetrics.outerRadius);
- return pos;
- }
复制代码
为了便于区分,再将网格的颜色变一下:
- cell.GetComponent<MeshRenderer>().material.color = new Color(posX / width, (posX + posY) / (height + width), posY / height);
复制代码
一个六边形的网格地图的雏形就做好了,运行一下,我们就可以得到下面图片: