引言

电子游戏中六角网格的运用没有方形网格那样常见，也确实有些不够直观，因此，一直以来，这方面的资料也相对较为匮乏。来自斯坦福大学的 Amit Patel 搜罗相关资料的工作已断断续续进行了二十余年。他将多年的宝贵经验融为这篇教程，为大家提供一个用最简洁的代码来实现六角网格的优雅方案。教程参考了 Charles Fu 与 Clark Verbrugge 的一些文章，整理和讲解了如何制作六角网格，六角网格之间的关系，相关的算法等问题，尤为贴心和难得的是，这篇教程中的许多部分都是可以交互的。文中代码样例使用伪码写成，这样读者可以方便地用他们擅长与熟悉的语言来实现属于他们自己的六角网格系统。

几何学

角度

function hex_corner(center, size, i):
    var angle_deg = 60 * i   + 30
    var angle_rad = PI / 180 * angle_deg
    return Point(center.x + size * cos(angle_rad),
                 center.y + size * sin(angle_rad))

大小/布局

坐标系统

现在，让我们试着将六边形放入网格之中。方形网格的处理方法显而易见，无须多作他想。而六角网格则有许多种办法。我推荐使用立方坐标法为主要表示方法，使用轴坐标或偏移坐标来存储地图，以及作为面向玩家的显示坐标。

偏移坐标

最常见的处理方法是偏移其余的每一行或者每一列。列名为 col 或 q。行名为 row 或 r。既可以偏移奇数行列，也可以偏移偶数行列，因此对边线朝上和顶点朝上各有两种变化:

立方坐标

在六角网格系统中使用立方坐标是一种非常合理的选择。我们使用 x + y + z = 0 作为约束条件，在应用这些算法时需要注意这一条件。这一约束也确保了每个六角网格都对应一个笛卡尔三维坐标。

当然，也还有其他可用的立方-六角网格，其中一些约束条件未必是 x + y + z = 0，但本文就使用这一种作为范例。你也可以尝试用 x-y, y-z, z-x 来构造立方坐标系，它的性质十分有趣，我这里就不再作更深入的探讨了。

“可是 Amit 啊！” 你突然说道，“我可不想用三个值来存储坐标系，这样我就不知道怎么储存地图数据了啊。”

轴坐标

轴

偏移坐标是人们最先会想到的坐标系，因为它能够直接使用方形网格的笛卡尔坐标。但不幸的是，偏移坐标系中的一个轴总会显得格格不入，并且最终会把问题变得复杂化。立方坐标和轴坐标则显得相得益彰，算法也更简单明了，只是地图存储方面会略微变得复杂一点。还有一些其他的坐标系方法，比如所谓的交织坐标或者双倍坐标等，我这里就不研究它们了；据说使用立方/轴坐标系是较为简单的。

轴的方向就是坐标值增加的方向，而轴的法线方向是坐标值不变的方向。上面的网格坐标中显示出了法线的方向。

坐标转换

虽然你有可能使用的偏移坐标或者轴坐标，但许多算法在立方坐标中会拥有更为简洁的表达。因此，你需要建立它们之间相互转换的方法。

轴坐标与立方坐标紧密相关，因此转换起来也十分容易：

# 将立方坐标转换为轴坐标
q = x
r = z

# 将轴坐标转换为立方坐标
x = q
z = r
y = -x-z

function cube_to_hex(h): # 轴坐标
    var q = h.x
    var r = h.z
    return Hex(q, r)

function hex_to_cube(h): # 轴坐标
    var x = h.q
    var z = h.r
    var y = -x-z
    return Cube(x, y, z)

# 将立方坐标转换为偶数列偏移坐标
col = x
row = z + (x + (x&1)) / 2

# 将偶数列偏移坐标转换为立方坐标
x = col
z = row - (col + (col&1)) / 2
y = -x-z

# 将立方坐标转换为奇数列偏移坐标
col = x
row = z + (x - (x&1)) / 2

