游戏效果解密----水果忍者刀划痕效果

============================================================博文原创，转载请声明出处电子咖啡(原id蓝岩)============================================================闲来无事，开始研究opengl在cocos2d中图像渲染时候的底层用法，及除了CCScene,CCSprint普通接口以外，底层opengl图形纹理渲染部分的代码。github有不少很棒的demo，拿过来研究一下。在这里感谢开源社区的所有贡献者。

水果忍者刀划痕效果，github地址：https://github.com/hiepnd/CCBlade

该例子主要用一下两个文件：
CCBlade.m//划痕效果的顶点存储，opengl的渲染
TouchTrailLayer.m //继承CCLayer，接收touch的begin、end点，传递给CCBlade，进行动画显示
下面主要介绍CCBlade。由于代码较多，难度不一，因此我将我的理解注释和测试代码写入了文件中，你可以直接阅读代码，里面关键的地方我已经写上了注释。有助于理解，当然，我的理解肯定有错误，还请多多指正，共同进步。
效果图：


CCBlade.h
#import <Foundation/Foundation.h>
#import "cocos2d.h"

#define USE_STL_LIST 0

inline float fangle(CGPoint vect);
inline float lagrange1(CGPoint p1, CGPoint p2, float x);

inline void CGPointSet(CGPoint *v, float x, float y);
inline void f1(CGPoint p1, CGPoint p2, float d, CGPoint *o1, CGPoint *o2);

@interface CCBlade : CCNode {
//轨迹所有点array
NSMutableArray *path;
unsigned int pointLimit;
int count;
//opengl中存储vertices & coordinate数组
CGPoint *vertices;
CGPoint *coordinates;
BOOL reset;
CCTexture2D *_texture;
float width;
BOOL _finish;
BOOL _willPop;
}
@property (readonly)unsigned int pointLimit;
@property(retain) CCTexture2D *texture;
@property(nonatomic) float width;
@property (nonatomic, assign) BOOL autoDim;

+ (id) bladeWithMaximumPoint:(int) limit;
- (id) initWithMaximumPoint:(int) limit;
- (void) push:(CGPoint) v;
- (void) pop:(int) n;
- (void) clear;
- (void) reset;
- (void) dim:(BOOL) dim;
- (void) finish;
@end


CCBlade.m
#import "CCBlade.h"

//计算旋转角度
inline float fangle(CGPoint vect){
//相同，不旋转
if (vect.x == 0.0 && vect.y == 0.0) {
return 0;
}
//y不同，旋转90度
if (vect.x == 0.0) {
return vect.y > 0 ? M_PI/2 : -M_PI/2;
}
//x逆向
if (vect.y == 0.0 && vect.x < 0) {
return -M_PI;
}
//出去上面的特殊情况，剩下的atan计算角度
float angle = atan(vect.y / vect.x);

return vect.x < 0 ? angle + M_PI : angle;
}

//p1,p2 原点
//o1,o2 目标点
//d 宽度
inline void f1(CGPoint p1, CGPoint p2, float d, CGPoint *o1, CGPoint *o2){
float l = ccpDistance(p1, p2);
//计算转角角度
float angle = fangle(ccpSub(p2, p1));
//将p1点的width两端进行旋转
//这里只取p1，是因为下一次p2会迭代为p1进行计算
*o1 = ccpRotateByAngle(ccp(p1.x + l,p1.y + d), p1, angle);
*o2 = ccpRotateByAngle(ccp(p1.x + l,p1.y - d), p1, angle);
}

inline float lagrange1(CGPoint p1, CGPoint p2, float x){
return (x-p1.x)/(p2.x - p1.x)*p2.y + (x-p2.x)/(p1.x - p2.x)*p1.y ;
}

inline void CGPointSet(CGPoint *v, float x, float y){
v->x = x;
v->y = y;
}

@implementation CCBlade
@synthesize texture = _texture;
@synthesize pointLimit;
@synthesize width;
@synthesize autoDim;

+ (id) bladeWithMaximumPoint:(int) limit{
return [[[self alloc] initWithMaximumPoint:limit] autorelease];
}

- (id) initWithMaximumPoint:(int) limit{
self = [super init];

pointLimit = limit;
self.width = 5;

vertices = (CGPoint *)calloc(2*limit+5, sizeof(vertices[0]));
coordinates = (CGPoint *)calloc(2*limit+5, sizeof(coordinates[0]));

CGPointSet(coordinates+0, 0.00, 0.5);
reset = NO;

path = [[NSMutableArray alloc] init];

return self;
}

- (void) dealloc{
[_texture release];
free(vertices);
free(coordinates);

[path release];
[super dealloc];
}

