Cocos2d-x 3.0的新物理系统我就不必多说了,接触一段时间,感觉还是不错的。对于那些基本概念,网上的教程已经泛滥了,就不多说了,不过对于创建多边形物体的教程,还真不多,很多都是创建圆形和矩形,这两个很简单,传入图片的大小数据基本就可以搞定了。多边形的麻烦之处在于每个点的位置,Mac下有VertexHelper可以很轻松获取到多边形的每个点,然后创建出来,但Windows下,呃,确实我没找到什么好的工具,PhysicsEditor在以前使用Box2d原生的代码创建多边形还是挺好用的,现在就不太适合了,所以本篇的用法也是建立在它的之上做出来的,如果有好的办法,欢迎提出分享哈。
话不多说,看看如何利用PhysicsEditor来创建一个多边形。
打开PhysicsEditor,导入一张多边形,姑且咱们先拿个三角形开刀说,导入图片之后,选择上方的add polygon
<img src="http://www.2cto.com/uploadfile/Collfiles/20140823/201408230920218.png" alt="" http:="" www.2cto.com="" kf="" ware="" vc="" "="" target="_blank" class="keylink" style="box-sizing: border-box; border: medium none; vertical-align: middle; display: block; margin: 0px auto; max-width: 100%; width: 2090.67px; height: auto;">vcfQzsf40/LArbP2wLSjrM/x1eLR+aOsPC9wPgo8cD48aW1nIHNyYz0="http://www.2cto.com/uploadfile/Collfiles/20140823/2014082309202110.png" alt="\">
这样多边形的几个点位置就算完成了,下面的步骤很关键,
在右边Exporter选择“Chipmunk generic”,因为cocos封装的多边形顶点是按照顺时针的方向来的,和box2d不一样,box2d是反方向的。
当你选择之后,会看到图中多了一个点,那个是锚点的位置,所以接下来是设置锚点的位置,新版的物理系统在setPhysicsBody的时候是将Body绑定在图片的中心点位置,所以我们在PhysicsEditor中绘制的Body区域也需要将锚点设置在中心点,不然回过头在创建Body的时候还要设置偏移量offset。
如下图,将关键的地方设置成(0.5, 0.5)就可以了。
接下来,保存一下这个文件,是一个plist格式的,用个Notepad++打开下,找到下面有个点数组的位置,
我们就是需要这一组点数据,我想后面的事大家应该就很清楚了,打开VS,创建一个多边形咯。
auto triangle = Sprite::create("CyanTriangle.png"); triangle->setPosition(Point(size.width/2, size.height*0.8)); Point points[3] = { Point(-50.00000, -43.50000), Point(0.00000, 43.50000), Point(51.00000, -43.50000) }; auto polygonBody = PhysicsBody::createPolygon(points, 3); triangle->setPhysicsBody(polygonBody); addChild(triangle);
PhysicsBody::createPolygon的参数第一个是点数组,第二个是数组的大小,也就是边的个数。
运行看一下效果,
由于打开了debug模式,所以红色的区域非常贴切,可以用啦。
当然咯,PhysicsEditor也可以做凹多边形的,不过这个步骤要麻烦不少,但过程基本一样,简单过一遍,
拿个logo图片做一下,可以右键添加点哦,然后简单拉出这样的效果。然后还是保存我们的plist文件。
对于凹多边形,我们的策略基本就是采用addShape的方式,将其分割成多个凸多边形,然后组合在一起,他们的碰撞区域是组合起来的,所以没问题。
这个时候打开plist文件,可以看到是这样的点数组,
它的策略也是这样的,所以符合我们的要求,只是这么多点,咱们要一个一个添加,确实略显麻烦,没办法,继续来吧。。。。
一个数组点创建一个多边形Shape,所以代码是这样的。
auto logo = Sprite::create("powered.png"); auto logoBody = PhysicsBody::create(); Point vert1[4] = { Point(1.00000, 134.50000), Point(24.00000, 111.50000), Point(-16.00000, 126.50000), Point(-22.00000, 149.50000) }; logoBody->addShape(PhysicsShapePolygon::create(vert1, 4)); Point vert2[4] = { Point(-100.00000, -149.50000), Point(24.00000, 111.50000), Point(101.00000, 111.50000), Point(101.00000, -149.50000) }; logoBody->addShape(PhysicsShapePolygon::create(vert2, 4)); Point vert3[4] = { Point(24.00000, 111.50000), Point(-100.00000, -149.50000), Point(-32.00000, 112.50000), Point(-16.00000, 126.50000) }; logoBody->addShape(PhysicsShapePolygon::create(vert3, 4)); Point vert4[3] = { Point(-32.00000, 112.50000), Point(-100.00000, -149.50000), Point(-100.00000, 112.50000) }; logoBody->addShape(PhysicsShapePolygon::create(vert4, 3)); logo->setPhysicsBody(logoBody); logo->setPosition(Point(size.width*0.8, size.height*0.7)); addChild(logo); logo->setRotation(180);
好了,这样就可以了,我还旋转了一下,为了测试一下上面那一撮头发的碰撞区域,哈哈~