box2dweb와 함께 KineticJS 사용하기

Question

box2dweb과 함께 kineticJS를 사용하여 어떻게 충돌 감지가 가능합니까? 마찬가지로, 어떻게 kineticJS를 통해 렌더링 된 이미지 주위에 원형 경계를 놓고 box2dweb를 통해 물리학을 적용 할 수 있습니까?

나 또는이 코드에 대한 유용한 자습서가 있습니까? 아니면 kineticJS 자체로 충돌 탐지를 할 수있는 효율적인 방법이 있습니까?

Answer 1

당신이 할 것은 :

1. 는 "세계"는 Box2D의 설정 - 지구상의 방 (또는 다른 행성)

2. 하면에 "몸"을 추가로 세계의 생각을 세계 - 시체는 당신이 그들에게 할당 한 물리학에 따라 행동하는 움직이거나 정지 된 물체입니다.

3. 각 box2d 본문에 kineticJs "skin"을 지정하십시오. - skin은 kineticJs에 의해 캔버스에 그려지는 "예쁜"kineticJs 모양 객체입니다. 예를 들어, 게임에서 피부는 축구 공일 수 있습니다.

4. 상자 2d 세계를 움직여서 box2d "tick"이벤트를 수신합니다. box2d가 지정한 시간 동안 발생한 물리학을 파악하면 tick 이벤트가 발생합니다. 이 시점에서 box2d는 box2d 세계에서 각 box2d 본문의 위치와 회전을 알고 있습니다.

5. box2d tick 이벤트에서 각 box2d 본문의 위치/회전을 확인하고 box2dbody에서 같은 위치/회전으로 kineticJs 스킨을 그립니다.

가에 아주 좋은 예이다 :이 예는 캔버스에 그릴 easelJs를 사용 http://www.luxanimals.com/blog/article/combining_easel_box2d

는하지만, kineticJs 라이브러리에 convertion은 매우 간단합니다 - 정확한 동일한 개념이 적용됩니다.

는 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