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

Question

我非常了解 HTML5 Canvas ，我了解使用循环等的基础知识和动画。

我正在使用的演示:(单击以制作形状)http://henry.brown.name/experiments/box2d/example-canvas.html

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

我知道如何初始化“世界”并且我可以在世界中放置对象。然后，我使用 Step 为世界设置动画 - 但是到目前为止，为了在屏幕上显示它，我只能使用 debug draw 来让它工作，因为它基本上会为你做所有事情。

我不想使用调试绘图，而是使用 Canvas 来绘制，例如一辆汽车，而不仅仅是一个正方形。如何将正方形的物理特性附加到汽车的图像上？我只是无法理解如何将 canvas 与 Box2D 集成。

任何提示将不胜感激!

谢谢

Answer 1

过去几天我一直在尝试同样的事情。 我找到了 Jonny Strömberg's tutorial ，这不是很详细，但通过分析代码，我发现他是如何检索 body 位置的:

var b = world.GetBodyList()

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

然后你可以使用

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

检索 body 的坐标。

编辑:此代码用于 Box2dweb 库，我发现它的文档比 Box2djs 更好