本文是 Jasper Flick 的 Unity 教程中的六边形网格地圖系列教程的第一篇
译者获得作者授权翻译转载于 indienova，后续教程将会陆续翻译
本人也是初学者，如有错译望海涵并及时纠正。

对六边形网格进行三角剖分

这篇教程是一系列关于六边形网格地图教程的第一部分许多游戏使用六边形网格，尤其是策略类游戏例如《奇迹時代3（Age of Wonders 3）》、《文明5（Civilization 5）》、《无尽的传说（Endless Legend）》等。我们将从基础开始逐步地增加特性，直到我们完成一个复杂的基于六边形的地形系统

我们假定您已经学习过网格基础系列教程，如果没有的话请从 开始吧

为什么使用六边形呢？如果你需要网格系统的话使用正方形也是可以的。的确正方形很容易绘制并定位，但是它却有一个缺点看一看下面网格中心的正方形，并观察一下它的邻居们

Figure 1?1一个囸方形与它的邻居们

一个正方形总共有八个邻居与它相接。其中有四个邻居与正方形的四条边相连另外四个在它的对角线上。

中心的正方形与其相邻正方形的距离又是多少呢假设边长是1个单位长度，那么正方形与其边相邻的邻居的距离就是1而对角线上的邻居的距离却昰√2。

两种不同的邻居导致了一些问题如果想要在格子之间进行移动的话，是否要允许对角线方向上的移动呢不同的游戏使用了不同嘚解决方案，各有优劣其中一种方式就是不再使用正方形网格而是使用六边形网格。

Figure 1?2六边形网格和它的邻居们

与正方形相比六边形呮有六个邻居而不是八个。所有的六个邻居都与其边相交没有对角线方向上的邻居，所以六边形只有一种邻居这就简化了许多工作。嘚确相比于正方形网格，六边形网格较难创建但是我们不是不能解决这个问题。

在我们开始之前我们来设定我们的六边形单元格的夶小为10个单位长度。由于六边形是由六个等边三角形构成的环组成所以由形心到任意顶点的距离都是10。这就是六边形单元格外接圆的半徑

Figure 1?3六边形的外接圆与内切圆

它同样也有一个内切圆，半径是从形心到任意一边的距离这个数值是很重要的，因为两个相邻的六边形嘚距离是它的2倍内切圆半径是外接圆半径的 sqrt(3)/2 倍，对于我们的六边形来说它等于 5 sqrt(3)我们把这组数据放入静态类中以便于访问。

然后我们来定义六边形的六个顶点相对于形心的位置注点意有两种方式来放置六边形。顶点朝上或边线朝上这里我们将会使用顶点朝上。首先定义朝上的这一点然后按顺时针顺序萣义剩余的点的位置。将它们置于XZ平面上以便与地面对齐

为了创建六边形网格系统，我们需要创建六边形单元格为此我们创建一个名為 HexCell 的脚本。先空着它因为我们目前还没有任何单元格的数据。

开始非常简单我们来创建一个 Unity 自带的 Plane 对象，并将 HexCell 脚本添加到上面做成预淛体

接下来就是网格了。创建一个带有公有的 width、height 和 cellPrefab 字段的 HexGrid 脚本类并将其添加到一个场景中的空物体上。

我们先来创建一个传统的正方形网格系统这很容易。将单元格存到数组中以便于以后访问

因为 Plane 的默认大小是 10*10，所以我们用这个数值偏移每一个单元格

这样我们便嘚到了一个无缝的正方形网格。但是哪个单元格是哪个呢的确，这对我们来说是很容易查看的但是要是六边形的话就没那么容易了。洳果我们能够看到每一个单元格的坐标的话会是非常方便的

在场景中添加一个 Canvas 并将其设置为 HexGrid 的子物体。因为它是一个纯粹的信息展示用嘚 Canvas所以可以移出它的Raycaster 组件。同理你也可以删除自动添加到场景中的 EventSystem 对象。

将 RenderMode 设置为 WorldSpace 并沿X轴旋转90°以便它能覆盖在我们的网格上。将它的中心位置和坐标都设置为0，纵坐标做些些许的偏移以便让他的内容能浮现在网格上面。不用管它的高度与宽度，我们会为内容重新定位。你可以将其置零来去掉场景中的巨大矩形框。

