如何在不易多边形分体中检测碰撞

Question

假设我们正在使用Javascript进行编码，我们有一个身体，比如一个苹果，并且想要检测被投掷的岩石的碰撞：它很容易，因为我们可以简单地将苹果视为一个圆圈。 但是，我们如何拥有“非常复杂”的分形？然后没有类似于它的多边形，我们也无法在没有大量努力的情况下将其分解为更小的多边形。在这种情况下是否有任何方法可以检测出完美的碰撞，而不是制作“善良”的作品，比如将分形视为多边形（不完美，因为即使在空白处也会检测到碰撞）？

Answer 1

如果您有多边形的坐标，则可以使用Javascript Clipper

制作主题和剪辑多边形的交集。

这个问题没有提供太多的碰撞对象信息，但通常任何东西都可以表示为一定的精度。

编辑：

对于实时渲染应该足够快（取决于多边形的复杂性）。如果多边形是复杂的（许多自交点和/或许多点），有许多方法可以加速交叉点检测：

• 使用ClipperLib.JS.Lighten（）减少点数。它删除了对轮廓没有影响的点（例如，重复的点和边缘上的点）
• 使用ClipperLib.JS.BoundsOfPath（）或ClipperLib.JS.BoundsOfPaths（）获取多边形的第一个边界矩形。如果边界矩形没有碰撞，则无需进行交叉操作。此功能非常快，因为它只获得x和y的最小值/最大值。
• 如果多边形是静态的（即它们的几何/点数据在动画期间不会改变），您可以在动画开始之前减轻并获取路径边界并将多边形添加到Clipper。然后在每个帧期间，您只需要很少的努力来获得实际的交叉点。

EDIT2：

如果您担心帧速率，可以考虑使用实验性浮点（双）Clipper，比IntPoint版本快4.15倍，当IntPoint版本需要大整数时，浮动版本比版本快8.37倍IntPoint版本。最终速度实际上有点高，因为IntPoint Clipper需要首先按比例放大（到整数）然后按比例缩小（到浮点数），并且在上述测量中不考虑此缩放时间。但浮动版本未经过全面测试，应在生产环境中小心使用。

实验版本的代码：http://jsclipper.sourceforge.net/6.1.3.4b_fpoint/clipper_unminified_6.1.3.4b_fpoint.js

演示：http://jsclipper.sourceforge.net/6.1.3.4b_fpoint/main_demo3.html

游乐场：http://jsbin.com/sisefo/1/edit?html,javascript,output

EDIT3：

如果您没有对象的多边形点坐标且对象是位图（例如png / canvas），则必须首先跟踪位图，例如。使用Marching Squares算法。一个实现是在 https://github.com/sakri/MarchingSquaresJS

你得到一个轮廓点阵列，但由于数组包含大量不需要的点（例如，直线可以很容易地表示为起点和终点），你可以使用例如减少点数。 ClipperLib.JS.Lighten（）或http://mourner.github.io/simplify-js/。

在这些步骤之后，您可以获得位图对象的非常轻的多边形表示，这些表示可以通过交集算法快速运行。

Answer 2

您可以使用物理编辑器 https://www.codeandweb.com/physicseditor

它适用于大多数游戏引擎。你必须弄清楚如何使它在JS中运行。

这是来自网站的使用typescript的教程 - 与JS相关 http://www.gamefromscratch.com/post/2014/11/27/Adventures-in-Phaser-with-TypeScript-Physics-using-P2-Physics-Engine.aspx

Answer 3

您可以创建指示对象占用区域的位图（以像素为单位）。如果位图之间存在交集，则存在冲突。