# 将奇数列坐标转换为立方坐标
x = col
z = row - (col - (col&1)) / 2
y = -x-z

# 将立方坐标转换为偶数行偏移坐标
col = x + (z + (z&1)) / 2
row = z

# 将偶数行偏移坐标转换为立方坐标
x = col - (row + (row&1)) / 2
z = row
y = -x-z

# 将立方坐标转换为奇数行偏移坐标
col = x + (z - (z&1)) / 2
row = z

# 将偶数行偏移坐标转换为立方坐标
x = col - (row - (row&1)) / 2
z = row
y = -x-z

注意：我这里使用 a&1(位与)而非 a%2 来判断奇偶，这篇笔记给出了具体的原因。

相邻

怎样才能找出与每个六边形相邻的六个六边形呢? 如你所料，在立方坐标中很容易就能确定答案，由其衍生的轴坐标系中这个问题也不麻烦，但偏移坐标中会稍微有点复杂。我们可能也会想要算出六个“对角线”六边形。

var directions = [
   Cube(+1, -1,  0), Cube(+1,  0, -1), Cube( 0, +1, -1),
   Cube(-1, +1,  0), Cube(-1,  0, +1), Cube( 0, -1, +1)
]

function cube_direction(direction):
    return directions[direction]

function cube_neighbor(hex, direction):
    return cube_add(hex, cube_direction(direction))

var directions = [
   , , ,
   , , 
]

function hex_direction(direction):
    return directions[direction]

function hex_neighbor(hex, direction):
    var dir = hex_direction(direction)
    return Hex(hex.q + dir.q, hex.r + dir.r)

偏移坐标

偏移坐标中的数值的变化与网格的具体位置有关。是否在偏移过的行列结果会有所不同。

和前面的处理方式类似，我们会建立一个数值表，用来存放 col 和 row 的改变量。但这次我们使用两个数组，一个用于奇数行，另外一个用于偶数行。观察网格图中的 (1, 1) 并观察你在六个方向移动时发生的变化。再试试从 (2, 2) 出发的情况。对4种偏移的情况表格和代码都有所区别，因此点击对应的网格类型来查看对应的代码吧。

var directions = [
   [ , , ,
     , ,  ],
   [ , , ,
     , ,  ]
]

function offset_neighbor(hex, direction):
    var parity = hex. & 1
    var dir = directions[parity][direction]
    return Hex(hex.col + dir.col, hex.row + dir.row)

使用上述查表法是计算相邻格子位置最简单的办法，这里再提供另一种可行之策供好奇的同学研究: 传送门。

对角线

移动到对角线位置对立方坐标造成的改变有两种情况，会让立方坐标的三个坐标中的两个出现 ±2 或 ∓1(和保持为0)。

var diagonals = [
   Cube(+2, -1, -1), Cube(+1, +1, -2), Cube(-1, +2, -1),
   Cube(-2, +1, +1), Cube(-1, -1, +2), Cube(+1, -2, +1)
]

function cube_diagonal_neighbor(hex, direction):
    return cube_add(hex, diagonals[direction])

和前面一样，你可以略去其中一个坐标得到轴坐标系，或者通过预先计算找出偏移坐标中的位置。

距离

立方坐标

立方坐标系中，每个立方体中的六边形都处在一个三维的空间中。在六角网格中距离为 1 的相邻六边形在立方网格中距离为 2。这让距离计算变得容易了起来。在方形网格中，曼哈顿距离的值为 abs(dx) + abs(dy)。在立方网格中，曼哈顿距离为 abs(dx) + abs(dy) + abs(dz)。六角网格中的距离取其一半即可:

function cube_distance(a, b):
    return (abs(a.x - b.x) + abs(a.y - b.y) + abs(a.z - b.z)) / 2

另外一种等价的算法是三坐标之一必然是其他两个之和，因此取其作为距离即可。无论是取半还是求最大值的方法都能获得同样的结果：

