如何检测与曲线的碰撞 [英] How to detect collisions with a curve
问题描述
我正在制作HTML5和Javascript平台游戏.此刻，地图上的所有图块均被视为正方形.当块不是精确的正方形/矩形时，此方法很丑".
I am making an HTML5 and Javascript platform game. At this moment all blocks of the map are handled as squares. This method is "ugly" when the block is not an exact square/rectangle.
查看我制作的这张图片，以更好地理解我的观点:
Check this image I made to get a better understand of my point:
第一种情况:底部保险杠"正在触碰围绕着方块的正方形，因此运动停止了.
Case one: The "bottom bumper" is touching the square that envolves the block so the movement is stopped.
第二种情况:如果我使用与上述相同的方法，则当玩家跳跃时，运动将在顶部保险杠"甚至碰到障碍物之前停止.
Case two: If I use the same method as above, when the players jumps, the movement will be stopped before the "top bumper" even touches the block.
我应该如何处理第二种情况?我知道我必须检查顶部保险杠"是否在曲线和其他2条边之间的区域内 OR碰撞.
How should I approach case two? I know that I have to check if the "Top Bumper" is colliding OR inside the area between the curve and the other 2 edges.
那条曲线会如何?如何基于块坐标(x，y)和尺寸(宽度，高度)为其生成函数.
How would that curve be? How can I generate a function for it based on the block coordinates (x,y) and dimensions (width, height).
注意::我想避免检查该曲线的每个点是否存在碰撞，因为这对于CPU来说非常昂贵.
Note: I would like to avoid checking for collisions in every point of that curve because that would be very expensive for the CPU.
推荐答案
有很多可能性，具体取决于您希望碰撞的完美"程度以及该技术的便携性和劳动强度.这绝不是全面的，这些只是我个人要评估的.我已经亲自使用了前两个.
There are many possibilities, depending on how "perfect" you want your collisions to be and how portable and labor-intensive you want the technique to be. By no means is this comprehensive, these are just the ones I would personally evaluate. I've used the first two personally.
-
使用线段逼近曲线.沿着曲线创建顶点"，并从每对线段中创建线段.您已经知道如何针对轴线对齐的正方形进行测试，转到测试是否有任何字符点在对撞机线段之后"并不是一个巨大的飞跃(类似于检查点是否在平面后")..这样，您可以获得令人惊讶的准确和高性能的结果(取决于生成线段的粒度)，最困难的部分是首先生成碰撞贴图.我选择手动定义细分，我认为这是一个错误.如果我要再做一次，我可能会尝试找到一种生成线段的方法，并提供一些有关我想要它们的粒度的设置.
Use line segments to approximate your curve. Create "vertices" along the curve, and make line segments out of each pair of them. You already know how to test against axis-aligned squares, it's not a huge leap to move to testing to see if any of your characters points are "behind" a collider line segment (similar to checking if points are "behind" a plane). You can get surprisingly accurate and performant results with this (depending on how granularly you generate line segments), the hardest part is generating the collision map in the first place. I chose to hand-define the segments, which I consider a mistake. If i were to do it again, I'd probably try to find a way to generate the line segments, given some settings about how granular I want them.
计算曲线的轮廓，并为曲线的每个像素创建1px x 1px的碰撞体.这是您的碰撞图.使用圆形或省略号作为角色的碰撞网格，并检查对撞机和角色之间的距离.这极大地简化了计算，尽管我们讨论的是可能计算的很多(每像素一个检查)，但通过对空间进行积极的空间划分(bin，bsp，等等).生成此图像是相对简单的图像边缘检测，因此您将获得一种近乎嵌入式的解决方案.我在间谍猎人"(Spy Hunter)盗版中使用了它，艺术家非常欣赏能够制作艺术品而不必担心碰撞的能力.
Calculate the outline of the curve, and create colliders 1px by 1px for each pixel of the curve. This is your collision map. Use a circle or ellipsis for the collision mesh of your character, and check distance between the colliders and character. This simplifies the calculations quite a lot, and although we're talking about a lot of possible calculations (one check per pixel), a lot of optimization can be had by aggressively spatially partitioning your world (bin, bsp, whatever). Generation of this is relatively straightforward image edge detection, so you wind up with a near-drop-in solution. I used this in a Spy Hunter ripoff, and the artist greatly appreciated the ability to just make art and not worry heavily about collisions.
像素差异.我从来没有真正做到过，但是我看到过关于"pdiffing"，其中字符精灵和图块精灵重叠内存中，以及非透明区域之间是否有重叠两者之一，则表示发生碰撞.取决于您的大小精灵，这可能变得非常昂贵.它也会可能只能在基于图块的游戏中使用.
Pixel diffs. I've never actually done this, but I've seen talks of "pdiffing" where the character sprite and tile sprites are overlaid in-memory, and if there is any overlap between non-transparent areas of either, it indicates a collision. Depending on the size of your sprites, this may become prohibitively expensive. It also would probably only work in the context of a tile-based game.
这篇关于如何检测与曲线的碰撞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
