非标准压扁型尖顶六边形的像素转轴向坐标适配问题

问题概述 #

你使用的是嵌入正方形的尖顶六边形（非标准六边形），呈“压扁”状态：上下顶点间距为标准六边形的 sqrt(3)/2 * width；瓦片布局规则为：

• 所有奇数行偏移 size/2 的x值
• 每行相对上一行偏移 -size/4 的y值（原点(0,0)位于左上角）

参考Red Blob Games的标准尖顶六边形像素转轴向坐标算法，无需重新设计，只需针对你的瓦片形状和布局规则做针对性修改即可。

原标准算法 #

function pixel_to_pointy_hex(point):
    var q = (sqrt(3)/3 * point.x  -  1./3 * point.y) / size
    var r = (                        2./3 * point.y) / size
    return axial_round(Hex(q, r))

修改后的适配算法 #

function pixel_to_squashed_pointy_hex(point, size) {
    // 估算当前点所在的近似行，用于修正布局偏移
    const approx_r = Math.floor(point.y / ((3 * size) / 4));
    
    // 修正奇数行的x偏移
    let adjusted_x = point.x;
    if (approx_r % 2 === 1) {
        adjusted_x -= size / 2;
    }
    
    // 修正行的y偏移（原点左上，y向下为正，偏移-size/4是向上，所以加回偏移量）
    const adjusted_y = point.y + (approx_r * size / 4);
    
    // 适配y轴的压扁缩放：你的瓦片y轴高度是标准的 sqrt(3)/2 倍，还原为标准坐标空间
    const y_scaling = Math.sqrt(3) / 2;
    const normalized_y = adjusted_y / y_scaling;
    
    // 应用标准尖顶六边形的坐标转换公式
    const q = (Math.sqrt(3)/3 * adjusted_x - 1/3 * normalized_y) / size;
    const r = (2/3 * normalized_y) / size;
    
    // 轴向坐标取整
    return axial_round(Hex(q, r));
}

关键修改点说明 #

1. 布局偏移修正：先把奇数行的x坐标回调size/2，同时将y坐标加回累计的行偏移量，把你的偏移布局还原为规整的六边形排列。
2. y轴缩放适配：由于你的六边形在y轴方向被压缩为标准的sqrt(3)/2倍，需要将y坐标除以该缩放系数，还原到标准六边形的坐标空间后再应用原算法。
3. 复用原算法核心：坐标修正后直接复用Red Blob Games的轴向转换和取整逻辑，无需重新设计底层算法。

内容的提问来源于stack exchange，提问作者Christopher Theriault