Box2djs, JS Physics Engine - 볼 오브젝트의 배경 이미지 설정?

Question

여기 Box2djs 플러그인 작업

: http://www.crackin.com/dev/mms/physics/

... 내가 할 노력하고있어 모든 공을 채울이다는 이미지 텍스처와 객체. 나는 CSS 값을 설정하는 것만 큼 간단하기를 바랬지 만 표준 배경과 관련된 CSS 규칙 중 하나도 공을 변경하지 않으므로 올바르게 수행하지 않는 것 같습니다. math.random을 사용하여 각기 다른 질감의 오브젝트를 만들기 위해 각 공에 적용 할 5 개의 클래스 이름을 만들 수있었습니다. ... 이 내가이 물리 엔진의 특정 빌드 사용하고있다 M&M Mock Image

: 여기

내가 그들을 사용하여 이미지처럼 보이게 할 수 뭔가에 비해, 지금의 모습의 예 github.com/hrj/box2d-js ... Prototype 대신 jQuery를 사용하고 있습니다.

Answer 1

저는 Box2DJS를 많이 사용 해왔고 거의 모든 것에 대해 구현할 필요가있는 모든 것을 찾았습니다 (예 : 충돌 감지 후크 등). 여기에 내가 상자 또는 원 객체의 위치에 상자 또는 원 이미지를 통합하기 위해 쓴 코드 조각은 다음과 같습니다

if (myBallImage) 
    { 
    for (aBody = world.m_bodyList; aBody != null; aBody = aBody.m_next) 
     { 
     var jellyObject = aBody.GetUserData(); 
     if (typeof(jellyObject) != "object" || jellyObject == null) 
      continue; 

     var position = aBody.GetCenterPosition(); 
     var angle = aBody.GetRotation(); 
     var mass = aBody.GetMass(); 
     var halfheight = 0; 
     var halfwidth = 0; 

     for (aShape = aBody.GetShapeList(); aShape != null; aShape = aShape.m_next) 
      { 
      halfheight = aShape.GetHalfHeight(); 
      halfwidth = aShape.GetHalfWidth(); 
      } 

     ctx.save(); 
     ctx.translate(position.x, position.y); 
     ctx.rotate(angle); 
     ctx.translate(-halfwidth, -halfheight); // halfwidth, halfheight 

     if (jellyObject.shape == "MYBALL") 
      ctx.drawImage(myBallImage, 0, 0, halfwidth*2, halfheight*2); 
     else 
     if (jellyObject.shape == "MYBOX") 
      ctx.drawImage(myBoxImage, 0, 0, halfwidth*2, halfheight*2); 

     ctx.restore(); 
     } 
    } 
else 
    { 
    myBallImage = new Image(); 
    myBallImage.src = 'circle.gif'; 

    myBoxImage = new Image(); 
    myBoxImage.src = 'box.gif'; 
    }