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 会在更新函数中清除它自己的 canvas，所以你需要在它上面放另一个调试 canvas，用于 DebugDraw。

This example helped me to add debug draw to my box2d sandbox successfully

add this code to update function

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 use a different coordinate frame than cocos, so you need to do transform 180 degrees. add this to the style of debug canvas

-webkit-transform:rotate(180deg); //and some other browsers' style

Box2D Cocos2d JS

Box2D Cocos2d JS

cocos2d-js

box2dweb

convex-polygon