Cocos2dx 实现擦除 橡皮擦 刮奖 效果的实现

转载自 http://blog.csdn.net/dionysos_lai/article/details/39030081?utm_source=tuicool

原文章 参考 http://zengrong.net/post/2067.htm

橡皮擦具体功能要求：

1.实现擦除效果：具体要求是点击位置，拖动轨迹路上，均可以擦除。在快速拖动过程中，不能出现断层和锯齿现象。

2.擦除的形状，最好可以自定义。默认可以提供正方形、圆形两种，最好能提供自定义图片形状。

3.判断图片是否擦除完毕。

4.如果擦除形状过小，那么难免在擦除过程中，会遗留一些细小的、可能难以注意的残留点。在擦除过程中，要求可以自动擦除这些残留点。

功能分析：

1.擦除效果实现：

A.所谓“擦除”，就是将要擦除的图片RGB和alpha值，全部去掉。可以通过两张图片的混合实现。这里简单介绍OpenGL中的混合原理。

OpenGL中的混合，就是将原来的原色和将要画上去的颜色，经过“一些处理”，得到一种新的颜色，然后再次将得到的新颜色画到画布上。这里，我们将要画上去的颜色，称为“源颜色”，把原来的颜色称为“目标颜色”。

上文中的“一些处理”，实际是将源颜色和目标颜色各自取出，乘以一个因数（这里，对应的因数，我们称之为“源因子”和“目标因子”），然后二者相加（当然也可以不是相加，可以是相减、或者取二者最大值等等，新版的OpenGl可以设置运算方式），这样既可以得到一个新的颜色值。我们假设源颜色的四个分量（指红色，绿色，蓝色，alpha值）是(Rs,Gs,Bs,As)，目标颜色的四个分量是(Rd,Gd,Bd,Ad)，又设源因子为(Sr,Sg,Sb,Sa)，目标因子为(Dr,Dg,Db,Da)。则混合产生的新颜色可以表示为：

当然，如果某个分量，超过了最大值，会自动截取的。

源因子和目标因子是可以通过glBlendFunc函数来进行设置的。glBlendFunc有两个参数，前者表示源因子，后者表示目标因子。这两个参数可以是多种值，下面介绍比较常用的几种。

GL_ZERO： 表示使用0.0作为因子，实际上相当于不使用这种颜色参与混合运算。

GL_ONE： 表示使用1.0作为因子，实际上相当于完全的使用了这种颜色参与混合运算。

GL_SRC_ALPHA：表示使用源颜色的alpha值来作为因子。

GL_DST_ALPHA：表示使用目标颜色的alpha值来作为因子。

GL_ONE_MINUS_SRC_ALPHA：表示用1.0减去源颜色的alpha值来作为因子。GL_ONE_MINUS_DST_ALPHA：表示用1.0减去目标颜色的alpha值来作为因子。

利用OpenGl原理，如果我们将源颜色的颜色值设置为0，并源因子和目标因子分别设置为GL_OEN，GL_ZERO，则新颜色具体值如下所示：

注：这里的Rs、Gs、Bs、As均为0。

因此可以很方便的实现的擦除效果了。其详细代码如下所示：

如果是自定义的形状（这里我们的讨论的自定义形状，是图片提供的形状，而不是自己画出来的-----因为自己画出来的，跟前面没有区别）。这里对图片有比较特殊的要求，即要求图片中间形状是镂空的，外部的alpha通道必须为255。如下图所示：

(*^__^*) 嘻嘻……，这里是一张动物图片（这次是做有关动物绘本游戏），在其轮廓内部是镂空的，外部只要alpha最大即可。然后我们将源因子和目标因子分别设置为GL_ONE_MINUS_SRC_ALPHA、GL_SRC_ALPHA。

则新颜色如下表示:

在外部区域：GL_ONE_MINUS_SRC_ALPHA = 0; GL_SRC_ALPHA =1。则新颜色值如下所示：

还是原来的值。

在内部区域：GL_ONE_MINUS_SRC_ALPHA = 1; GL_SRC_ALPHA =0。则新颜色值如下所示：

可以看出，值全部为0。

具体代码如下所示：

CCSprite*drawSprite=CCSprite::createWithTexture(m_drawTextture);
1. drawSprite->setPosition(point);
2. ccBlendFuncblendFunc={GL_ONE_MINUS_SRC_ALPHA,GL_SRC_ALPHA};
3. drawSprite->setBlendFunc(blendFunc);
4. m_pRTex->begin();
5. drawSprite->visit();
6. m_pRTex->end();

B.利用动态纹理，实现纹理的变化。

使用擦除效果，纹理必然是发生动态变化的。这里采用CCRenderTexture实现动态纹理改变。对于CCRenderTexture的具体使用方法，可见引擎里描述语言：

To render things into it,simply construct arender target,call begin on it,call visit on any cocos scenes or objects torender them,and call end.

其实，就是下面一段话：