//move (populater) vertices
- (void) populateVertices{
vertices[0] = [[path objectAtIndex:0] CGPointValue];
//get the header point ,then iterate it
CGPoint pre = vertices[0];

unsigned int i = 0;

/**
glTexCoordPointer(2, GL_FLOAT, 0, coordinates);
glVertexPointer(2, GL_FLOAT, 0, vertices);
*/

//get second point ,then iterate it
CGPoint it = [[path objectAtIndex:1] CGPointValue];
float dd = width / [path count];
//as "pre"&"it" cost 2 item ,so "while" is "n-2"
// printf("%s:%d sizeof CGPoing:%ld\n",__FUNCTION__,__LINE__,sizeof(CGPoint));
while (i < [path count] - 2){
//change the width (height) of the blade
//"width - i * dd",dd不变 i 越大，越宽
f1(pre, it, width - i * dd , vertices+2*i+1, vertices+2*i+2);
// f1(pre, it, 7, vertices+2*i+1, vertices+2*i+2);
//all coordinates are same value , never change value
CGPointSet(coordinates+2*i+1, .5, 1.0);
CGPointSet(coordinates+2*i+2, .5, 0.0);

i++;
pre = it;

it = [[path objectAtIndex:i+1] CGPointValue];
}

CGPointSet(coordinates+1, 0.25, 1.0);
CGPointSet(coordinates+2, 0.25, 0.0);

vertices[2*[path count]-3] = it;
CGPointSet(coordinates+2*[path count]-3, 0.75, 0.5);
}
//移动点坐标，未用
- (void) shift{
int index = 2 * pointLimit - 1;
for (int i = index; i > 3; i -= 2) {
vertices[i] = vertices[i-2];
vertices[i-1] = vertices[i-3];
}
}

- (void) setWidth:(float)width_{
width = width_ * CC_CONTENT_SCALE_FACTOR();
}

#define DISTANCE_TO_INTERPOLATE 10 //允许的线条最大长度

//insert a point at the header of the path
- (void) push:(CGPoint) v{
_willPop = NO;

if (reset) {
return;
}
//retina screen
if (CC_CONTENT_SCALE_FACTOR() != 1.0f) {
v = ccpMult(v, CC_CONTENT_SCALE_FACTOR());
}

if ([path count] == 0) {
[path insertObject:[NSValue valueWithCGPoint:v] atIndex:0];
return;
}

CGPoint first = [[path objectAtIndex:0] CGPointValue];
if (ccpDistance(v, first) < DISTANCE_TO_INTERPOLATE) {
//如果小于最大长度，则insert at the header
[path insertObject:[NSValue valueWithCGPoint:v] atIndex:0];
if ([path count] > pointLimit) {
[path removeLastObject];
}
}else{
//移除最后的vertices
int num = ccpDistance(v, first) / DISTANCE_TO_INTERPOLATE;
CGPoint iv = ccpMult(ccpSub(v, first), (float)1./(num + 1));
for (int i = 1; i <= num + 1; i++) {
[path insertObject:[NSValue valueWithCGPoint:ccpAdd(first, ccpMult(iv, i))] atIndex:0];
}
while ([path count] > pointLimit) {
[path removeLastObject];
}
}

[self populateVertices];
}
//移除最后点
- (void) pop:(int) n{
while ([path count] > 0 && n > 0) {
[path removeLastObject];
n--;
}

if ([path count] > 2) {
[self populateVertices];
}
}

- (void) clear{
[path removeAllObjects];
reset = NO;
if (_finish)
[self removeFromParentAndCleanup:YES];
}

- (void) reset{
reset = TRUE;
}

- (void) dim:(BOOL) dim{
reset = dim;
}

- (void) draw{
if ((reset && [path count] > 0) || (self.autoDim && _willPop)) {
[self pop:1];
if ([path count] < 3) {
[self clear];
}
}

if ([path count] < 3) {
return;
}

_willPop = YES;

glDisableClientState(GL_COLOR_ARRAY);
NSAssert(_texture, @"NO TEXTURE SET");

/**
f1(pre, it, width - i * dd , vertices+2*i+1, vertices+2*i+2);
// f1(pre, it, 7, vertices+2*i+1, vertices+2*i+2);
//all coordinates are same value , never change value
CGPointSet(coordinates+2*i+1, .5, 1.0);
CGPointSet(coordinates+2*i+2, .5, 0.0);
*/

glBindTexture(GL_TEXTURE_2D, _texture.name);
// glVertexPointer(2, GL_FLOAT, 0, vertices);
glTexCoordPointer(2, GL_FLOAT, 0, coordinates);
glVertexPointer(2, GL_FLOAT, 0, vertices);
// glTexCoordPointer(2, GL_FLOAT, 0, vertices);
// glVertexPointer(2, GL_FLOAT, 0, coordinates);

glDrawArrays(GL_TRIANGLE_STRIP, 0, 2*[path count]-2);
//不是blade，是fans
// glDrawArrays(GL_TRIANGLE_FAN, 0, 2*[path count]-2);
glEnableClientState(GL_COLOR_ARRAY);
}

- (void) finish
{
_finish = YES;
}