我正在制作HTML5和Javascript平台游戏。此时，地图上的所有块都作为正方形处理。当方块不是精确的正方形/长方形时，此方法是“丑陋的”。如何检测与曲线的碰撞
检查这个形象我做获得更好的理解我的观点：
案例一：的“底部保险杠”是触摸该envolves所以运动停止块正方形。
案例二：如果我使用与上面相同的方法，当玩家跳跃时，在“顶部保险杠”甚至接触到该块之前停止移动。
我应该如何接近情况下，两个？我知道我必须检查“Top Bumper”是否碰撞或者在曲线和其他2个边缘之间的区域内。
该曲线如何？如何根据块坐标（x，y）和尺寸（宽度，高度）为其生成函数。
注意：我想避免检查曲线每一点的碰撞，因为这对于CPU来说是非常昂贵的。
有很多可能性，这取决于你想如何“完美”你希望你的碰撞是如何携带和劳动密集型的技术是。这绝不是全面的，这些只是我亲自评估的。我个人使用前两个。
使用线段来近似您的曲线。沿曲线创建“顶点”，并从每一对中创建线段。您已经知道如何针对轴对齐方块进行测试，移动到测试以查看是否有任何角色点位于对撞机线段“后面”（类似于检查点是否位于飞机后面），这不是一个巨大飞跃， 。你可以得到令人惊讶的准确和高性能的结果（取决于你生成线段的细化程度），最难的部分是首先生成碰撞图。我选择了手动定义段，我认为这是一个错误。如果我要再做一次，我可能会尝试找到一种方法来生成线段，给出一些关于我想要的粒度的设置。
计算曲线的轮廓，并为曲线的每个像素创建1px碰撞体1px。这是你的碰撞图。使用圆或省略号表示角色的碰撞网格，并检查碰撞体和角色之间的距离。这简化了计算颇多，虽然我们正在谈论可能计算的很多（每个像素一个检查），很多的优化可以通过积极地在空间上划分你的世界（斌，BSP，等等）来了。这一代的图像边缘检测相对简单，因此您可以使用近乎无缝的解决方案。我在间谍猎人中使用了这个技巧，艺术家非常欣赏能够制作艺术而不必担心碰撞的能力。
像素的diff。我从来没有真正做到这一点，但我已经看到了其中的角色精灵和精灵瓦被覆盖在内存 ，如果有非透明区域的任一 之间的任何重叠，表示 “pdiffing”会谈碰撞。根据你的精灵的大小，这可能会变得非常昂贵。它也可能只适用于基于瓦片的游戏。
如果只检查四个bumbers，基于像素的方法可能甚至是最快和最简单的方法。 –
我喜欢这个问题。你如何生成曲线（和其他边界）？它们是图像还是由数学函数创建的？您期望使用多少种不同的块？ –
@ChadMcGrath嘿，谢谢你的回复。我想使用大约10-15个不是完美的正方形/长方形的不同块。我正在使用图像PNG，但我也有这种图像（SVG），我不使用的矢量版本。 –
有一些代码用于检测与贝塞尔曲线的碰撞，这是svg用来生成它们的原因。基本上，它看起来像从函数的导数中找到最小/最大值。不知道是否还有一个JavaScript库，但如果你的SVG路径没有太多的部分，我认为这是非常可行的，取决于你在屏幕上有多少曲线（你的一个图像看起来只有1条曲线）。锯齿状的，我们可以检测线段。我们也可以通过仅查找与边框相撞的物体来作弊。 –