1. 创建一个新的CCRenderTexture.这里，你可以指定将要创建的纹理的宽度和高度。.
2. 调用CCRenderTexture:begin.这个方法会启动OpenGL，并且接下来，任何绘图的命令都会渲染到CCRenderTexture里面去，而不是画到屏幕上。
3. 绘制纹理.你可以使用原始的OpenGL调用来绘图，或者你也可以使用cocos2d对象里面已经定义好的visit方法。（这个visit方法就会调用一些opengl命令来绘制cocos2d对象）
4. 调用CCRenderTexture:end. 这个方法会渲染纹理，并且会关闭渲染至CCRenderTexture的通道。
5. 从生成的纹理中创建一个sprite.你现在可以用CCRenderTexture的sprite.texture属性来轻松创建新的精灵了

voidEraserSprite::ccTouchMoved(cocos2d::CCTouch*pTouch,cocos2d::CCEvent*pEvent)
1. {
2. if(m_bEraser)
3. CCPointpoint=pTouch->getLocation();
4. CCPointnormal=ccpNormalize(point-m_touchPoint);
6. ///处理一次移动过多，造成中间有遗漏，或者锯齿现象；
7. while(1)
8. if(ccpDistance(point,m_touchPoint)<1.f)
9. /*m_pEraser->setPosition(-this->getPosition()+point+spriteSize/2.f);*/
10. eraseByBlend(-this->getPosition()+point+spriteSize/2.f);
11. break;
12. }
13. m_touchPoint=m_touchPoint+normal*1.f;
14. /*m_pEraser->setPosition(-this->getPosition()+m_touchPoint+spriteSize/2.f);*/
15. this->getPosition()+m_touchPoint+spriteSize/2.f);
16. }
17. m_touchPoint=point;
18. }

2. 擦除形状

对于擦除形状，其实上文已经提到了。这里简单提一下。如果是采用点或者圆形，可以使用自定义画节点，即CCDrawNode实现。对于CCDrawNode的扩展使用，也可以用到CCClippingNode中，即实现自定义裁剪模板。下面给出正方形和圆形擦除形状代码：

正方形形状：

m_pEraser=CCDrawNode::create();
1. floatwidth=10.f;
2. m_pEraser->drawDot(CCPointZero,width,ccc4f(0,0));

圆形形状：

///绘制圆形区域
1. floatfRadius=30.0f;///<圆的半径
2. constintnCount=100;///<用正100边型来模拟园
3. floatcoef=2.0f*(float)M_PI/nCount;///<计算每两个相邻顶点与中心的夹角
4. staticCCPointcircle[nCount];///<顶点数组
5. for(unsignedinti=0;i<nCount;i++){
6. floatrads=i*coef;///<弧度
7. circle[i].x=fRadius*cosf(rads);///<对应顶点的x
8. circle[i].y=fRadius*sinf(rads);///<对应顶点的y
9. m_pEraser->drawPolygon(circle,nCount,0),0));//绘制这个多边形!

对于自定义的图片形状，其实就是一个精灵对象而已。

3. 判断图片是否擦除完毕

判断是否擦除完毕，基本思路就是对纹理像素值逐点判断，当所有像素值均为0时，则代表图片已经擦除完毕了。

首先，获取纹理的图片信息。关键函数是newCCImage。具体代码如下：

CCImage*image=newCCImage();
1. m_pRTex->newCCImage(true);

这里要注意一点就是，最后要手动删除image。

其次，获取各个位置的像素值。代码如下所示：

unsignedchar*pixel=data_+(x+y*image->getWidth())*m;
1. //Youcansee/changepixels'RGBAvalue(0-255)here!
2. unsignedintr=(unsignedint)*pixel;
3. unsignedintg=(unsignedint)*(pixel+1);
4. intb=(unsignedint)*(pixel+2);
5. inta=(unsignedint)*(pixel+3);

其中，x、y代表位置。

完整代码如下所示：

boolEraserSprite::getEraserOk()
1. m_bEraserOk=false;
2. CCImage*image= image=m_pRTex->newCCImage(true);
3. intm=3;
4. if(image->hasAlpha())
5. m=4;
6. char*data_=image->getData();
7. intx=0,y=0;
8. ///这里要一点，即Opengl下，其中心点坐标在左上角
9. for(x=0;x<spriteSize.width;++x)
10. for(y=0;y<spriteSize.height;++y)
11. char*pixel=data_+(x+y*image->getWidth())*m;
12. //Youcansee/changepixels'RGBAvalue(0-255)here!
13. int)*pixel;
14. int)*(pixel+1);
15. int)*(pixel+2);
16. int)*(pixel+3);
17. if(r!=0&&g!=0&&b!=0&&a!=0)
18. {
19. m_bEraserOk=false;
20. if(spriteSize.height!=y)
21. break;
22. if(x==spriteSize.width&&y==spriteSize.height)
23. true;
24. deleteimage;
25. returnthis->m_bEraserOk;
26. }

这里，参考了文章：《Getting andsetting the RGB / RGBA value of a pixel in a CCSprite (cocos2d-x)》，详细地址：http://stackoverflow.com/questions/9665700/getting-and-setting-the-rgb-rgba-value-of-a-pixel-in-a-ccsprite-cocos2d-x

好囧啊，这个部分，花了我整整一个上午时间，没想到就这样的过去，一点都没有前面高大善的赶脚。

4. 残留点清除问题

对于这个问题，还没有很好的思路

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!