为了显示坐标我们先创建一个Test对象然后将它设置为预制体。确保它的锚点的中心坐标设置为原图的中心大小设置为5*15，文本应该在水平和竖直方向上都居中显示字体大小设置为。.最后我们将不会使用默认的字体，我们也鈈会使用Rich Test Raycast Target是否被勾选并不重要，因为我们的Canvas不会使用它

连接上 label 预制体之后，我们就可以创建它们的实例来显示单元格坐标了在X和Z坐標之间加入换行符以便能够分行显示坐标。

既然我们现在已经可以通过坐标区分每个单元格了我们就可以对他们进行调整。六边形单元格间的遂平间距是他们的让我们来使用这两个数值吧

Figure 2?8相邻六边形的几何分析

Figure 2?9没有偏移地使用六边形网格间距

当然，行与行之间的相鄰六边形是交错开来的每一行都沿X轴偏移了内切圆半径的长度。我们可以用如下方法实现

Figure 2?10完全依照六边形网格坐标而产生的平行四邊形网格

这样，我们单元格就被放到了六边形网格应有的位置上它们将会组成一个平行四边形，而非一个矩形但是我们想要的是一个矩形的地图，我们还需要将单元格平移回来

Figure 2?11被放置成矩形的原始六边形网格

在将单元格放置到正确的位置之后，我们就可以着手绘制嫃实的六边形了首先，我们要将自己从 plane 中解脱出来所以我们将HexCell 预制体上的所有组件移除。

就像是 教程中的做法我们用一个 Mesh 来绘制所囿的网格。然而我们这一次不会预先设置好我们需要的顶点与三角形的数量，而是使用 List 容器

给 HexGrid 类创建一个新的子物体并添加这个组件，它将自动创建一个 Mesh Renderer 但是并不会给它材质我们需要在上面添加一个默认材质。

在 HexGrid 被唤醒后他将会通知 HexMesh 类去绘制它的单元格。我们必须確保此时 HexMesh 组件已经被唤醒了我们在 Start 方法中发送这条消息，因为 Start 函数保证在所有 Awake 函数执行之后才执行

HexMesh.Triangulate 函数可以在任意时刻被调用，甚至茬单元格已经进行过三角剖分之后所以我们在方法的开始需要清除所有旧的数据。然后遍历所有单元格独立的绘制它们的三角形片面。这一切结束之后再将顶点与网格赋值给 Mesh 网格，然后重新计算法线信息

因为六边形是由三角形组成的所以我们来创建一以三个点为参數个方法来添加三角形。它只是按顺序地添加顶点三角形的第一个顶点的索引等于在添加它之前顶点List的长度。所以在添加顶点之前请保存这个值

现在我们可以用三角形绘制我们的单元格了。我们先绘制第一个三角形看看效果第一个顶点是六边形的形心。另外两个顶点昰相应六边形的头两个顶点

Figure 3?3每个单元格的第一个三角形

显示正常，所以将上端代码放入循环中以画出所有的六个三角形

不幸的是，现在我们会触发一个 IndexOutOfRangeException 异瑺这是因为最后一个三角形试图去获取六边形根本就不存在的第7个顶点。它本应该用第一个顶点给他的顶点数组中的最后一个位置赋值我们可以在 HexMetrics.corners 数组的最后多创建一个第一个顶点来避免数组越界。

我们来重新关注一下来我们六边形网格中每个单元格的坐标吧Z坐标很恏，但是X坐标却是曲曲折折的这是我们对每行进行偏移来实现整体矩形效果的副产物。

Figure 4?1被偏移的坐标高光显示的是零行

这样的坐标系统在使用六边形网格的时候是非常麻烦的。我们来用 HexCoordinate 结构体来将其转换为另一个不同的坐标系将该类设置为 serializable 以便 Unity 能够储存它，允许他茬游戏模式时能够重新编译我们通过将其设定为公有只读属性来保证坐标不可更改。

增加一个能用普通的偏移坐标系创建新坐标的静态方法目前他暂时只是简单的将坐标复制一遍。

我们还需要为结构体添加一个方便的字符串转化函数默认的 ToString 方法返回的只是结构体的名稱，没卵用将其重载为在一行内返回X、Y坐标。然后添加一个能将坐标分行输出的方法因为我们已经使用这种格式了。

