cocos2d实现橡皮擦、刮刮卡功能

在工作中，有时候会遇到刮奖一类的需求，这类其实还好，用到渲染的话就很好做了。我们需要两张图片：一个被刮出的图片，一个油漆图片。油漆通过渲染到画布上，然后我们滑动鼠标时，再渲染一系列的圆点，每渲染一个圆点时，这时候有个源颜色与目标颜色的混合，从而实现擦除的效果，其中还涉及到“源因子”跟“目标因子”。具体可以参考以下文章：http://blog.csdn.net/dionysos_lai/article/details/39030081?utm_source=tuicool

这边简单说下：

功能分析：

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值来作为因子。     

(Rs*1.0 + Rd*0,Gs*1.0 + Gd*0,Bs*1.0 + Bd*0,As*1.0 + Ad*0) = (0,0,0,0)

通过上述分析我们只要保证合成后的颜色值为显示为透明色，就达到目的了，所以上述的参数组合方式有很多种，下边通过一种方式来展示功能

好了扯半天，直接上代码了：

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
USING_NS_CC;
class HelloWorld : public cocos2d::Layer
{
public:
	// there's no 'id' in cpp, so we recommend returning the class instance pointer
	static cocos2d::Scene* createScene();

	// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
	virtual bool init();

	// a selector callback
	void menuCloseCallback(cocos2d::Ref* pSender);

	// implement the "static create()" method manually
	CREATE_FUNC(HelloWorld);
	void myUpdate(float dt);//不断判断是否全部擦除
	bool onTouchBegan(Touch * touch, Event* event);
	void onTouchMoved(Touch * touch, Event* event);
	void onTouchEnded(Touch * touch, Event* event);
	bool myIsDataClear(RenderTexture *pRenderTexture);//是否完全擦除
	bool myIsDataClearInRect(RenderTexture *pRenderTexture, int x, int y, int width, int height);//某个区域是否完全擦除
	Sprite *sprFore;
	Sprite * _erass;
	RenderTexture *renderTexture;
	Vector<Sprite*> _brushs;
};

#endif // __HELLOWORLD_SCENE_H__

 

#include "HelloWorldScene.h"
#include "GuiderLayer.h"
#include "../cocos2d/cocos/ui/UIScale9Sprite.h"

USING_NS_CC;
Scene* HelloWorld::createScene()
{
	// 'scene' is an autorelease object
	auto scene = Scene::create();

	// 'layer' is an autorelease object
	auto layer = HelloWorld::create();

	// add layer as a child to scene
	scene->addChild(layer);

	// return the scene
	return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{

	if (!Layer::init())
	{
		return false;
	}

	Size visibleSize = Director::getInstance()->getVisibleSize();
	Vec2 origin = Director::getInstance()->getVisibleOrigin();

	auto closeItem = MenuItemImage::create(
		"CloseNormal.png",
		"CloseSelected.png",
		CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

	closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width / 2,
		origin.y + closeItem->getContentSize().height / 2));

	auto menu = Menu::create(closeItem, NULL);
	menu->setPosition(Vec2::ZERO);
	this->addChild(menu, 1);



	sprFore = Sprite::create("HelloWorld.png");
	sprFore->setPosition(sprFore->getContentSize().width / 2, sprFore->getContentSize().height / 2);
	sprFore->retain();
	renderTexture = RenderTexture::create(sprFore->getContentSize().width, sprFore->getContentSize().height, Texture2D::PixelFormat::RGBA8888);
	renderTexture->setContentSize(Size(sprFore->getContentSize().width, sprFore->getContentSize().height));
	renderTexture->retain();
	this->addChild(renderTexture);
	renderTexture->setPosition(sprFore->getContentSize().width / 2, sprFore->getContentSize().height / 2);

	renderTexture->beginWithClear(0, 0, 0, 0);
	sprFore->visit();
	renderTexture->end();

	//橡皮擦
	BlendFunc erasaBf = { GL_ZERO, GL_ONE_MINUS_SRC_ALPHA }; //源因子：值为0，橡皮擦颜色为透明；目标因子：目标颜色透明度减去源颜色的透明度
	_erass = Sprite::create("xuanguan1_2.png");
	_erass->retain();
	_erass->setBlendFunc(erasaBf);

	auto listener = EventListenerTouchOneByOne::create();
	listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);
	listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);
	listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);
	_eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);

	//不断判断是否擦除完毕
	schedule(schedule_selector(HelloWorld::myUpdate), 0.5f);
	return true;
}


