Box2D Cocos2d JS答案

【问题标题】：Box2D Cocos2d JSBox2D Cocos2d JS
【发布时间】：2016-05-02 07:24:33
【问题描述】：

我想在 Box2D Cocos2d JS 中创建一个斜坡，如附图所示。但是，将精灵附加到它时，我无法正确创建它。我的代码是：

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

图像尺寸为 200 * 50，worldScale = 30。

【问题讨论】：

您好，您使用的是哪个版本的 Cocos2D-JS？
您好，我使用的是 3.7 版本。

标签： cocos2d-js box2dweb convex-polygon

【解决方案1】：

首先，我看到您使用的是负坐标 (-50)。 Cocos2d-JS（默认视口）中的所有内容都是正数（{0,0} 是左下角）。

要调试坡度定位，我建议您首先使用 Box2d DebugDraw，查看您描述的实际坡度，然后根据这些线框放置您的精灵。 Cocos2d-JS 会在更新函数中清除它自己的画布，所以你需要在它上面放另一个调试画布，用于 DebugDraw。

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

添加此代码以更新功能

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); //和其他一些浏览器的风格

【讨论】：