六边形地图相较四方地图的优势：只有6个邻居而且每个邻居到中心的距离都是一样的。而四方地图有8个邻居包含2种情况，一种是边邻居，一种是角邻居，难以统一处理。
开始之前先确定一下六边形的大小。假定边长是10个单位。因为六边形由6个等边三角形组成，所以外径就是边长。内径就是三角的高，√3/2*10=5√3，这些值用静态变量存起来。
using UnityEngine;
public static class HexMetrics {
public const float outerRadius = 10f;
public const float innerRadius = outerRadius * 0.866025404f;
}
接下来确定6个点相对中心的位置。注意到有2种摆放六边形的方式，角朝上或者边朝上。我们选择角朝上。从这个角开始，其它角顺时针摆放。顺着XZ平面摆放，六边形们就能贴着地面方向了。
public static 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)
};
- 网格构造
按最简单的方式来，创建一个默认的plane，把cell组件加上去，然后做成prefab。
using UnityEngine;
public class HexCell : MonoBehaviour
{
}
然后来做网格。创建一个空对象把HexGrid组件给它。
using UnityEngine;
public class HexGrid : MonoBehaviour
{
public int width = 6;
public int height = 6;
public HexCell cellPrefab;
}
我们从一个常规的方形网格开始。把单元存在数组里方便访问。
默认的单元大小是10X10，把每个格子依次加上偏移量。
HexCell[] cells;
void Awake()
{
cells = new HexCell[height * width];
for (int z = 0, i = 0; z < height; z++)
{
for (int x = 0; x < width; x++)
{
CreateCell(x, z, i++);
}
}
}
void CreateCell(int x, int z, int i)
{
Vector3 position;
position.x = x * 10f;
position.y = 0f;
position.z = z * 10f;
HexCell cell = cells[i] = Instantiate(cellPrefab);
cell.transform.SetParent(transform, false);
cell.transform.localPosition = position;
}
一个严丝合缝的10X10网格。但是看不出哪是哪。
2.1显示坐标
创建一个Canvas然后将他变成Grid的子对象。渲染模式变成World Space,绕X轴旋转90度让Canvas躺在地上。
为了显示坐标，创建一个文本对象通过GameObject/ui/text然后变成prefab。
在HexGrid里创建一个变量CellLablePrefab
void CreateCell(int x, int z, int i)
{
…
Text label = Instantiate(cellLabelPrefab);
label.rectTransform.SetParent(gridCanvas.transform, false);
label.rectTransform.anchoredPosition = new Vector2(position.x, position.z);
label.text = x.ToString() + "\n" + z.ToString();
}
2.2六边形位置
现在我们可以可视地定位每个格子了，来摆放它们吧！我们知道相邻格子间的沿X轴的距离等于内径的2倍。而距离下一行的距离是1.5倍的外径。
position.x = x * (HexMetrics.innerRadius * 2f);
position.y = 0f;
position.z = z * (HexMetrics.outerRadius * 1.5f);
当然格子们不是直直的放成一行行的而是交错放的，每行的在X轴的偏移量是内径
position.x = (x +（z % 2)*0.5f) * (HexMetrics.innerRadius * 2f);
3.渲染六边形
我们用一个Mesh去画整个网格。创建一个HexMesh组件来创建Mesh。需要一个mesh filter, mesh renderer, mesh，有顶点和三角面列表。
using UnityEngine;
using System.Collections.Generic;
[RequireComponent(typeof(MeshFilter), typeof(MeshRenderer))]
public class HexMesh : MonoBehaviour
{
Mesh hexMesh;
List vertices;
List triangles;
void Awake()
{
GetComponent().mesh = hexMesh = new Mesh();
hexMesh.name = "Hex Mesh";
vertices = new List();
triangles = new List();
}
}
创建一个新的子对象绑上HexMesh。然后给一个默认材质。
public void Triangulate(HexCell[] cells)
{
hexMesh.Clear();
vertices.Clear();
triangles.Clear();
for (int i = 0; i < cells.Length; I++)
{
Triangulate(cells[I]);
}
hexMesh.vertices = vertices.ToArray();
hexMesh.triangles = triangles.ToArray();
hexMesh.RecalculateNormals();
}
void Triangulate(HexCell cell)
{
}
既然六边形是用三角面组成的，那就创建一个快捷方法给定三个顶点就能添加三角面。注意第一个点的索引就是添加点之前点列表的长度，先存起来。
void AddTriangle(Vector3 v1, Vector3 v2, Vector3 v3)
{
int vertexIndex = vertices.Count;
vertices.Add(v1);
vertices.Add(v2);
vertices.Add(v3);
triangles.Add(vertexIndex);
triangles.Add(vertexIndex + 1);
triangles.Add(vertexIndex + 2);
}
来画第一个三角形
void Triangulate(HexCell cell)
{
Vector3 center = cell.transform.localPosition;
AddTriangle(
center,
center + HexMetrics.corners[0],
center + HexMetrics.corners[1]
);
}
循环画6个，但是i+1会超。所以存corner的时候复制第一个元素在最后面，就省得判断有没有超出了。
Vector3 center = cell.transform.localPosition;
for (int i = 0; i< 6; i++) {
AddTriangle(
center,
center + HexMetrics.corners[I],
center + HexMetrics.corners[i + 1]
);
}
六边形坐标
上面那张图，Z轴表现得挺好的，但是 X轴弯弯曲曲的。
我们来添加一个六边形坐标系结构用来转换不同的坐标系
using UnityEngine;
[System.Serializable]
public struct HexCoordinates
{
public int X { get; private set; }
public int Z { get; private set; }
public HexCoordinates(int x, int z)
{
X = x;
Z = z;
}
X轴的偏移。EX:(0,2)原本会在(0,0)隔一行的正上方，而正确的位置应该是往右偏一格。以此类推，偶行+Z/2（注意Z是整型，结果会取整）
public static HexCoordinates FromOffsetCoordinates(int x, int z)
{
return new HexCoordinates(x - z / 2, z);
}
}
二维坐标可以很明确的用来描述6个方向中的4个。变化X就是X轴方向的变化 ，变化Z就是左下到右上的位置。这意味着我们需要第三维，只要把X坐标取反就得到了Y坐标
由于X,Y轴是对方的镜像，所以保持Z不变，把坐标加起来总是得到同一个值。实际上，如果把所有坐标都相加会得到0.如果你增加一个坐标，就要减少另外一个。这个属性非常像立方体坐标系，同样都是3个维度，拓扑结构类似于立方体。
因为总共为0，所以得知其中两个就能推算出剩下那个，所以Y不必存。
public int Y
{
get
{
return -X - Z;
}
}
public override string ToString()
{
return "(" +
X.ToString() + ", " + Y.ToString() + ", " + Z.ToString() + ")";
}
public string ToStringOnSeparateLines()
{
return X.ToString() + "\n" + Y.ToString() + "\n" + Z.ToString();
}
4.1 Inspector里的坐标
定义一个属性绘制器。创建HexCoordinatesDrawer脚本然后放在Editor文件夹下。类继承自 UnityEditor.PropertyDrawer而且需要UnityEditor.CustomPropertyDrawer把它关联到正确的类型上。
using UnityEngine;
using UnityEditor;
[CustomPropertyDrawer(typeof(HexCoordinates))]
public class HexCoordinatesDrawer : PropertyDrawer
{
}
Property drawers通过OnGUI渲染其内容。提供了屏幕坐标、系列化属性和属性名称标签。
public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
{
HexCoordinates coordinates = new HexCoordinates(
property.FindPropertyRelative("x").intValue,
property.FindPropertyRelative("z").intValue
);
position = EditorGUI.PrefixLabel(position, label);
GUI.Label(position, coordinates.ToString());
}
EditorGUI.PrefixLabel用来加前缀标签，并且返回新的位置
- 触摸格子
用Physics.Raycast实现，前提是给HexMesh一个mesh collider。
MeshCollider meshCollider;
void Awake()
{
GetComponent().mesh = hexMesh = new Mesh();
meshCollider = gameObject.AddComponent();
…
}
在 triangulating后把mesh给collider
public void Triangulate(HexCell[] cells)
{
…
meshCollider.sharedMesh = hexMesh;
}
现在需要确定点击到的是哪个格子。在HexCoordinates定义一个FromPosition进行转化。
public void TouchCell(Vector3 position)
{
position = transform.InverseTransformPoint(position);
HexCoordinates coordinates = HexCoordinates.FromPosition(position);
Debug.Log("touched at " + coordinates.ToString());
}
如果Z等于0的话，X,Y互为相反数。
public static HexCoordinates FromPosition(Vector3 position)
{
float x = position.x / (HexMetrics.innerRadius * 2f);
float y = -x;
}
沿着z轴移动，每二行就出现X-1,Y-1的情况。
float offset = position.z / (HexMetrics.outerRadius * 3f);
x -= offset;
y -= offset;
取整
int iX = Mathf.RoundToInt(x);
int iY = Mathf.RoundToInt(y);
int iZ = Mathf.RoundToInt(-x - y);
return new HexCoordinates(iX, iZ);
加个LOG验证
if (iX + iY + iZ != 0) {
Debug.LogWarning("rounding error!");
}
return new HexCoordinates(iX, iZ)
发生问题的是当点是靠近在格子边缘的时候（注：X和Z算行数的时候2行之前是有交叠的部分的），取整导致的问题。离格子中心越远则误差越大。那可以认为误最大的那个方向是错的。
if (iX + iY + iZ != 0)
{
float dX = Mathf.Abs(x - iX);
float dY = Mathf.Abs(y - iY);
float dZ = Mathf.Abs(-x - y - iZ);
if (dX > dY && dX > dZ) {
iX = -iY - iZ;
}
else if (dZ > dY) {
iZ = -iX - iY;
}
}
5.1给六边形着色
给HexGrid一个默认色和点击色
public Color defaultColor = Color.white;
public Color touchedColor = Color.magenta;
给HexCell一个颜色字段。并在创建格子的时候把默认色给它
public class HexCell : MonoBehaviour
{
public HexCoordinates coordinates;
public Color color;
…
void CreateCell(int x, int z, int i)
{
…
cell.coordinates = HexCoordinates.FromOffsetCoordinates(x, z);
cell.color = defaultColor;
…
}
}
还得把颜色信息给HexMesh
List colors;
void Awake()
{
…
vertices = new List();
colors = new List();
…
}
public void Triangulate(HexCell[] cells)
{
hexMesh.Clear();
vertices.Clear();
colors.Clear();
…
hexMesh.vertices = vertices.ToArray();
hexMesh.colors = colors.ToArray();
…
}
在triangulating的时候。我们顺便把颜色信息设置了。另外写个方法AddTriangleColor来处理这事
void Triangulate(HexCell cell)
{
Vector3 center = cell.transform.localPosition;
for (int i = 0; i < 6; i++)
{
AddTriangle(
center,
center + HexMetrics.corners[i],
center + HexMetrics.corners[i + 1]
);
AddTriangleColor(cell.color);
}
}
void AddTriangleColor(Color color)
{
colors.Add(color);
colors.Add(color);
colors.Add(color);
}
回到HexGrid.TouchCell。首页找到格子坐标在数组里的正确索引，如果是个方形的地图，那就应该是(X+Z)*WIDTH。但我们这种情况，还需要加上半个Z的偏移。然后取出相应的格子，改变颜色 。再重新triangulate一遍。其实也并不用重新triangulate，之后优化的教程会说到
public void TouchCell(Vector3 position)
{
position = transform.InverseTransformPoint(position);
HexCoordinates coordinates = HexCoordinates.FromPosition(position);
int index = coordinates.X + coordinates.Z * width + coordinates.Z / 2;
HexCell cell = cells[index];
cell.color = touchedColor;
hexMesh.Triangulate(cells);
}
虽然改变了颜色 ，但是并没有看到效果。因为默认的shader不会用的顶点颜色。创建 Assets / Create / Shader / Default Surface Shader。改两个地方： input加上color属性，albedo* color。只关心RGB，因为我们是不透明的。然后新建个材质用这个shader。
Shader "Custom/VertexColors" {
Properties {
_Color("Color", Color) = (1,1,1,1)
_MainTex("Albedo (RGB)", 2D) = "white" {}
_Glossiness("Smoothness", Range(0,1)) = 0.5
_Metallic("Metallic", Range(0,1)) = 0.0
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200
CGPROGRAM
#pragma surface surf Standard fullforwardshadows
#pragma target 3.0
sampler2D _MainTex;
struct Input
{
float2 uv_MainTex;
float4 color : COLOR; //这里加上颜色
};
half _Glossiness;
half _Metallic;
fixed4 _Color;
void surf(Input IN, inout SurfaceOutputStandard o)
{
fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
o.Albedo = c.rgb * IN.color; //改这里
o.Metallic = _Metallic;
o.Smoothness = _Glossiness;
o.Alpha = c.a;
}
ENDCG
}
FallBack "Diffuse"
}
注：如果阴影扭曲或者动来动去的话，是因为Z值冲突。调整方向光的shadow bias 就能解决。