Cocos2DX笔记----------使用opengl实现水果忍者刀刃轨迹

最近有个小需求，需要实现水果忍者刀刃的效果，网上找了很多实例代码，查了很多资料，终于捣鼓了出来。

效果图如下：

图1：

 

图2：

 

该算法还是比较简单的，先说说流程：

【收集轨迹点】主要是使用了cocos2dX中的ccTouchesBegan和ccTouchesMoved

ccTouchesBegan里面包含了刷新最近轨迹点的功能

ccTouchesMoved里面包含了添加轨迹点的功能

此时需要一个数组用于记录轨迹的ccpoint，我将它命名为mPointArray，用于存储这些轨迹点。每次手指按下时，就添加此时触摸点的位置作为下次计算渲染的开始，那么就要将它设置到

mPointArray的最后一位。然后通过ccTouchesMoved获取到相关的点，以此往前添加到mPointArray中。一般来说16个点就足够了。

 

【计算轨迹点】这个是算法的核心部分(对照了相关的demo的代码，发现类似做法，即构建多边形)，其实轨迹是遵循了这样的形状：

 

其中三角形ABC(F)并不是必须的，因为它是用于轨迹的头部，作为一种修饰效果。重点还是A,C,D,E,F,G构成的四边形，根据opengl顶点渲染规则，我们需要4个三角形，即12个顶点，因此可以将这些顶点分割，注意，这个多边形是对称的，因此算法不会太复杂。

这些顶点可以被分割成中间顶点数组，顶部顶点数组以及底部顶点数组，核心的算法如下

CCPoint* p=mPointArray;

//中间顶点数组
CCPoint* centerVertex=new CCPoint[mIndex];
memcpy(centerVertex,p,sizeof(CCPoint)*mIndex);

//顶部顶点数组

CCPoint pt1=ccpSub(p[i],p[i-1]);
float angle1=ccpToAngle(pt1);
topVertex[count1].x =sinf(angle1) * w + p[i].x;
topVertex[count1].y =cosf(angle1) * w + p[i].y;

//底部顶点数组

CCPoint pt2=ccpSub(p[i],p[i-1]);

float angle2=ccpToAngle(pt2);

bottomVertex[count2].x =sinf(angle2) * w + p[i].x;
bottomVertex[count2].y =cosf(angle2) * -w + p[i].y;

 

 

然后在算法的尾部，需要对这些顶点进行排列（用于渲染三角形）和颜色填充。

另外需要知道的是opengl的渲染顶点的顺序是逆时针，顺时针顺序是剔除。 

 

渲染就很简单了，都是固定的语法，所以就和源代码一起放上吧。

http://pan.baidu.com/s/1mg1F9lY

密码ozk7

 

-------------------------------------

更正一下，原来的效果发现缺少了一个三角形，估计是点的位置不正确造成的，回去看了一下，果然如此，因此重新放上代码

http://pan.baidu.com/s/1jGrAvAm

密码v21e

修正效果如下