Debug Drawの代わりにHTML5 Canvasを使用してBox2Dの世界を描画するにはどうすればよいですか？

Question

私は私が働いているなど、私はループを使用して基本とアニメーションを知って、かなりよく

デモをHTML5のキャンバスを知っている：（図形を作るためにクリック）http://henry.brown.name/experiments/box2d/example-canvas.html

私は非常に精通していないよ何Box2D。私はBox2DWebポートを使用していますが、Box2D-jsより新しいと聞きましたが、どちらが最善かはわかりません。

「ワールド」を初期化する方法はわかっており、オブジェクトを世界に配置できます。私はステップを使用して世界をアニメーション化しますが、これまで画面に表示するには、基本的にすべてのことを行うため、デバッグドローを使って作業することしかできませんでした。

デバッグドローを使用する代わりに、キャンバスを使用して、たとえば正方形ではなく車を描画したいと思います。車のイメージに四角形の物理学を取り付けるにはどうすればいいですか？私はちょうどBox2Dとキャンバスを統合することについて私の頭を得ることができません。

どのようなヒントも大いに評価されます！

おかげ

Answer 1

あなたはBOX2Dに精通していない場合、あなたはhttp://www.kyucon.com/doc/box2d/でドキュメントをチェックアウトする必要があります。これにより、必要なすべてのプロパティが表示されます。私の知る限り、Box2Dを使用する標準的な方法は、userDataを使って画像を添付することです。イメージとキャンバスイメージの使用法については、このチュートリアルのチュートリアルを参照してください。

http://www.jeremyhubble.com/box2d.html

Answer 2

私は、同じ質問がありました。 hereは、そのドキュメントです。 GetBodyList()、GetAngle()のような呼び出し、m_positionのような呼び出しを使用して、キャンバス上で使用するライブラリを使用してペイントする必要があるすべてを得ることができます。

Answer 3

私は同じことを試して最後の数日間過ごしました。

var b = world.GetBodyList() 

GetBodyList（）反復配列のようですので、次のボディは、Bを介してアクセスできます： 私はスーパーdetailledはありませんが、私は彼が身体の位置を取得する方法を見つけたコードを解析することにより、これ、Jonny Strömberg's tutorialを発見しました。 m_next。

その後、身体の座標を取得するために

b.GetPosition().x 
b.GetPosition().y 
b.GetAngle() 

を使用することができます。

EDIT：このコードは、私が良くBox2djs