Cocos2dx 实现擦除即橡皮擦效果的实现_cocos 判断橡皮擦是否擦干净了-程序员宅基地

技术标签: cocos2d学习  图片  橡皮擦  opengl  混合  OpenGL研究  

Cocos2dx实现橡皮擦效果的实现

DionysosLai([email protected])  2014/8/25

         之前项目在做一个绘本游戏,要求实现擦除效果,具体效果可以参考绘本《我是一只暴龙》,当时由于项目比较紧,是直接拿网上代码来用(感谢仁兄Zrong的入门之引,具体博文,详见地址,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。

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

        m_pEraser->setPosition(point);
	ccBlendFunc blendFunc = { GL_ONE, GL_ZERO };	///< 设置混合模式, 源---1, 目标---0
	m_pEraser->setBlendFunc(blendFunc);
	m_pRTex->begin();
	m_pEraser->visit();
        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。

         具体代码如下所示:

        CCSprite* drawSprite = CCSprite::createWithTexture(m_drawTextture);
	drawSprite->setPosition(point);
	ccBlendFunc blendFunc = { GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA };	///< 设置混合模式, 源---1-alpha, 目标---alpha
	drawSprite->setBlendFunc(blendFunc);
	m_pRTex->begin();
	drawSprite->visit();
	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中:
         CCSprite* sprite = CCSprite::create(pszFileName);
	spriteSize = sprite->getContentSize();
	/// 将精灵加入纹理后,其中心点坐标应该设置在(0,0)处, 这是由于纹理的中心点在(0,0),当然,可以通过设置其偏移坐标实现;
	sprite->setAnchorPoint(ccp(0.f, 0.f));
//	sprite->setPosition(ccp(spriteSize.width/2.f, spriteSize.height/2.f));

	m_pRTex = CCRenderTexture::create(spriteSize.width, spriteSize.height);
	m_pRTex->setPosition(CCPointZero);
	this->addChild(m_pRTex);

	m_pRTex->begin();
	sprite->visit();
	m_pRTex->end();

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

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

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

void EraserSprite::ccTouchMoved( cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent )
{
	if (m_bEraser)
	{
		CCPoint point = pTouch->getLocation(); 
		CCPoint normal = ccpNormalize(point-m_touchPoint);

		/// 处理一次移动过多,造成中间有遗漏,或者锯齿现象;
		while(1)
		{
			if (ccpDistance(point, m_touchPoint) < 1.f)
			{
				/*		m_pEraser->setPosition(-this->getPosition() + point + spriteSize/2.f);*/
				eraseByBlend(-this->getPosition() + point + spriteSize/2.f);
				break;
			}
			m_touchPoint = m_touchPoint + normal*1.f;
			
			/*		m_pEraser->setPosition(-this->getPosition() + m_touchPoint + spriteSize/2.f);*/
			eraseByBlend(-this->getPosition() + m_touchPoint + spriteSize/2.f);
		}

		m_touchPoint = point;
	}
}


2.        擦除形状

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

         正方形形状:

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

         圆形形状:

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

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


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

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

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


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

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

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

		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);

         其中,x、y代表位置。

 

         完整代码如下所示:

bool EraserSprite::getEraserOk()
{
	m_bEraserOk = false;

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

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

	unsigned char *data_= image->getData();
	int x = 0, y = 0;
	/// 这里要一点,即Opengl下,其中心点坐标在左上角
	for (x = 0; x < spriteSize.width; ++x)
	{
		for (y = 0 ; y < spriteSize.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)
			{
				m_bEraserOk = false;
				break;
			}
		}
		if (spriteSize.height != y)
		{
			break;
		}
	}
	if (x == spriteSize.width && y == spriteSize.height)
	{
		m_bEraserOk = true;
	}

	delete image;

	return this->m_bEraserOk;
}

         这里,参考了文章:《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,欢迎大家下载。同时,对于残留点问题,如果你有什么好的建议,记得call 我!万分感谢!













版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Dionysos_lai/article/details/39030081

智能推荐

STM32接GSM模块(只用TX RX)_32板子上连接gsm模块的串口是哪个-程序员宅基地

文章浏览阅读5.5k次,点赞2次,收藏9次。这几天尝试了下STM32的USART3去接gsm模块。整了好久没整出来,甚是纠结。途中遇到两个问题:1.USART3配置问题 2.接线问题USART3也是重映射到PC10 PC11这两个口的,所以要有GPIO_PinRemapConfig(GPIO_PartialRemap_USART3, ENABLE);其实最主要的问题就是接线问题,即模块电压和MCU电压不一样。我的GSM模块_32板子上连接gsm模块的串口是哪个

阅读笔记-HTTP返回状态码-程序员宅基地