function cube_distance(a, b):
    return max(abs(a.x - b.x), abs(a.y - b.y), abs(a.z - b.z))

在上图中，最大值会高亮显示。请注意：每一种颜色都标识着六种不同的对角线方向。

轴坐标

轴坐标系中，第三个坐标被隐藏了起来，因此我们先将其转换为立方坐标再计算距离：

function hex_distance(a, b):
    var ac = hex_to_cube(a)
    var bc = hex_to_cube(b)
    return cube_distance(ac, bc)

如果你在编译时内联了 hex_to_cube 和 cube_distance，则会生成如下代码：

function hex_distance(a, b):
    return (abs(a.q - b.q)
          + abs(a.q + a.r - b.q - b.r)
          + abs(a.r - b.r)) / 2

有许多种在轴坐标中计算六角网格距离的方法，但无论应用哪一种方法，都应该记住其本质: 轴坐标中计算六角网格距离都衍生自立方网格中的曼哈顿距离。举例来说，根据这篇文章的结论 ，其中所谓的区别无非是 a.q + a.r - b.q - b.r 写成 a.q - b.q + a.r - b.r，当你认识到它们与立方网格间的联系，会认识到它们本质上都是等价的。

偏移坐标

和处理轴坐标一样，我们会基于立方坐标来处理偏移坐标，然后使用立方坐标的距离：

function offset_distance(a, b):
    var ac = offset_to_cube(a)
    var bc = offset_to_cube(b)
    return cube_distance(ac, bc)

连线

我们如何确定两个六边形之间的连线所在的六边形呢？我会考虑使用线性插值法：均匀地对线条在 N + 1 个点上取样，并找到这些样本点所在的六边形。

1. 我们先计算端点间的六角网格距离 N。
2. 然后在端点 A 与 B 间均匀地取 N + 1 个样本点。进行线性插值，第 i 的位置从 0 到 N 应该是依次是 A + (B - A) * 1.0/N * i
。在图中样本点会是一些浮点数坐标，它们所在的六边形会以蓝色显示。
3. 将每个样本点(浮点数)转换为六角网格坐标(整型)。算法名为 cube_round。

综上所述， A 与 B 之间的连线代码如下：

function cube_lerp(a, b, t):
    return Cube(a.x + (b.x - a.x) * t,
                a.y + (b.y - a.y) * t,
                a.z + (b.z - a.z) * t)

function cube_linedraw(a, b):
    var N = cube_distance(a, b)
    var results = []
    for each 0 ≤ i ≤ N:
        results.append(cube_round(cube_lerp(a, b, 1.0/N * i)))
    return results

一些备注：

• 应用于方形网格中的差分算法会将 N 作为轴间距离的最大值。立方网格中也能使用这种奇数，而且其值恰好就是六角网格间的距离。
• 有时候你需要在算得的坐标上做一点微小的改动，比如 Cube(1e-6, 1e-6, -2e-6) 来让结果看起来更加一致。这样会让线不至于刚好落在两个六角网格的分界线上。
• 函数 cube_lerp 会返回一个立方浮点坐标。如果你使用的是一种强类型的语言，那么不应该使用 Cube 类型而是应该新定义一个 FloatCube，如果不想定义新的类型，你也可以考虑将这个函数定义为内联函数。
• 通过这些方法可以进一步优化代码：内联 cube_lerp；在循环外就先算出 B.x-A.x， B.x-A.y 以及 1.0/N 等数值；乘法可以转换成重复的加法；把一些计算比如差分算法放在最后等等。
• 我一般使用立方坐标或者轴坐标来确定连线，如果你想要在偏移坐标中干这件事可以参考这篇 文章。
• 连线问题有许多变种。有时你希望尽可能将挨着的六边形包括进去(所谓的 Super Cover)。已经有人给我发过相关的代码但我暂时还没来得及研究。

