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

前端之家收集整理的这篇文章主要介绍了3、cocos2d-x学习笔记——2d简易破碎效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
 
 
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在三角形abcif ((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 )

猜你在找的Cocos2d-x相关文章