如何将 kineticJS 与 box2dweb 一起使用,以便可以进行碰撞检测?比如,我如何在通过 kineticJS 渲染的图像周围放置一个圆形边界并通过 box2dweb 应用物理?
是否有关于此的任何好的教程或任何可以帮助我的代码?或者有什么有效的方法可以用 kineticJS 本身进行碰撞检测吗?
最佳答案
你所做的是:
设置一个 box2d“世界”——将世界想象成地球(或任何其他星球)上的一个房间
向世界添加“物体”——物体是移动或静止的物体,它们的行为根据您指定给它们的物理特性而定。
为每个 box2d 实体分配一个 kineticJs“皮肤”——皮肤是“漂亮的”kineticJs 形状对象,将由 kineticJs 在 Canvas 上绘制。例如,在游戏中皮肤可能是足球。
让 box2d 世界运转起来并监听 box2d 的“滴答”事件——当 box2d 计算出在您指定的时间长度内发生的物理现象时,会触发滴答事件。至此box2d知道了box2d世界中每个box2d物体的位置和旋转。
在 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;
}
关于javascript - 将 KineticJS 与 box2dweb 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14798461/