移动范围

坐标范围

给出六角形面心 center 与范围 N，有哪些六边形在 N 步之内呢？

我们可以先回头看六角网格距离的公式: distance = max(abs(dx), abs(dy), abs(dz))。要找到范围 N 以内的所有六边形，需要满足的条件为 max(abs(dx), abs(dy), abs(dz)) ≤ N。这意味着我们需要分别满足： abs(dx) ≤ N ，abs(dy) ≤ N 以及 abs(dz) ≤ N。去掉绝对值符号，即 -N ≤ dx ≤ N， -N ≤ dy ≤ N 以及 -N ≤ dz ≤ N。在代码中使用嵌套循环：

var results = []
for each -N ≤ dx ≤ N:
    for each -N ≤ dy ≤ N:
        for each -N ≤ dz ≤ N:
            if dx + dy + dz = 0:
                results.append(cube_add(center, Cube(dx, dy, dz)))

这种写法能用，但效率有点低。我们遍历了所有的 dz 但是其中只有一个满足 dx + dy + dz = 0 的约束条件。因此，我们直接算出满足约束条件的 dz：

var results = []
for each -N ≤ dx ≤ N:
    for each max(-N, -dx-N) ≤ dy ≤ min(N, -dx+N):
        var dz = -dx-dy
        results.append(cube_add(center, Cube(dx, dy, dz)))

上面的循环就只会遍历所需的坐标值。如图所示，每个范围都用一对边来表示。每一条线都对应一个不等式。我们选取满足所有六个不等式的六边形。

交叉范围

如果你想要找到位于交叉范围内的某个六边形，那么在生成六边形列表前你应该先计算出交叉范围。

你既可以把它当成一个代数问题，也可以将其看作一个几何问题。从代数角度考虑，每个范围都会被表示成形如 -N ≤ dx ≤ N 的不等式，我们需要算出这些约束条件的交集。从几何角度考虑，每个区域都是3D空间中的一个立方体，将其映射到平面 x + y + z = 0上可以求得六边形。我们用代数方法来求解。

首先我们将约束条件 -N ≤ dx ≤ N 表示成更通用的形式， xmin ≤ x ≤ xmax，并令 xmin = center.x - N， xmax = center.x + N。类似地，对 y 和 z 坐标系会进行同样的操作，并在上一节的生成代码像下面这样写：

var results = []
for each xmin ≤ x ≤ xmax:
    for each max(ymin, -x-zmax) ≤ y ≤ min(ymax, -x-zmin):
        var z = -x-y
        results.append(Cube(x, y, z))

障碍

function cube_reachable(start, movement):
    var visited = set()
    add start to visited
    var fringes = []
    fringes.append([start])

    for each 1 < k ≤ movement:
        fringes.append([])
        for each cube in fringes[k-1]:
            for each 0 ≤ dir < 6:
                var neighbor = cube_neighbor(cube, dir)
                if neighbor not in visited, not blocked:
                    add neighbor to visited
                    fringes[k].append(neighbor)

    return visited

旋转

已知一个六角矢量(由一个六边形坐标指向另外一个六边形坐标)，我们想要旋转它求得另外一个不同的六边形。如果我们将旋转角度限制为 1/6 圆周的倍数，那么可以在立方坐标系中轻松地实现这一功能。

顺时针旋转 60°：

    [ x,  y,  z]
to  [-z, -x, -y]

逆时针旋转 60°：

    [ x,  y,  z]
to  [-y, -z, -x]

你可以在上图中自己验证这些结论：旋转 60°会造成符号反转，坐标本身也会旋转。旋转 120°再次反转回起点时的状态。旋转 180°后符号反转但坐标转回到原位。

你可以将其转换成轴坐标或偏移坐标。你也可以查看 StackExchang 上的这篇讨论来学习别的旋转计算方法。

环

单环

