HTML5 Canvas冲突检测的“ globalCompositeOperation”性能

Question

早上，

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

我逐渐创建了一些小型游戏，纯粹是为了自学游戏开发的原则。 我现在可以进行基本的碰撞检测，即圆圈和平台之间的碰撞（对于大多数人来说，这非常简单，但是当您第一次使用它时，这是相当不错的成就，而当您了解什么时，它会变得更好）实际上正在继续）。 我知道像素冲突检测不仅仅适用于每款游戏，因为在许多情况下，使用上述方法可以获得足够好的结果，并且这种方法在资源上显然非常昂贵。

但是我只是脑子里动了一下（很可能其他人已经想到了这一点，虽然我已经走下坡路了，但是我已经用谷歌搜索了却什么也没发现）。

是否可以使用/利用画布的“ globalCompositeOperation”功能。 我最初的想法是将其方法设置为“异或”，然后检查画布上的所有像素是否透明，如果发现一个像素必须存在碰撞。 对？ 显然，在这一点上，您需要确定问题像素所占据的对象以及如何做出反应，但是对于其他技术，则必须这样做。

是说画布是否已经在后台进行碰撞检测以便在形状重叠时进行计算？ 可以扩展到这一点吗？

有任何想法吗？

加里

Answer 1

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

但是，我要说的是，尽管您的方法效率很低，但它在全球都适用于任何形状。

Answer 2

我上不使用带有屏幕外的画布碰撞检测codepen做了演示globalCompositeOperation设置为xor为你所提到的。 该代码简短，简单，并且应该具有较小的“碰撞画布”才能正常运行。

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

Answer 3

如果使用的是Xor模式全屏，则第二步是获取屏幕的ImageData，这是一个高成本的步骤，下一步是找出碰撞中涉及哪些对象。
无需进行基准测试：太慢了。

我建议您使用“经典”边界框测试，然后在对象的内部BBOxes上进行测试，并且仅在局部使用像素后才进行测试。
通过内部边界框，我的意思是一个矩形，对于此矩形，您一定要完全位于对象内，在此示例中为红色部分：

因此，请使用以下混合策略：
-对对象的边界框进行测试。
-如果两个BBox之间存在碰撞，请执行内部边界框测试：如果精灵的内部bbox重叠，则我们肯定会发生碰撞。
-然后，仅在确实有问题的情况下才进行像素完美测试，并且只需要在具有较大子画面大小的临时画布上绘制两个子画面即可。 您将能够更快地执行getImageData。 在此步骤中，您知道碰撞涉及哪些对象。

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

还需要说明的是，在决定如何计算内部BBox时，可以允许给定数量的空白像素进入该内部BBox，以速度为代价进行精度交换。