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

Question

我想检查HTML5画布中两个Sprite之间的碰撞.因此,为了讨论,让我们假设两个精灵都是IMG对象,并且碰撞意味着alpha通道不是0.现在这两个精灵都可以围绕对象的中心旋转,但是如果这样做则没有其他变换更容易.

现在,我想出的明显解决方案是:

• 计算两者的变换矩阵
• 找出代码应该测试的区域的粗略估计(比如两者的偏移+计算的旋转额外空间)
• 对于交叉矩形中的所有像素,转换坐标并在Alpha通道的计算位置(舍入到最近邻居)处测试图像.然后在第一次击中时中止.

我看到的问题是:a)JavaScript中没有矩阵类,这意味着我必须在JavaScript中这样做,这可能非常慢,我必须测试每帧的冲突,这使得这相当昂贵.此外,我必须复制我在绘图时必须做的事情(或者画布对我来说,设置矩阵).

我想知道我在这里是否遗漏了什么,以及是否有更容易的碰撞检测解决方案.

Answer 1

我不是一个javascript编码器,但我认为相同的优化技巧对于Javascript和C++一样有效.

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

如果您将四元组分解为"命中"和"非命中"区域,那么您可以有效地检查给定的四元树分解是否全部为"未命中","全部命中"或"可能命中"(即包含命中和非命中像素.前两个是很容易通过的.在最后一种情况下,你可以进入下一个分解级别并重复测试.这样你只需检查你需要的像素和大面积的"非击中"和"命中"你不必做这么复杂的检查.

无论如何这只是一些想法.

Answer 2

我必须复制我在绘图时必须做的事情

好吧,您可以创建一个新的渲染上下文,为其绘制一个旋转的白色背景蒙版,将合成操作设置为lighter并在给定偏移处将顶部的另一个旋转蒙版绘制成图.

现在,如果剩下非白色像素,则会有一个点击.你仍然需要对getImageData像素进行筛选才能找到它.您可以通过向下缩放结果图像来减少该工作量(依靠抗锯齿来保持一些像素非白色),但我认为它可能仍然会很慢.

我必须测试每帧的碰撞,这使得它非常昂贵.

是的,我认为你将会使用预先计算的碰撞表.如果你有足够的空间,你可以为精灵a,精灵b,相对旋转,相对-x-标准化 - 旋转和相对-γ-标准化 - 旋转的每个组合存储一个命中/不命中位. .根据您拥有的精灵数量以及旋转或移动的步数,这可能会变得相当大.

折衷方案是将每个精灵的预旋转掩码存储在JavaScript数组中(数字,为您提供32位/像素的易于&&数据,或作为Sring中的字符,为您提供16位)和&&每行相交的精灵面具在一起.

或者,放弃像素并开始查看例如.路径.