环的算法主要用于确定某个六边形是否位于一个给定半径的环上，我们还可以计算这个六边形到环心位置的距离，看它是否等于半径 radius。为得到所有满足条件的六边形的列表，可以从环心位置取半径 radius 外的六边形，再沿着环的路径旋转一圈定位其他六边形。

function cube_ring(center, radius):
    var results = []
    # this code doesn't work for radius == 0; can you see why?
    var cube = cube_add(center,
                        cube_scale(cube_direction(4), radius))
    for each 0 ≤ i < 6:
        for each 0 ≤ j < radius:
            results.append(cube)
            cube = cube_neighbor(cube, i)
    return results

作为起点的六边形位于图中大箭头指向的位置。我选取边角4的方向作为起点，你如果选择别的方向也不成问题。在内部一层的循环镇南关， cube 会沿着圆环移动，移动 6 * radius 后它将回到起点位置。

螺旋

一层一层地以螺旋状遍历环形可以填充整个区域的内部空间：

function cube_spiral(center, radius):
    var results = [center]
    for each 1 ≤ k ≤ radius:
        results = results + cube_ring(center, k)
    return results

区域内六边形的个数就是从中心开始一步一步移动的格数；这里的公式能够帮助你求得结果。

这种访问六边形的方式也可以用于计算移动范围。

视野

已知相对位置和距离，如何求某个格子是否对另外一个格子可见，而没有被障碍物遮蔽呢？最简单的做法是绘制两个六边形间的连线，如果连线没有碰触到任何墙壁，就视为互相可见。如下图所示，你可以移动鼠标来观察从中心网格出发的视线。

如果区域很大，这种算法会变得非常低效。但它十分易于实s现，因此我推荐将它作为首先学习的算法。

有许多种不同的方式定义某个位置是否可见。必须要看到另外一个六边形的中心位置吗？还是只要看到一个边角就可以呢？还是遮蔽部分不超过一半就算可见？视野的问题实际上比表明上更加棘手多变。先尝试这种简单的算法，不过它不一定能满足你项目的预期效果，有时候这种简单的算法会产生一些很不合逻辑的结果。

从六角网格到像素

如果你使用了矩阵库，那么这只不过是非常简单的矩阵乘法。然而我这里还是先写出一个不使用矩阵的版本。对本文使用的 x = q, z = r 的网格，转换关系为:

function hex_to_pixel(hex):
    x = size * sqrt(3) * (hex.q + hex.r/2)
    y = size * 3/2 * hex.rx = size * 3/2 * hex.q
    y = size * sqrt(3) * (hex.r + hex.q/2)
    return Point(x, y)

如果使用矩阵算法，在后文进行像素坐标到六角网格坐标转换的时候，会非常方便。我们到时候只需要求逆矩阵就可以了。如果你使用的是立方坐标系统，你可以直接使用立方坐标 (x, y, z)，也可以先将其转换为轴坐标，然后使用轴坐标 (q, r)。

在偏移坐标中，我们需要偏移行数或列数(这样一来它就不再是整型了)。之后我们可以使用单位矢量 q 和 r，并将其与 x 和 y 轴对齐：

function offset_to_pixel(hex):
    x = size * sqrt(3) * (hex.col + 0.5 * (hex.row&1))
    y = size * 3/2 * hex.rowx = size * sqrt(3) * (hex.col - 0.5 * (hex.row&1))
    y = size * 3/2 * hex.rowx = size * 3/2 * hex.col
    y = size * sqrt(3) * (hex.row + 0.5 * (hex.col&1))x = size * 3/2 * hex.col
    y = size * sqrt(3) * (hex.row - 0.5 * (hex.col&1))
    return Point(x, y)

不幸的是，偏移坐标没有可用于矩阵算法的单位矢量。这也是使用偏移坐标时从像素坐标转换成六角网格坐标会更困难的原因所在。