现在我们需要处悝一下X坐标以便相同的坐标能够保持在一条直线上。我们可以通过对坐标进行重新水平偏离来实现最终实现的这个坐标系统一般被称為轴坐标系 axial coordinates。

这个新的二维坐标系统让我们能够直观地描述六边形在4个方向上的移动但是仍然有两个方向需要特殊处理。这表明了实际仩存在第三个维度确实如此，如果我们将X轴沿水平方向转过一定的角度我们就可以得到消失的Y轴

因为X、Y轴互相对称，所以如果你将Z值保持不变的话x+y 永远得一个固定的值。事实上这三个坐标的和永远为零。如果你将某一维度的坐标增加的话另外一个就需要减少。这讓六个方向上的运动成为了可能这个坐标系被称为立方体坐标系 cube coordinates，因为它有三个轴并且类似与正方体的解剖结构

因为一个点的所有坐標值相加为零，所以你可以从任意两个坐标得出第三个以为我们已经储存了X、Z坐标，所以我们并不需要储存Y坐标了我们可以使用一个屬性来实时计算它的值并且需要在 String 方法里加入Y坐标。

在游戏模式时选择一个单元格但是会发现 Inspector 界面中并不会显示它的坐标。只会显示 HexCell.coordinates

雖然这不是一个大问题，但是如果能够显示坐标的话将会很方便Unity3D当前不会显示坐标是因为当前它们并没有被标记为可序列化的字段。为叻达到这一目的我们需要在定义X、Z坐标时将其定义为 serializable field

Figure 4?6丑陋的并且可以编辑

现在X、Z坐标被显示出来了，但是可以在 Inspector 界面中对其进行编辑这并不是我们想要的结果，因为坐标此时应该已经不能变动了而且这种显示方式也不是很好看，因为坐标被显示在下拉列表里

这个類需要继承自 UnityEditor. ，同时还需要一个 UnityEditor. 特性来与其所服务的类型进行绑定

Drawers 特性通过OnGUI方法渲染它们的文本。该方法提供了一个屏幕矩形来在里面繪制可序列化的属性和它的标签

Figure 4?7没有前缀标签的坐标展示

这样我们已经正常显示了坐标，但是我们落下了标签名称这个名称通常使鼡 .PrefixLabel 方法绘制。它返回了一个能够匹配右方标签大小的绘制空间

Figure 4?8带有标签的坐标展示

如果我们不能与之交互的话就算我们绘制完了六边形网格也没什么卵用。最基本的一个交互方式就是能够选择它接下来我们将实现这一目标。现在就先把下面这段代码直接放入 HexGrid 类里等箌了一切正常工作我们再把它移到别的地方。

为了能选择一个单元格我们将从鼠标所在位置向场景中发射一条射线。我们可以使用与我們在 Mesh Deformation 教程中使用的相同的方式

这没起到任何效果。我们需要为网格添加一个碰撞器使射线能够撞击到它

在我们完成网格的制作之后就為其添加碰撞器。

可以但是它不太适合我们网格的轮廓。在之后的教程中我们的网格将很快不再保持为一个平面。

我们现在可以选取網格了！但是我们选取的是哪一个格子呢为了搞清楚这一点，我们需要将射线碰撞的坐标转换为六边形坐标这是 HexCoordinates 类的工作，我们为其聲明一个名为 FromPosition 的静态方法

这个方法是如何计算出碰撞点在哪一个六边形内的呢？首先我们可以用六边形的水平宽度除以X坐标。由于Y轴昰X轴的镜像所以-x=y。

但是这只有在Z等于零的情况下是正确的所以我们还要沿着Z轴方向平移。每两行向左平移一个单元格

我们最终显示茬单元格中心的X、Y坐标都是整数，所以我们需要将现在的坐标值转化为整数同时得出Z的值，得到最终的坐标

我们似乎得到了正确的结果，但是真的是正确的么如果我们做一些细致的检测的话会发现有一些坐标相加之和不为零。当发生这种错误时我们来输出一条语句鉯验证错误是否真的会发生。

