2

早晨，

在过去的几个月里，我一直在修改 HTML5 Canvas API，并且从中获得了很多乐趣。

我逐渐创建了一些小游戏，纯粹是为了自学游戏开发的注意事项。我现在能够进行基本的碰撞检测，即圆圈和平台之间的碰撞（对于大多数人来说相当简单，但当你第一次让它工作时感觉就像一个相当大的成就，当你明白什么时会更好实际上正在发生）。我知道像素碰撞检测并非适用于所有游戏，因为在许多情况下，您可以使用上面讨论的方法获得足够好的结果，而且这种方法显然在资源上相当昂贵。

但我只是有一个脑电波（很可能其他人已经想到了这一点，而我已经走得很远了，但我用谷歌搜索了一下，什么也没找到）......所以这里......

是否可以使用/利用画布的“globalCompositeOperation”功能。我最初的想法是将其方法设置为“异或”，然后检查画布上的所有像素是否透明，如果找到像素，则必须发生碰撞。正确的？显然，此时您需要确定所讨论的像素被哪些对象占据以及如何做出反应，但是对于其他其他技术，您必须这样做。

说是画布已经在幕后进行了这种碰撞检测，以便确定形状何时重叠？是否有可能在此基础上进行扩展？

有任何想法吗？

加里

4

3 回答 3

2

画布不会自动执行此操作（可能 b/c 它仍处于起步阶段）。easeljs采用这种方式处理鼠标进入/离开事件，效率极低。我正在使用一种算法方法来确定界限。然后我用它来查看鼠标是在形状内部还是外部。理论上，要以这种方式实现命中检测，您所要做的就是获取两个形状的所有点，并查看它们是否曾经处于另一个形状中。如果您想查看我的一些代码，请告诉我

但是，我要说的是，虽然你的方式效率很低，但它对任何形状都是全局适用的。

于 2012-01-13T11:12:10.327 回答
1

如果你使用异或模式全屏，第二步是获取屏幕的ImageData，这是一个成本很高的步骤，下一步是找出哪些物体参与了碰撞。
无需基准测试：它会太慢。

我建议您使用“经典”边界框测试，然后对对象的内部 BBOxes 进行测试，并且仅在您在本地寻找像素之后。
通过内部边界框，我的意思是一个矩形，你肯定会完全在你的对象内，这个例子中的红色部分：

在此处输入图像描述

所以使用这种混合策略：
- 对对象的边界框进行测试。
- 如果 2 个 BBoxes 之间发生碰撞，则执行内部边界框测试：如果精灵的内部 bboxes 重叠，我们确信存在碰撞。
- 然后你只为真正有问题的情况保留像素完美测试，并且你只需要在具有较大精灵大小的临时画布上绘制两个精灵。您将能够执行更快的 getImageData。在此步骤中，您知道哪些对象参与了碰撞。

在此处输入图像描述

请注意，您可以在较小的画布上按比例绘制精灵，以降低分辨率为代价获得更快的 getImageData。
一定要禁用平滑，我认为 8X8 画布已经足够了（实际上它取决于平均精灵速度。如果你的精灵很慢，请提高分辨率）。
这样数据为 8 X 8 X 4 = 256 字节大，您可以保持良好的帧速率。

Rq 还指出，在决定如何计算内部 BBox 时，可以允许给定数量的空像素进入内部 BBox，以准确性换取速度。

于 2014-05-02T09:46:31.777 回答
1

我在 codepen 上做了一个演示，它使用你提到的globalCompositeOperation设置为的屏幕外画布进行碰撞检测。xor该代码简短而简单，并且应该具有较小的“碰撞画布”的性能。

http://codepen.io/sakri/pen/nIiBq

于 2014-05-02T08:14:50.277 回答