Box2djs、JS物理エンジン - ボールオブジェクトの背景イメージを設定しますか？

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'; 
    }