3、cocos2d-x学习笔记——2d简易破碎效果

概述broken.png 破碎效果，也就是把纹理粉碎成一小块一小块的。在实现这个效果前，我们需要知道cocos2d-x是怎么渲染的。众所周知，cocos2d-x使用的是opengl es，而sprite使用的是opengl es里面的三角形图元渲染的，也就是说，我们平常看到的sprite是通过两个三角形渲染出来的。我们来看看sprite的draw函数 在这个函数中

                   broken.png       破碎效果，也就是把纹理粉碎成一小块一小块的。在实现这个效果前，我们需要知道cocos2d-x是怎么渲染的。众所周知，cocos2d-x使用的是opengl es，而sprite使用的是opengl es里面的三角形图元渲染的，也就是说，我们平常看到的sprite是通过两个三角形渲染出来的。我们来看看sprite的draw函数    
在这个函数中，我们可以看到，在sprite中，控制渲染三角形图元的参数是_polyInfo的成员变量是triangle，也就是说，我们只要修改这个参数就可以达到破碎效果。现在知道了修改哪个参数，接下来，需要知道如何修改。这里提供一个非常简单的算法。一块纹理是四边形，我们在这块四边形里面随机生成一个点，和四个顶点连接成四个三角形。然后在这个四边形里面再次随机生成一个点，判断这个点在哪个三角形里面。再和这个三角形里面的三个顶点相连，这个三角形就碎成了另外三个三角形，就这样一直碎下去，现在全部碎裂成三角形了，接下来，要让三角形分开，这样才会有间隙，才算是碎裂。这里计算每个三角形的重心，然后按一定比例远离。这个算法缺点就是随机性太高，最后生成的三角形会比较丑。不知道有没有大神有更好的算法。判断点在三角内的方法不知道的可以参考一下    http://www.cnblogs.com/graphics/archive/2010/08/05/1793393.html。本文用的是第二种方法，同向法，也就是计算向量的点积来判断。    
最后要提出的是纹理坐标，也就是triangle里面的texCoords参数。通常纹理坐标的取值范围是在0到1之间的。超出范围的显示方式有三种，这里就不做介绍了。最后，代码里面还附带了破碎后远去的动作类，大家可以试试。有任何疑问，欢迎大家来讨论。下载地址：    https://pan.baidu.com/s/1bpFZuSB  

查看原文：http://www.51xyyx.com/3173.htmlvoID Sprite::draw(Renderer *renderer,const Mat4 &transform,uint32_t flags){    ......    _trianglesCommand.init(_globalZOrder,_texture->getname(),getGLProgramState(),_blendFunc,_polyInfo.triangles,transform,flags);    ......}//判断点p在三角形abc内    if ((ab.x*bc.y-ab.y*bc.x) * (pb.x*bc.y-pb.y*bc.x) > 0 &&       (bc.x*ca.y-bc.y*ca.x) * (pc.x*ca.y-pc.y*ca.x) > 0 &&       (ca.x*ab.y-ca.y*ab.x) * (pa.x*ab.y-pa.y*ab.x) > 0 )

总结

以上是内存溢出为你收集整理的3、cocos2d-x学习笔记——2d简易破碎效果全部内容，希望文章能够帮你解决3、cocos2d-x学习笔记——2d简易破碎效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。