另外一种解决方案是，先将偏移坐标转换为立方坐标或轴坐标，然后再将立方坐标或轴坐标转换成像素坐标。通过内联转换函数来进行优化，最终效果与前面所述的基本上不会有差别。

从像素到六角网格

恐怕这是最普遍的一个问题，如何才能将一个像素位置(比如鼠标点击位置)转换为一个六角网格坐标呢？下面我会演示使用轴坐标或立方坐标时的做法。对偏移坐标来说，最简单的方法是先将其转换为立方坐标，找到结果后再转换回偏移坐标。

1. 首先我们求六角网格向像素网格转换的拟运算。这会得到一个浮点数六角网格，上图中显示为深蓝色的圆点。
2. 接着我们找到包含蓝色圆点的六边形，如图以浅蓝色高亮显示。

为了从六角网格坐标转换为像素坐标，我们需要对 q, r 乘以单位矢量来得到 x, y。这实际上是一次矩阵乘法。下面是顶点朝上布局时的公式：

像素坐标到六角坐标的转换十分直观，我们可以使用逆矩阵：

通过上面的公式可以算出浮点轴坐标 q 和 r，而使用 hex_round() 就能将浮点轴坐标转换为整型的轴坐标。

顶点朝上布局的代码如下：

function pixel_to_hex(x, y):
    q = (x * sqrt(3)/3 - y / 3) / size
    r = y * 2/3 / size
    return hex_round(Hex(q, r))

边线朝上布局的代码如下：

function pixel_to_hex(x, y):
    q = x * 2/3 / size
    r = (-x / 3 + sqrt(3)/3 * y) / size
    return hex_round(Hex(q, r))

只需要三行代码就可以将像素坐标转换为轴坐标。如果你使用的是偏移坐标，返回值可以改为 return cube_to_hex(cube_round(Cube(q, -q-r, r)))。

还有许多其他将像素坐标转换为六角网格坐标的方法，这里提供我所知的另外一种方法。

将坐标圆整到最近的六角网格上

有时我们得到的结果会是一个浮点数立方坐标 (x, y, z)，我们想找出它究竟在哪一个六边形网格内。在连线和从六角网格转换像素坐标这两节中我们已经遇到过这种需求。由于将浮点数转换为整型的算法称为圆整，因此我将这种算法命名为立方圆整(cube_round)

在立方坐标中，有约束条件 x + y + z = 0，即使浮点立方坐标也必须满足这个条件。因此，我们可以首先将其圆整到附近的整点坐标 (rx, ry, rz) 上。然而，由于有约束条件 x + y + z = 0，我们无法保证还能满足 rx + ry + rz = 0 在我的算法中，我们会将变化最大的坐标重置为满足约束条件的值。比如，如果 y 的改变量最大，即 abs(ry - y) 比 abs(rx -x) 以及 abs(rz - z) 都大，那么我们会重置 ry = -rx-rz。代码如下：

function cube_round(h):
    var rx = round(h.x)
    var ry = round(h.y)
    var rz = round(h.z)

    var x_diff = abs(rx - h.x)
    var y_diff = abs(ry - h.y)
    var z_diff = abs(rz - h.z)

    if x_diff > y_diff and x_diff > z_diff:
        rx = -ry-rz
    else if y_diff > z_diff:
        ry = -rx-rz
    else:
        rz = -rx-ry

    return Cube(rx, ry, rz)

对非立方坐标系统来说，最简单的做法是先转换为立方坐标系统，使用这个圆整算法，然后再转换回原先的坐标系：

function hex_round(h):
    return cube_to_hex(cube_round(hex_to_cube(h)))

