javascript - HTML5 Canvas 中的像素完美碰撞检测

Question

我想检查 HTML5 Canvas 中两个 Sprite 之间的碰撞。因此，为了便于讨论，我们假设两个 Sprite 都是 IMG 对象，并且碰撞意味着 alpha channel 不为 0。现在这两个 Sprite 都可以围绕对象的中心旋转，但没有其他变换，以防万一更容易。

现在我想到的显而易见的解决方案是:

• 计算两者的变换矩阵
• 粗略估计代码应测试的区域(例如两者的偏移量 + 计算的额外旋转空间)
• 对于相交矩形中的所有像素，变换坐标并在 Alpha channel 的计算位置(四舍五入到最近的邻居)测试图像。然后在第一次点击时中止。

我看到的问题是 a) JavaScript 中没有矩阵类，这意味着我必须在 JavaScript 中这样做，这可能会很慢，我必须测试每一帧的碰撞，这使得这非常昂贵。此外，我必须复制我在绘图时已经要做的事情(或者 Canvas 为我做的事情，设置矩阵)。

我想知道我是否遗漏了什么，是否有更简单的碰撞检测解决方案。

Answer 1

我不是 JavaScript 编码员，但我认为同样的优化技巧对 Javascript 和 C++ 一样有效。

只需旋转 Sprite 的 Angular 而不是每个像素。实际上你会做一些类似软件纹理映射的事情。您可以使用各种梯度信息计算出给定像素的 x,y 位置。查看软件纹理映射以获取更多信息。

如果四叉树将 Sprite 分解为“命中”和“非命中”区域，那么您可以有效地检查给定的四叉树分解是否全部为“未命中”、“全部命中”或“可能命中” (即包含命中和非命中像素。前 2 个是微不足道的通过。在最后一种情况下，你然后进入下一个分解级别并重复测试。这样你只检查你需要的像素太大了“未命中”和“命中”区域您不必进行如此复杂的检查。

无论如何，这只是一些想法。