javascript - 将 KineticJS 与 box2dweb 一起使用

Question

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

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

Answer 1

你所做的是:

1. 设置一个 box2d“世界”——将世界想象成地球(或任何其他星球)上的一个房间

2. 向世界添加“物体”——物体是移动或静止的物体，它们的行为根据您指定给它们的物理特性而定。

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

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

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

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

此示例使用 easelJs 在 Canvas 上绘图，但转换为 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;
}