void HelloWorld::menuCloseCallback(Ref* pSender)
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
	MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.", "Alert");
	return;
#endif

	Director::getInstance()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
	exit(0);
#endif
}

void HelloWorld::myUpdate(float dt)
{
	if (myIsDataClear(renderTexture) == true)
	{

		log("image is clear !");
	}
}



bool HelloWorld::onTouchBegan(Touch* touch, Event  *event)
{
	_erass->setPosition(this->convertToNodeSpace(touch->getLocation()));
	return true;
}
void HelloWorld::onTouchMoved(Touch * touch, Event* event)
{
	_erass->setPosition(this->convertToNodeSpace(touch->getLocation()));
    // 设置源颜色alpha值为最大值，目标颜色alpha值减去源颜色alpha值后就为0了，混合出来的效果就变透明了，这样就实现了橡皮擦效果了。
	_erass->setOpacity(255);
	// 更新RenderTexture
	renderTexture->begin();
	// 绘制
	_erass->visit();
	renderTexture->end();
}

void HelloWorld::onTouchEnded(Touch * touch, Event* event)
{
	_erass->setPosition(this->convertToNodeSpace(touch->getLocation()));
}

bool HelloWorld::myIsDataClear(RenderTexture *pRenderTexture)
{
	bool m_bEraserOk = false;

	Image* image = new Image();
	image = pRenderTexture->newImage(true);

	int m = 3;
	if (image->hasAlpha())
	{
		m = 4;
	}
	unsigned char *data_ = image->getData();

	int sum = 0;
	/// 这里要提醒一点，即Opengl下，其中心点坐标在左上角
	for(int x = 0; x < pRenderTexture->getContentSize().width; ++x)
	{
		for(int y = 0; y < pRenderTexture->getContentSize().height; ++y)
		{
			//获取每个点的像素点值
			unsigned char *pixel = data_ + (x + y * image->getWidth()) * m;
			// You can see/change pixels' RGBA value(0-255) here !
			unsigned int r = (unsigned int)*pixel;
			unsigned int g = (unsigned int)*(pixel + 1);
			unsigned int b = (unsigned int)*(pixel + 2);
			unsigned int a = (unsigned int)*(pixel + 3);
			if (r == 0 && g == 0 && b == 0 && a == 0)
			{
				sum = sum + 1;
			}
		}
	}
	if (sum / (pRenderTexture->getContentSize().width * pRenderTexture->getContentSize().height) > 0.8)
	{
		m_bEraserOk = true;
	}
	delete image;
	return m_bEraserOk;
}

bool HelloWorld::myIsDataClearInRect(RenderTexture *pRenderTexture, int x, int y, int width, int height)
{
	bool m_bEraserOk = false;
	Image* image = new Image();
	image = pRenderTexture->newImage(true);

	int m = 3;
	if (image->hasAlpha())
	{
		m = 4;
	}

	int i = 0, j = 0;
	unsigned char* mdata = (unsigned char*)image->getData();
	for (i = 0; i < width; ++i)
	{
		for (j = 0; j < height; ++j)
		{

			unsigned char *pixel = mdata + (i + x + (image->getHeight() - y - (height - j)) * image->getWidth()) * m;

			// You can see/change pixels' RGBA value(0-255) here !
			unsigned int r = (unsigned int)*pixel;
			unsigned int g = (unsigned int)*(pixel + 1);
			unsigned int b = (unsigned int)*(pixel + 2);
			unsigned int a = (unsigned int)*(pixel + 3);

			if (r != 0 && g != 0 && b != 0 && a != 0)
			{
				break;
			}

		}

		if (height != j)
		{
			break;
		}
	}

	if (i == width && j == height)
	{
		m_bEraserOk = true;
	}
	return m_bEraserOk;
}