结合使用KineticJS和box2dweb

Question

如何结合使用kineticJS和box2dweb，才能进行碰撞检测？例如，如何在通过kineticJS渲染的图像周围放置圆形边界并通过box2dweb应用物理？

有没有什么好的教程或者代码可以帮助我呢？或者，有没有什么有效的方法可以用kineticJS本身进行碰撞检测？

Answer 1

您要做的是：

1. 设置了一个box2d“box2d”-将世界想象为地球(或任何其他星球)上的一个房间
2. 将“body”添加到世界中-body是根据您指定给它们的物理行为的运动或静止对象。
3. 为每个box2d body分配一个kineticJs“皮肤”-皮肤是“漂亮的”kineticJs形状对象，将由kineticJs绘制在画布上。例如，在游戏中，皮肤可能是足球。
4. 使box2d世界处于运动状态，并侦听box2d的“滴答”事件-当box2d计算出在指定时间长度内发生的物理过程时，滴答事件被激发。此时，box2d知道每个box2d实体在box2d世界中的位置和旋转。
5. 在box2d tick事件中，检查每个box2d实体的位置/旋转，并在box2dbody的相同位置/旋转绘制kineticJs皮肤。

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

这个示例使用easelJs在画布上绘制，但是到kineticJs库的转换非常简单--完全相同的概念也适用。

编辑以提供更多信息

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

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;
}

Answer 2

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