笔记： cube_round 与 hex_round 都以浮点数坐标为参数，而非整型坐标参数。如果你已经写好了 Cube 与 Hex 的类，它们应该可以用于动态语言，你可以直接传递浮点数参数；如果是强类型的语言，使用 unified number 类型即可。然而，在多数的强类型语言中，最好分不同的类来处理浮点坐标与整点坐标，这样在 cube_round 中会有 FloatCube → Cube，如果需要用到 hex_round，还会有 FloatHex → Hex，可以使用 floatcube_to_floathex 来代替 cube_to_hex。在一些具有参数类型的语言(例如 C++，Haskell中)，你可以定义 Cube，T 可以是整数也可以是浮点数。此外，你也可以让 cube_round 接受三个参数，这样就无需为它定义一个新类型了。

轴坐标系统的地图存储

轴坐标系统最惹人抱怨的问题就是，当它使用矩形地图时，会浪费许多存储空间；这可能是偏移坐标系统受欢迎的一个原因。然而，如果使用三角形或者六边形的地图，所有类型的六角网格坐标系统都会浪费一些存储空间，我们完全可以用同一种方法来存储所有这些类型的地图。

注意，被浪费的存储空间会位于每一行的左侧和右侧(除了菱形地图)。这启发了我们如何进行地图存储：

1. 忽略这个问题。用 null 初始化数组，或者使用其他能够检测无用储存空间的方法。对多种形状的地图来说这个问题有利有弊，因此不是太值得花功夫来找更加复杂的解决方法。
2. 使用哈希表而非数组。这样地图什么形状都没关系，哪怕中间包括空洞。当你希望访问六角网格的 q, r 位置时，你实际上访问的是 hash_table(hash(q, r))。将其封装进 grid 类的 getter/setter 中，这样你就可以不用再关心这件事了。
3. 将行向左滑移，并且使用可变大小的行。在许多语言类型中，2D 数组实际上是数组的数组。因此数组大小不需要保持定长。这样就不用浪费右侧的空间了。此外，如果你数组的开始位置不再每一列的最左侧，也可以移除掉左侧浪费的空间。

如果是任意凸形的地图，你可以额外维护保存第一列格子的数组。当你需要访问位于 q, r 的六边形时，作为替代，你可以访问 array[r][q - first_column[r]]。将其封装进格子的类中，你就不用再关心这个问题。图中的 first_column[r] 显示在每一行的左侧。

如果是固定形状的地图，可以临时计算第一行而不用固定存储在数组中。

