手把手教你使用PhysicsEditor来辅助制作Box2D刚体



本篇教程需要读者对Box2D有了一些基本了解，如果过程中有什么概念不清楚，请参考Box2Dv2.3.0 用户指南中的相关章节进行学习。

我们知道，在利用Box2D引擎开发游戏的时候，对于规则的物体（刚体），比如圆形，矩形的物体，比较容易完成制作，但是对于稍微不规则的物体，例如不规则的多边形，甚至是具有弧线的图形，制作起来就相对比较棘手，当然如果你有足够的耐心，用b2PolygonShape一个一个顶点去测量和定义的话，也是能够完成的（甚至弧线图形也可以划分成近似的边界点），只不过可能耗时会比较长而已。

这篇文章我们就来学习如何使用PhysicsEditor（以下简称PE）来辅助我们方便地创建刚体。

首先我们来看一下PE的界面：

 

我们看到顶部一排菜单，前三个不用多说，第四个（Publish）和第五个（Publishas）按钮用来将我们制作完成的刚体信息输出成我们目标框架支持的导入格式，最后一个菜单（Add Sprites）用来添加刚体形状图片。

我们可以在右侧Parameter的Exporter下拉列表中选择我们的目标框架：

例如我们要在Box2D中使用，就选择“Box2Dgeneric(PLIST)”。

需要注意的一点是，我们在创建打开PE准备开始制作之前，一定要先选择好目标框架再动手，因为不同的框架参数列表中的选项、按钮和参数类型可能不同。

这里我们选择好框架（Box2Dgeneric(PLIST)），然后可以使用Add Sprites按钮来添加一些刚体的形状（或者我们可以将刚体的形状图片拖拽至左侧的Shapes列表中）。

下面我们用几张比较有代表性的图片来说明：

 

 

 

我们将这些图片添加到左侧的Shapes列表中：

添加好之后我们来看右侧Parameters一列中可以调节的参数。

首先是PTM-Ratio：

熟悉Box2D的应该知道Box2D中的基本长度单位为米，而设备的屏幕上长度基本单位为像素，PTM-Ratio就是二者的转换比例。

下面是图片参数：

图片参数中包括Filename，Filename右侧有两个按钮，一个是为当前刚体增加图片，一个是删除添加的图片，当我们需要制作动画的时候，刚体在不同帧具有不同的形状，这个时候我们可以将不同帧的形状添加进来，分别为每个形状创建碰撞多边形。Size是图片大小，下面的Pixel和Relative是刚体的锚点（anchorpoint）的位置，可以通过像素值指定，也可以通过百分比来指定（左侧的值是x值，右侧是y值）。

再下面的Fixtureparameters中包括了Fixture的密度，弹性，摩擦力等属性，包括我们可以指定Fixture是不是用作传感器，碰撞分组，碰撞标记（Categorybits和Maskbits），碰撞标记一列中左侧的Bit’sname用来方便我们用自己能够理解和记住的名字来命名碰撞标记。

下面我们来为刚体创建碰撞多边形，首先是圆形的网球，我们在左侧的列表中选中网球，然后点击中间部分上面的AddCircle（）按钮，我们看到，中间的画布上，网球的左下角有一个半透明的红色圆形区域：

我们拖拽红色圆形右边的白色小圆圈来调整圆形的半径，并且通过拖动红色圆形来调整其位置，使其恰好覆盖网球图片：

我们注意到，网球的左下角还有一个中间带有十字的紫色圆形，这个代表刚体的锚点位置，我们可以通过拖动这个圆形来修改锚点的位置，也可以通过右侧的Parameters中的参数来修改（前面介绍过的）。锚点的位置根据我们的游戏元素的需要进行设定。

接着我们来制作钟表的碰撞多边形。

我们在左侧列表中选择钟表图形，然后点击AddPolygon（）按钮，添加一个多边形：

在左下角出现了一个三角形的区域，我们在红色区域外的位置双击可以添加节点，在任意节点上双击可以删除该节点，我们对多边形进行修改得到下面的效果（如果觉得图片比较小不方便编辑，可以使用最下方的缩放工具进行放大）：

接着我们处理锤子形状，我们也可以通过AddPolygon按钮来创建，但是我们介绍一个更好用的工具，在Add Polygon旁边的像魔棒一样的工具Shape tracer（），点击之后，弹出下面的菜单：

我们可以看到，PE已经帮我们创建了一个大致的碰撞多边形，菜单中的Tolerance决定了取样的精确程度，这个值越高，精确度越差，生成的碰撞多边形的节点数也就越少，但是计算效率就越高。我们看到这里生成的多边形不理想，可以适当降低Tolerance的值。另外Alphathreshold决定了边缘的处理方式，我们留到处理心形图片的时候再去介绍。Animation phase和framemode用来针对同一个刚体的不同帧的形状进行设置。我们适当降低Tolerance后，点击确定的到下面的效果：

注意我们在确定之后仍然可以做手工调节，也就是相当于Shapetracer替我们做了一个粗略的形状，当然如果觉得满意，就不需要在调整了。

最后，我们来处理心形图案，依然是使用Shapetracer：

我们先将Alphathreshold设置为0，Tolerance设为1.20看下效果，发现实际生成的多边形比图形本身大了一圈，这是因为图形本身带有阴影，导致检测的时候也算作图形了，我们再将Alphathreshold设置为255（最大值），看到这回生成的多边形就正确了：

我们知道阴影的不透明度小于100%（或者说是Alpha通道小于255），因此我们设置Alphathreshold为255，就过滤掉了不透明度小于100%的区域，也就是阴影部分，这就是这个选项的原理。

好了，所有的碰撞多边形都制作完成了，如果需要，还可以为这些刚体设置密度，弹力，摩擦力，碰撞过滤标记等等（前面已经介绍过了），都完成后，我们点击Publish按钮，将结果导出成Box2D中支持的plist文件即可：

导出后的文件内容中可以看到我们设置的各种参数以及碰撞多边形的节点信息：

好了，关于PE的用法基本就是这些，如果有问题欢迎留言。