如何使用HTML5 Canvas而不是Debug Draw绘制我的Box2D世界？

Question

我非常了解HTML5画布,我知道使用循环等的基础知识和动画.

我不太熟悉的是Box2D.我正在使用Box2DWeb端口,我听说它比Box2D-js更新,我不确定哪个最好.

我知道如何初始化'世界',我可以在世界上放置物体.然后我使用Step来动画世界 - 但是到目前为止,我只能在屏幕上显示它,因为它基本上可以为您完成所有操作.

而不是使用调试绘图我想使用画布绘制,例如汽车而不是仅仅是一个正方形.如何将正方形的物理特性附加到汽车图像上？我只是不知道如何将画布与Box2D整合在一起.

任何提示都将受到大力赞赏!

谢谢

Answer 1

我花了最后几天尝试同样的事情.我找到了JonnyStrömberg的教程,这个教程不是超级详细的,但通过分析代码,我发现他如何检索身体的位置:

var b = world.GetBodyList()

GetBodyList()似乎是一个迭代数组,因此可以通过b.m_next访问下一个主体.

然后你可以使用

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

检索身体的坐标.

编辑:此代码适用于Box2dweb库,我发现它比Box2djs更好

Answer 2

如果您不熟悉 Box2D，您应该查看http://www.kyucon.com/doc/box2d/上的文档。这应该告诉您所需的所有属性。据我所知，使用 Box2D 的标准方法是使用 userData 附加图像。有关图像和 Canvas 图像的使用，请参阅此示例教程。