使用KineticJS和box2dweb

Question

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

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

Answer 1

你做的是:

1. 建立一个box2d"世界" - 将世界视为地球上(或任何其他星球)的房间

2. 向世界添加"物体" - 物体是移动的或静止的物体,其行为符合您分配给它们的物理特性.

3. 对于每个box2d体,指定一个kineticJs"皮肤" - 皮肤是"漂亮的"kineticJs形状对象,将由kineticJs在画布上绘制.例如,在游戏中,皮肤可能是足球.

4. 将box2d世界置于运动状态并监听box2d"tick"事件 - 当box2d找出在指定时间内发生的物理时,会触发tick事件.此时,box2d知道box2d世界中每个box2d主体的位置和旋转.

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

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

此示例使用画架在画布上绘制,但转换到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;
}