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。

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

[cpp]  view plain copy

1.        m_pEraser->setPosition(point);  
2. ccBlendFunc blendFunc = { GL_ONE, GL_ZERO };    ///< 设置混合模式, 源---1， 目标---0  
3. m_pEraser->setBlendFunc(blendFunc);  
4. m_pRTex->begin();  
5. m_pEraser->visit();  
6.        m_pRTex->end();  

 

         如果是自定义的形状（这里我们的讨论的自定义形状，是图片提供的形状，而不是自己画出来的-----因为自己画出来的，跟前面没有区别）。这里对图片有比较特殊的要求，即要求图片中间形状是镂空的，外部的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。

         具体代码如下所示：

[cpp]  view plain copy

1.        CCSprite* drawSprite = CCSprite::createWithTexture(m_drawTextture);  
2. drawSprite->setPosition(point);  
3. ccBlendFunc blendFunc = { GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA };   ///< 设置混合模式, 源---1-alpha， 目标---alpha  
4. drawSprite->setBlendFunc(blendFunc);  
5. m_pRTex->begin();  
6. drawSprite->visit();  
7. 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属性来轻松创建新的精灵了

         这里，引用的是子龙山人博文《 （译）如何使用CCRenderTexture来创建动态纹理》，具体博文，详见地址： http://www.cnblogs.com/andyque/archive/2011/07/01/2095479.html。博文中，详细介绍了CCRenderTexture的动态纹理创建方法。下面给出如何将一个精灵纹理添加进CCRenderTexture中：

[cpp]  view plain copy

1.          CCSprite* sprite = CCSprite::create(pszFileName);  
2.     spriteSize = sprite->getContentSize();  
3.     /// 将精灵加入纹理后，其中心点坐标应该设置在（0,0）处， 这是由于纹理的中心点在（0,0），当然，可以通过设置其偏移坐标实现；  
4.     sprite->setAnchorPoint(ccp(0.f, 0.f));  
5. //  sprite->setPosition(ccp(spriteSize.width/2.f, spriteSize.height/2.f));  
6.   
7.     m_pRTex = CCRenderTexture::create(spriteSize.width, spriteSize.height);  
8.     m_pRTex->setPosition(CCPointZero);  
9.     this->addChild(m_pRTex);  
10.   
11.     m_pRTex->begin();  
12.     sprite->visit();  
13.     m_pRTex->end();  

C.     避免出现断层和锯齿现象

         之所以出现断层和锯齿的原因，是由于在快速擦除过程中，系统接收到的第一个点位置和第二个点位置，可能有很大的位移偏差。如果只是简单的处理这两个点的信息，显而亦然中间很多点就会缺失，而不画。因此就出现了断层和锯齿的现象。

         因此，我们只要简单的判断两点之间的距离是否超过一定程度，就在二者间再次处理。至于二者间，要抽取多少点进行处理，就要看其距离的长度了。这边，我简单的判断距离超过1，就要处理（显然这样做，会比较准确，但消耗性能大，可以适当更改）。下面给出具体代码：

[cpp]  view plain copy

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

2.        擦除形状

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

         正方形形状：

[cpp]  view plain copy

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

         圆形形状：

[cpp]  view plain copy

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

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

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

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

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

[cpp]  view plain copy

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

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

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

[cpp]  view plain copy

1. unsigned char *pixel = data_ + (x + y * image->getWidth()) * m;  
2.   
3. // You can see/change pixels' RGBA value(0-255) here !  
4. unsigned int r = (unsigned int)*pixel;  
5. unsigned int g = (unsigned int)*(pixel + 1);  
6. unsigned int b = (unsigned int)*(pixel + 2) ;  
7.        unsigned int a = (unsigned int)*(pixel + 3);  

         其中，x、y代表位置。

 

         完整代码如下所示：

[cpp]  view plain copy

1. bool EraserSprite::getEraserOk()  
2. {  
3.     m_bEraserOk = false;  
4.   
5.     CCImage* image = new CCImage();  
6.     image = m_pRTex->newCCImage(true);  
7.   
8.     int m = 3;  
9.     if (image->hasAlpha())  
10.     {  
11.         m = 4;  
12.     }  
13.   
14.     unsigned char *data_= image->getData();  
15.     int x = 0, y = 0;  
16.     /// 这里要一点，即Opengl下，其中心点坐标在左上角  
17.     for (x = 0; x < spriteSize.width; ++x)  
18.     {  
19.         for (y = 0 ; y < spriteSize.height; ++y)  
20.         {  
21.   
22.             unsigned char *pixel = data_ + (x + y * image->getWidth()) * m;  
23.   
24.             // You can see/change pixels' RGBA value(0-255) here !  
25.             unsigned int r = (unsigned int)*pixel;  
26.             unsigned int g = (unsigned int)*(pixel + 1);  
27.             unsigned int b = (unsigned int)*(pixel + 2) ;  
28.             unsigned int a = (unsigned int)*(pixel + 3);  
29.   
30.             if (r != 0 && g != 0 && b != 0 && a != 0)  
31.             {  
32.                 m_bEraserOk = false;  
33.                 break;  
34.             }  
35.         }  
36.         if (spriteSize.height != y)  
37.         {  
38.             break;  
39.         }  
40.     }  
41.     if (x == spriteSize.width && y == spriteSize.height)  
42.     {  
43.         m_bEraserOk = true;  
44.     }  
45.   
46.     delete image;  
47.   
48.     return this->m_bEraserOk;  
49. }  

         这里，参考了文章：《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.        残留点清除问题

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

最后，附录上代码地址：https://github.com/DionysosLai/EraserSprite