• 对矩形地图，有 first_column[r] == -floor(r/2)，而你最终访问的是 array[r][q + r/2]，可以证明与转移到偏移网格坐标等价。
• 对三角形地图，有 first_column[r] == 0，最终访问的是 array[r][q] —— 真方便！如果三角形地图朝向另外一个方向(图中没有显示)，则变成 array[r][q+r]。
• 对半径为 N 的六边形地图，当 N = max(abs(x), abs(y), abs(z)，有 first_column[r] == -N - min(0, r)。最后你访问的会是 array[r][q + N + min(0, r)]。然而，由于我们可能会把一些 r < 0 的位置作为起点，因此我们也必须偏移行，有 array[r + N][q + N + min(0, r)]。
• 对菱形地图，什么问题都不会有，使用 array[r][q] 即可。

环绕型地图

在某些游戏中你希望能使用有限无界的地图。在方形网格地图中，你既可以只让 x 轴方向形成环形(地图最终近似可以视为球形)，也可以让 x 轴和 y 轴都形成环形(地图形状近似甜甜圈)。环绕的方案取决于地图的形状而不是网格的形状。使用偏移坐标时让一个矩形地图呈现环形十分容易。我这里展示的是如何基于立方坐标让一个六边形的地图变得环形无界。

在地图中有六个“镜像”的中心点。当你离开地图后，你可以将当前的位置减掉一个距离你最近的镜像中心距离，直到你重新回到地图上。如下面的演示图所示，尝试从中央的地图离开，观察其中一个镜像，会从相反的一边进入地图。

最简单的实现就是预先算好所有结果。利用查表法，存储好每一个六边形边缘跳出后进入的位置。地图边缘的每一个六边形都会挨着相反边的另外一个格子，从地图一边离开到达的位置恰好和其对称镜像地图中的位置一致。用 M 表示六个镜像中心点，用 L 表示地图上的每一个位置，建立一个表 mirror_table[cube_add(M, L)] = L。当你需要的时候只需找出六边形在对称的镜像地图中的位置，然后用非镜像点将其替换即可。

寻路算法

如果你使用的是基于图论的 A^* 算法，Dijkstra 算法或 FloydWarshall 算法，那么其实六角网格的寻路与方形网格相比没什么本质差别。有关寻路的算法和实例代码可以参看我的另外一篇教程：寻路指南。

如图所示，将鼠标放在对应的网格上就能显示路径。你可以点击和拖拽墙壁瓷砖。

1. Neighbors 方法。我提供的范例代码中，会调用 graph.neighbors 来得到相邻网格的位置。这个函数可以参看本文关于相邻的章节。抛开这个功能将难以实现寻路算法。
2. Heuristic 方法。A^* 算法的范例代码使用 heuristic 方法来求两个网格间的距离。具体的公式可以参看本文关于距离的章节。

相关文章与资源

读完本教程的朋友可以参考本系列的另外一篇教程：六角网格的实现，包含使用 C++，Java，C#，JavaScript，Haxe 以及 Python 编写的示例代码。

• 在网格沉思一文中，为介绍了方形网格，三角网格，六角网格的边角定位关系以及用于网格组成要素间的关系的算法。我也演示了方形网格与六角网格的衍生关系。
• 我最早读到的轴坐标系统教程是 Clark Verbrugge 在 1996 年写的 这篇文章。
• James McNeill 这里有一篇图文并茂的网格转化演示。
• DevMag 的这篇有关六角网格数学的概论介绍了如何显示半平面，三角，四边形等知识。Unity 的插件 GameLogic Grids 引入了许多类型的网格系统。
• 六角坐标类型概论：偏移坐标，交织坐标，立方坐标与轴坐标。
• Rot.js 库包含六角网格的列表：非正交坐标系(即轴坐标)，奇数变形坐标系(即偏移坐标)，双宽坐标系(即交织坐标)，立方坐标系等。
• 立方坐标系的范围：求给定范围内的六边形问题。
• 六角网格的距离一文介绍了立方网格的应用以及用其代替偏移网格的原因。
• 这篇教程讲解了如何基于偏移坐标测绘六角网格的基础知识。
• 如何将立方六角网格坐标转换为像素坐标。
• 这篇论坛贴子介绍了如何生成环形。
• HexPart系统同时使用六角网格与矩形网格，以此来简化一些算法的实现。
• 论边线朝上和顶点朝上孰优孰劣。
• 六角网格中的视线一文基于偏移网格，将六角网格划分成了三角网格。
• Hexnet 的这篇文章讲解了六边形和立方体之间的对应关系，相比本文更加深入和细致。
• 这份 PDF 文件在我思考一些算法时给了我许多帮助。
• 为六角坐标生成三元平衡组看起来是一篇很有趣的教程，但我还没有细看。
• Hex-Grid Utilities 是一个专门为六角网格编写的 C# 库，包含求相邻网格，网格，范围查找，路径搜寻，视野等诸多功能。以 MIT 协议开源。
• 如果想查看更多相关资源，可以翻阅 Reddit 讨论串，Hacker News 讨论串或者 MetaFilter 讨论串的评论区。

这篇教程的交互部分使用 Haxe 与 Javascript 编码： Cube.hx，Hex.hx，Grid.hx，ScreenCoordinate.hx，ui.js 以及用于生成立方坐标与六角坐标转换动画的 cubegrid.js。不过，如果你希望自己编写一套六角网格程序库，我建议你参考我的另外一篇教程：六角网格的实现。

目前本教程仍然处于更新之中，未来可能增添的内容列表可以在Trello 上找到。Indienova 译文版也会同步更新。有什么好的建议欢迎反馈或者在评论区留言。