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

修正效果以下