前端之家收集整理的这篇文章主要介绍了
3、cocos2d-x学习笔记——2d简易破碎效果,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
破碎
效果,也就是把纹理粉碎成一小块一小块的。在实现这个
效果前,我们需要知道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 )