文章浏览阅读124次。HTTP返回状态码1 HTTP超文本协议HTTP是基于客户端/服务端(C/S)的框架模型,通过一个可靠的链接来交换信息,是一个无状态的请求/响应协议。一个HTTP“客户端”是一个应用程序(Web浏览器或其他任何客户端),通过连接到服务器达到向服务器发送一个或多个HTTP请求的目的。一个HTTP“服务器”同样也是一个应用程序(通常是一个Web服务,如Apache Web服务器或IIS服务器..._nginx 请求头太大(nginx) nginx 内置代码和 431 类似。

算法:堆排序之每次输入插一次堆&输入完成后建堆_堆排序的过程中,每次进行堆调整后,打印输出堆的次序-程序员宅基地

文章浏览阅读576次。1./*Name:插入堆排序(A[0]为空情况)Coder:Lou JianghuiTime:22:49-23:07*/#include#include#includeusing namespace std;int A[1000];int n;void print(int n){ for (int i = 1;_堆排序的过程中,每次进行堆调整后,打印输出堆的次序

【HLL】使用 HyperLogLog 去重案例_hyperloglog可以处理带重复元素的流数据吗-程序员宅基地

文章浏览阅读695次。1.概述HyperLogLog一个常用的场景就是统计网站的UV。##基数 简单来说,基数(cardinality,也译作势),是指一个集合(这里的集合允许存在重复元素)中不同元素的个数。例如看下面的集合: {1,2,3,4,5,2,3,9,7} 这个集合有9个元素,但是2和3各出现了两次,因此不重复的元素为1,2,3,4,5,9,7,所以这个集合的基数是7。maven <dependency> <groupId>net.agkn</grou._hyperloglog可以处理带重复元素的流数据吗

Navicat模型中的表展示注释的方法_navicat在表对象界面显示表的备注-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏8次。先展示下效果图:Navicat不能直接将注释展示在表模型上,需要曲线救国。展示表的中文名方法:选中画布上的一个表模型,然后在左侧的图表页签中将“显示描述”勾选中,表模型上方会自动出现一个描述框,选中描述框右键选择编辑,填写表的中文名即可。展示表字段对应的中文名的方法:选择左侧的新建笔记,然后右键选中笔记,选择样式为标签,对应表字段顺序输入中文名称,最后将标签调整到适当位置即可。标签的样式也可以通过左侧属性配置进行修改,比如间距,字体大小之类。..._navicat在表对象界面显示表的备注

推导部分和【蓝桥杯国赛】_推导部分和 带权并查集 蓝桥-程序员宅基地

文章浏览阅读141次。对于一个长度为N的整数数列A1​A2​⋯AN​,小蓝想知道下标l到r的部分和il∑r​Ai​Al​Al1​⋯Ar​是多少?然而,小蓝并不知道数列中每个数的值是多少,他只知道它的M个部分和的值。其中第i个部分和是下标li​到ri​的部分和∑jli​ri​​Ali​​Ali​1​⋯Ari​​, 值是Si​。_推导部分和 带权并查集 蓝桥

随便推点

spring数据源配置:Tomcat/weblogic数据源切换配置_tomcat 数据库切换-程序员宅基地

文章浏览阅读1.4k次。数据配置方式一般是三种:1.org.springframework.jdbc.datasource.DriverManagerDataSource(没有池概念,有连接就建立一个connection)2.org.apache.commons.dbcp.BasicDataSource(连接池技术)3.org.springframework.jndi.JndiObjectFactoryBea..._tomcat 数据库切换

计算机组成原理 之 计算题、分析题 题解详细总结(已完结)_计算机组成原理计算题-程序员宅基地

文章浏览阅读1.7w次,点赞62次,收藏544次。第1章 计算机系统概述0、1编码第2章 存储系统磁盘存储器第6章 控制器逻辑Intel 8086 指令简介第1章 计算机系统概述0、1编码1、分别求出+1111B和-1001B的真值及其机器数的原码、反码、补码形式。答案:+1111B的真值:15原码01111 反码01111 补码01111-1001B 的真值:-9原码11001 反码10110 补码10111另一种写法:解: +1111B 真值:15D [x]原=01111B [x]反=01111B [x]补=011._计算机组成原理计算题

react-native 0.57 版本更新日志-程序员宅基地

文章浏览阅读647次。[0.57]欢迎来到React Native版本的0.57版!这个版本解决了许多问题,并有一些令人兴奋的改进。我们再次跳过了一个月发布,通过扩展发布候选阶段关注质量,并且兼容之前的版本这个版本包括599提交由73个不同的贡献者!为了响应反馈,我们准备了一个只包含用户影响的更改的变更日志。请分享您的意见,并让我们知道我们如何使这更有用,如果您对此有任何反馈,和往常一样请告知我们let us kn..._react-native 0.57版本文档

【IDEA&Eclipse快捷键对照表】_eclipse的folder对应idea的哪个-程序员宅基地

文章浏览阅读4.6k次,点赞8次,收藏44次。IDEA Comment Eclipse Comment Remark Ctrl+Alt+H 调用层次 Ctrl+Alt+H 开放的调用层次结构 Ctrl+E 展示打开的文件(快速转换编辑器) Alt+7 当前文件结构 Ctrl+O 当前文件结构 Ctrl+H 查看Java类层次结构 Ctrl+....._eclipse的folder对应idea的哪个

修改pycharm目录后,无法打开的问题!!!_为什么修改已安装的pycharm的安装路径会打不开软件-程序员宅基地

文章浏览阅读2.1k次。最近因为一些操作,想将命名不规范的pycharm安装目录的空格删掉,但是删掉以后,发现pycharm怎么也打不开了。在将脑汁都绞尽以后,参考一篇博客,终于发现了问题所在https://blog.csdn.net/weixin_45696455/article/details/106414316在看了上面一篇博客后,谢谢哥,茅塞顿开,原来是我破解的.vmoption文件问题,里面写了破解包路径,一旦修改pycharm路径后,将无法找到该破解包。但当我在文件夹打开.vmoption文件以后,发现我并没有写破_为什么修改已安装的pycharm的安装路径会打不开软件

labview中visa插件安装教程_nivisa安装教程-程序员宅基地

文章浏览阅读2.2w次,点赞7次,收藏29次。1.在NI官网下载VISA,上一篇文章中已经讲到,此处不再赘述。2.关到电脑的所有杀毒软件,非常重要。3.点击运行。4.一直点击next,在需要更改安装目录时,自己更改(最好不要安装在C盘)。5.安装结束后,在最新安装目录下查找NI-MAX。可以直接将他拖动到桌面即可。打开后查看设备与接口若发现里面含有内容,则安装成功,如下图所示。..._nivisa安装教程

推荐文章

热门文章

相关标签