使用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

此示例使用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; 
} 

Answer 2

這是一個關於它的教程。祝你好運 http://www.codeproject.com/Articles/571743/Box2D-and-JavaScript-Part-3