在Cocos2d-x v3.x 中实现带颜色滤镜的Sprite

CocoaChina论坛2014-11-10
16:38:251358 次阅读

一、目的

Cocos2d-x做项目时经常会碰到要对图片进行变色的需求，最常用的就是变灰了，就要让按钮变灰来表示当前的状态是不可点的。 但是Cocos2d-x的Sprite中是没有这个变灰支持的。那么，就要我们自己动手来扩展实现一个。我们让这个带变色功能的Sprite叫做FilterSprite。这个FilterSprite扩展了Sprite的功能：可以方便地变换颜色。

二、原理

对图片进行颜色变换，就是对图片上的每个像素进行变换。要实现这个，要新创建一个fragmentShader，这个fragmentShader 比sprite的那个fragmentShader多了一个颜色变换矩阵。shader会让图片上每个像素与颜色变换矩阵进行相乘，输出新的像素值。

这个shader是这样的：

从shader上我们看到，“filterMat” 就是所谓的颜色变换矩阵，仅仅在原来像素输出前用它处理了一下：与待输出像素相乘。 这个shader是opengl层级的，要应用到coco2dx引擎中，我们要着手实现cocos2dx的FilterSprite类了。

三、实现

实现这个FilterSprite注意几个要点：

引擎中一个shader对应一个GLProgram，所以这个带颜色滤镜的shader（称为filterShader）对应一个GLProgram（称为filterProgram）对象，在实际使用时，是用对GLProgram进行了封装的GLProgramState（称为filterProgramState）对象，FilterSprite对象的_glProgramState要设置成filterProgramState对象，在源码中FilterSprite的initWithTexture进行这个filterShader和filterProgram的关联。

在渲染时要将滤镜传递给shader程序，在源码中就是在onDraw回调时调用：

四、使用

使用起来非常简单，只需要设置一个颜色矩阵，例如，如果要变灰就设置一个灰度矩阵，如果要恢复原貌就设置一个单位矩阵。

五、源码

FilterSprite.h:

FilterSprite.cpp:

来源网址：http://www.cocoachina.com/bbs/read.php?tid-238457.html

分享到：
赞(0)

文章评论 (3)

tjunxin2014-12-11 15:07:22

是不是直接继承自sprite的类想用shader都要重写draw啊？
支持(0)回复(0)



q3129981642014-11-12 10:23:01

Reference to 'Rect' is ambiguous ? 这是什么错误呀
支持(0)回复(0)



zxcvbnm00142014-11-11 17:16:33

Node下有个setColor函数 实现的就是这种效果。拿setcolor传入参数 乘于像素的颜色 得到最终的效果