3

衝突検出を可能にするために、どうすれば kineticJS を box2dweb と一緒に使用できますか? 同様に、どうすれば kineticJS でレンダリングされた画像の周りに円形の境界を配置し、box2dweb で物理学を適用できますか?

これに関する良いチュートリアルや、私を助けることができるコードはありますか? または、kineticJS 自体で衝突検出を行う効率的な方法はありますか?

4

2 に答える 2

9

あなたがすることは：

  1. box2dの「世界」を設定する–世界を地球（または他の惑星）の部屋と考えてください

  2. 世界に「ボディ」を追加します。ボディは、割り当てられた物理学に従って動作する移動オブジェクトまたは静止オブジェクトです。

  3. box2dボディごとに、kineticJsの「スキン」を割り当てます。スキンは、kineticJsによってキャンバスに描画される「きれいな」kineticJsシェイプオブジェクトです。たとえば、ゲームでは、スキンはサッカーボールである可能性があります。

  4. box2dワールドを動かし、box2dの「tick」イベントをリッスンします。tickイベントは、box2dが指定された時間内に発生した物理特性を把握したときに発生します。この時点で、box2dは、box2dワールド内の各box2dボディの位置と回転を認識しています。

  5. box2dティックイベントで、各box2dボディの位置/回転を確認し、box2dbodyで同じ位置/回転でkineticJsスキンを描画します。

非常に良い例があります：http ：//www.luxanimals.com/blog/article/combining_easel_box2d

この例では、easelJsを使用してキャンバスに描画しますが、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;
}
于 2013-02-10T17:05:30.153 に答える