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

broken.png

破碎效果，也就是把纹理粉碎成一小块一小块的。在实现这个效果前，我们需要知道cocos2d-x是怎么渲染的。

众所周知，cocos2d-x使用的是opengl es，而sprite使用的是opengl es里面的三角形图元渲染的，也就是说，我们平常看到的sprite是通过两个三角形渲染出来的。

我们来看看sprite的draw函数

void Sprite::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
{
    ......
    _trianglesCommand.init(_globalZOrder, _texture->getName(), getGLProgramState(), _blendFunc, _polyInfo.triangles, transform, flags);
    ......
}

在这个函数中，我们可以看到，在sprite中，控制渲染三角形图元的参数是_polyInfo的成员变量是triangle，也就是说，我们只要修改这个参数就可以达到破碎效果。

现在知道了修改哪个参数，接下来，需要知道如何修改。

这里提供一个非常简单的算法。

一块纹理是四边形，我们在这块四边形里面随机生成一个点，和四个顶点连接成四个三角形。然后在这个四边形里面再次随机生成一个点，判断这个点在哪个三角形里面。再和这个三角形里面的三个顶点相连，这个三角形就碎成了另外三个三角形，就这样一直碎下去，现在全部碎裂成三角形了，接下来，要让三角形分开，这样才会有间隙，才算是碎裂。这里计算每个三角形的重心，然后按一定比例远离。这个算法缺点就是随机性太高，最后生成的三角形会比较丑。不知道有没有大神有更好的算法。

判断点在三角内的方法不知道的可以参考一下http://www.cnblogs.com/graphics/archive/2010/08/05/1793393.html 。本文用的是第二种方法，同向法，也就是计算向量的点积来判断。

    //判断点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 )

最后要提出的是纹理坐标，也就是triangle里面的texCoords参数。通常纹理坐标的取值范围是在0到1之间的。超出范围的显示方式有三种，这里就不做介绍了。

最后，代码里面还附带了破碎后远去的动作类，大家可以试试。

有任何疑问，欢迎大家来讨论。

下载地址：https://pan.baidu.com/s/1bpFZuSB