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 将在更新函数中清除它自己的画布，因此您需要在其上放置另一个调试画布，用于 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); //和其他一些浏览器的样式