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

修正效果以下