当前位置：首页 > news >正文

Tiled六边形地图坐标转换实战：从困惑到精通的完整指南

news 2026/6/28 15:04:11

Tiled六边形地图坐标转换实战：从困惑到精通的完整指南

【免费下载链接】tiled项目地址: https://gitcode.com/gh_mirrors/til/tiled

你是否曾经面对Tiled六边形地图时，感觉坐标系统就像一团乱麻？明明在编辑器中看得清清楚楚的瓦片，到了代码里却怎么也定位不准。别担心，这篇文章将带你从零开始，彻底掌握六边形地图的坐标转换奥秘。

为什么六边形地图让人头疼？

想象一下，你在Tiled中精心设计了一个六边形地图，每个瓦片都摆放得整整齐齐。但当你尝试在游戏中实现时，却发现：

点击屏幕位置无法正确映射到对应的六边形瓦片
相邻瓦片的坐标计算总是出错
路径寻找算法在六边形网格上完全失效

这些问题的根源都指向同一个核心：六边形坐标系统。与简单的方形网格不同，六边形网格拥有更复杂的几何关系，这也让坐标转换变得至关重要。

两种坐标系统的本质区别

偏移坐标：Tiled编辑器的语言

当你在Tiled中工作时，使用的是偏移坐标系统。这种坐标将六边形网格映射到我们熟悉的二维数组中，通过两个关键参数来控制布局：

staggeraxis：决定交错方向（x轴还是y轴）
staggerindex：决定交错起始位置（奇数还是偶数）

这种坐标的优势是直观易用，特别适合地图编辑和数据存储。但缺点也很明显：在进行距离计算、邻接判断等游戏逻辑时，数学运算变得异常复杂。

轴向坐标：游戏逻辑的最佳伙伴

轴向坐标系统使用(q, r)两个坐标轴来定位六边形，第三个轴s由公式s = -q -r自动推导。这种坐标系统在数学计算上具有天然优势：

距离计算变得简单直接
邻接关系一目了然
路径寻找算法实现更加优雅

实战：四种坐标转换场景全解析

根据Tiled的不同配置，坐标转换分为四种典型情况。让我们通过具体代码来掌握每种转换：

场景1：Y轴交错 + 奇行起始

// 偏移坐标转轴向坐标 function offsetToAxial_YOdd(x, y) { return { q: x - Math.floor((y + 1) / 2), r: y }; } // 轴向坐标转偏移坐标 function axialToOffset_YOdd(q, r) { return { x: q + Math.floor((r + 1) / 2), y: r }; }

场景2：Y轴交错 + 偶行起始

function offsetToAxial_YEven(x, y) { return { q: x - Math.floor(y / 2), r: y }; } function axialToOffset_YEven(q, r) { return { x: q + Math.floor(r / 2), y: r }; }

场景3：X轴交错 + 奇列起始

function offsetToAxial_XOdd(x, y) { return { q: x, r: y - Math.floor((x + 1) / 2) }; } function axialToOffset_XOdd(q, r) { return { x: q, y: r + Math.floor((q + 1) / 2) }; }

场景4：X轴交错 + 偶列起始

function offsetToAxial_XEven(x, y) { return { q: x, r: y - Math.floor(x / 2) }; } function axialToOffset_XEven(q, r) { return { x: q, y: r + Math.floor(q / 2) }; }

构建你的坐标转换工具库

现在，让我们把这些分散的转换函数整合成一个强大的工具库：

class HexCoordinateConverter { constructor(staggeraxis, staggerindex) { this.staggeraxis = staggeraxis; this.staggerindex = staggerindex; } // 通用的偏移坐标转轴向坐标 offsetToAxial(x, y) { if (this.staggeraxis === 'y') { if (this.staggerindex === 'odd') { return this.offsetToAxial_YOdd(x, y); } else { return this.offsetToAxial_YEven(x, y); } } else { if (this.staggerindex === 'odd') { return this.offsetToAxial_XOdd(x, y); } else { return this.offsetToAxial_XEven(x, y); } } } // 通用的轴向坐标转偏移坐标 axialToOffset(q, r) { if (this.staggeraxis === 'y') { if (this.staggerindex === 'odd') { return this.axialToOffset_YOdd(q, r); } else { return this.axialToOffset_YEven(q, r); } } else { if (this.staggerindex === 'odd') { return this.axialToOffset_XOdd(q, r); } else { return this.axialToOffset_XEven(q, r); } } } // 计算两个六边形之间的距离 distance(axialA, axialB) { return (Math.abs(axialA.q - axialB.q) + Math.abs(axialA.q + axialA.r - axialB.q - axialB.r) + Math.abs(axialA.r - axialB.r)) / 2; } // 获取相邻的六边形坐标 getNeighbors(q, r) { return [ {q: q + 1, r: r}, // 右 {q: q, r: r + 1}, // 右下 {q: q - 1, r: r + 1}, // 左下 {q: q - 1, r: r}, // 左 {q: q, r: r - 1}, // 左上 {q: q + 1, r: r - 1}, // 右上 ]; } }