Question

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

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

Answer 1

你做的是：

设置box2d“世界” - 将世界视为地球（或任何其他星球）的房间
向世界添加“身体” - 身体是移动的或静止的物体，其行为符合您指定给它们的物理。
对于每个box2d体，指定一个kineticJs“皮肤” - 皮肤是“漂亮的”kineticJs形状对象，将由kineticJs在画布上绘制。例如，在游戏中，皮肤可能是足球。
将box2d世界置于运动状态并侦听box2d“tick”事件 - 当box2d找出在指定时间内发生的物理时，会触发tick事件。此时，box2d知道box2d世界中每个box2d体的位置和旋转。
在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;
}

Answer 2

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

使用KineticJS和box2dweb

2 个答案: