cocos2d-js - Box2D Cocos2d JS

Question

Box2D Cocos2d JS で添付画像のような斜面を作りたいです。ただし、スプライトをアタッチすると正しく作成できません。私のコードは次のとおりです。

new b2Vec2(0, 0),
new b2Vec2(100 / worldScale, -50 / worldScale),
new b2Vec2(200 / worldScale, 0 / worldScale)

画像のサイズは 200 * 50 で、worldScale = 30 です。

Answer 1

まず、負の座標 (-50) を使用していることがわかります。Cocos2d-JS (デフォルトのビューポート) のすべてが正です ({0,0} は左下のポイントです)。

スロープの配置をデバッグするには、最初に Box2d DebugDrawを使用して、記述した実際のスロープを確認し、それらのワイヤフレームに基づいてスプライトを配置することをお勧めします。Cocos2d-JS は update 関数で独自のキャンバスをクリアするので、DebugDraw のために、別のデバッグ キャンバスをその上に置く必要があります。

この例は、デバッグ描画を box2d サンドボックスに正常に追加するのに役立ちました

このコードを追加して関数を更新します

var debugDraw = new Box2D.Dynamics.b2DebugDraw();
debugDraw.SetSprite(document.getElementById("test").getContext("2d"));
// test is the id of another canvas which debugdraw works on
debugDraw.SetDrawScale(30.0); 
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit |
Box2D.Dynamics.b2DebugDraw.e_jointBit);
this.world.SetDebugDraw(debugDraw); this.world.DrawDebugData();

box2d は cocos とは異なる座標フレームを使用するため、180 度変換する必要があります。これをデバッグキャンバスのスタイルに追加します

-webkit-transform:rotate(180deg); //および他のブラウザのスタイル