3

如何将 kineticJS 与 box2dweb 一起使用，以便可以进行碰撞检测？就像，我怎样才能在通过 kineticJS 渲染的图像周围放置一个圆形边界并通过 box2dweb 应用物理？

有没有关于这个的好教程或任何可以帮助我的代码？或者有什么有效的方法可以用 kineticJS 本身进行碰撞检测？

4

2 回答 2

9

你要做的是：

  1. 建立一个box2d“世界”——把世界想象成地球（或任何其他星球）上的一个房间

  2. 将“物体”添加到世界中——物体是移动或静止的物体，它们的行为取决于您分配给它们的物理特性。

  3. 对于每个 box2d 主体，分配一个 kineticJs“皮肤”——皮肤是由 kineticJs 在画布上绘制的“漂亮”的 kineticJs 形状对象。例如，在游戏中，皮肤可能是足球。

  4. 让 box2d 世界运动并监听 box2d 的“tick”事件——当 box2d 计算出在您指定的时间长度内发生的物理现象时，就会触发 tick 事件。此时 box2d 知道了 box2d 世界中每个 box2d 主体的位置和旋转。

  5. 在 box2d tick 事件中，检查每个 box2d body 的位置/旋转，并在 box2dbody 的相同位置/旋转处绘制 kineticJs 皮肤。

有一个很好的例子：http ://www.luxanimals.com/blog/article/combining_easel_box2d

此示例使用画架在画布上绘图，但转换为 kineticJs 库非常简单——应用完全相同的概念。

[编辑以提供更多信息]

此外，如果您不需要 box2d 中的所有物理，这里有一个非常简单的使用 kineticJs 的 2 圆碰撞测试。

function CirclesAreColliding(circle1,circle2){
    var dx = circle2.getX() - circle1.getX();
    var dy = circle2.getY() - circle1.getY();
    if( Math.sqrt( dx*dx + dy*dy ) <= ( circle1.getRadius() + circle2.getRadius() ) {
        return true;
    }
    return false;
}
于 2013-02-10T17:05:30.153 回答
1

这是一个关于它的教程。祝你好运 http://www.codeproject.com/Articles/571743/Box2D-and-JavaScript-Part-3

于 2013-10-19T19:49:55.490 回答