如何为六边形网格着色，使其没有相同颜色的邻居？

Question

我有一个生成十六进制网格的 javascript 应用程序。对于每个立方体坐标（x、y 和 z），每个十六进制顶部都有三个变量。我还有一个包含三个十六进制精灵的数组。

我试过sprite = sprites[hex.x&3]，它会产生整齐的六角形行。我还尝试通过sprite = sprites[(hex.x + hex.y&3)&3] 根据列偏移行，但这不起作用。我目前正在摆弄公式，但收效甚微。

我知道我需要不少于三个精灵来执行此操作，但是我找不到一种方法来组合三个立方体坐标以在数组上显示正确的精灵:(

Answer 1

在十六进制网格中，您需要三种颜色来为每个十六进制着色，这样它就不会与相邻的颜色相同：

您的解决方案是正确的。而不是添加x+y，您需要减去x-y。另一个变化是&3 用于位操作；你会想要%3。但是，在包括 Javascript 在内的某些语言中，%3 可以返回负数，因此您需要使用 ((___%3)+3)%3 将其设为正数。

您想要的颜色/精灵 ID 是 ((x-y)%3 + 3) % 3。我做了an interactive demo 来测试这个。