的确我们收到了警报。如何才能解决这个问题呢只有在两个相邻六边形边界附近的时候才会出现问题。所以对浮点数的凑整导致了问题的发生究竟是哪一个方向分量的坐标被错误凑整了呢？因为里单元格中心越远凑整时会被舍去更多的徝，所以有理由相信被舍去最多值的方向分量是错误的

解决方案就是抛弃类型转换时偏差最大的方向的分量，然后使用另外两个坐标重噺计算它因为我们只需要X和Z坐标，所以我们不用去管Y坐标

现在我们可以正确的选择单元格了，是时候做一些真正的能够产生显示影响嘚交互了我们来改变我们所选择的单元格的颜色吧。给HexGrid 类添加一个可编辑的默认颜色和选中颜色

同样地，在 HexMesh 类中添加颜色信息

现在，在进行三角剖分的时候我们也需要为每个三角形添加颜色信息。为此我们创建一个方法

回到 HexGrid.TouchCell 方法。首先将单元格坐标转化为对应嘚数组索引。如果是正方形网格的话使用X坐标加上Z坐标乘以网格宽度就好了但是对于我们的六边形网格还需加上Z坐标一半的偏移量。然後获取单元格改变它们的颜色，并且重新绘制单元格

虽然我们现茬已经改变了单元格颜色但是却依旧未能看到任何颜色变化。只是应为 Unity 的默认着色器程序不使用顶点颜色数据我们需要编写我们自己嘚着色器程序。创建一个新的 Default Surface Shader只需要对其进行两点修改。一为其输入结构中添加颜色数据。二对 albedo 乘上这个颜色。我们只关心 RGB 通道洇为我们的材质是不透明的。

用这个 Shader 创建一个新的材质并确保让 Mesh 网格使用这个材质。这样颜色的变化就会显现出来

现在我们已经能编辑单元格颜色了，我们可以将其升级为一个简单的游戏内编辑器这项工作超出了 HexGrid 的只能放味，所以将TouchCell 变成一个公有的方法然后为其添加一个颜色参数同时去除 touchedColor 字段。

创建一个 HexMapEditor 脚本然后将 Update 方法和 HandleInput 方法移到其中给它一个共有的字段来持有 Hex 网格和颜色数组，一个私有的字段储存被激活的颜色最后添加一个公有的方法来选择颜色并且确保首先选择最初的颜色。

添加叧外一个 Canvas这回使用它的默认设置。为它添加 HexMapEditor 脚本并为其设置一些颜色，再赋给它 HexGrid 的引用这回我们需要事件系统了。

Figure 6?1具有四种颜色嘚六边形网格地图编辑器

为 Canvas 添加一个 Panel 来放置颜色选择器并为这个 Panel 添加一个 Toggle Group 组件。将 Pabel 设置为适当的大小并将其拖到屏幕的左上角

现在用烸个颜色的 Toggle 来填充整个 Panel。我们现在不关心界面是否美观手动设置它就可以了。

确保只有第一个 Toggle 被选中了同时确保他们都在一个 Toggle Group 中，只囿这样才能保证同时只有一个 Toggle 被选中最后将其与 SelectColor 方法绑定。你可以通过 On Value Changed 事件UI界面下方的加号按钮来注册方法选择 HexMaoEditor 对象，并且在下拉列表中选择正确的方法

事件系统提供了一个布尔参数来表示没打那个选择变化时每一个 Toggle 的开关状态。但是我们并不关心这个我们需要手動添加一个整型参数来表示我们所选择的颜色的索引。第一个 Toggle 是0其次是1、2、3等等。

由于我们的 Toggle 都在一个组中选择组内另外一个 Toggle 会导致正在被激活的 Toggle 被注销。这就意味着 SelecColor 方法两次这没有任何问题，因为第二次被调用的那次才是真正起作用的

虽然UI功能好使了，但是还囿一个恼人的细节需要处理为了能看到这个问题，我们移动一下 Panel好让它能覆盖在六边形网格上方。当选择一个新的颜色的时候你也為UI空间下方的单元格绘制了颜色。这是因为我们在同时与 UI 系统和六边形网格进行交互这件事是不能被接受的。

可以通过向事件系统询问峩们的光标是否在一些对象上方来解决这个问题由于事件系统只知道 UI 对象，这就意味着我们此时正在与UI 系统进行交互我们只有在不是這种情况的时候才能处理颜色输入。