给cocos2d-x添加滤镜功能

介绍：

       cocos做项目时经常会遇到对图片进行变色的需求，比如最常用的变灰，而cocos2dx的sprite里面并没有这个支持，需要开发者手工去拓展，即通过编写shader来解决。由服务端转来做客户端时候，每次碰到shader都会十分苦恼，无从下手，趁着这次机会学习一下怎么使用shader。通过网上学习知道了下面两种解决的方法：

1. 针对特定的需求编写对应的shader，使用cocos引擎导出的cc.GLProgram的接口直接进行shader编写
2. 参考photoshop的方式，预先实现不同的滤镜，供玩法灵活组合

       第一种方式，功能最强大，任何功能都可以实现，但是每次都需要操作shader，尤其是处理简单的图像变化时，显得过于重量级。第二种方式，是采用了类似photoshop添加滤镜的方式来对图像进行处理，本文也主要是针对第二种方式进行介绍。该方法在阅读quick-coocs2dx项目中偶然发现，感兴趣可以下载来看看quick的封装。

 

使用：

01	local FILTERS = {

02

-- colors

03	GRAY =          {CCGrayFilter},                 -- {r 0.299, g 0.587, b 0.114, a 0.0} or no parameters

04	RGB =           {CCRGBFilter, 3, {1, 1, 1}},    -- {0.0~1.0, 0.0~1.0, 0.0~1.0}

05	HUE =           {CCHueFilter, 1, {0}},          -- {-180~ 180} see photoshop

06	BRIGHTNESS =    {CCBrightnessFilter, 1, {0}},   -- {-1.0~1.0}

07	SATURATION =    {CCSaturationFilter, 1, {1}},   -- {0.0~2.0}

08	CONTRAST =      {CCContrastFilter, 1, {1}},     -- {0.0~4.0}

09	EXPOSURE =      {CCExposureFilter, 1, {0}},     -- {-10.0, 10.0}

10	GAMMA =         {CCGammaFilter, 1, {1}},        -- {0.0, 3.0}

11	HAZE =          {CCHazeFilter, 2, {0, 0}},      -- {distance -0.5~0.5, slope -0.5~0.5}

12	SEPIA =         {CCSepiaFilter},                -- {no parameters}

13

-- blurs

14	GAUSSIAN_VBLUR =    {CCGaussianVBlurFilter, 1, {0}},        -- {pixel}

15	GAUSSIAN_HBLUR =    {CCGaussianHBlurFilter, 1, {0}},        -- {pixel}

16	ZOOM_BLUR =         {CCZoomBlurFilter, 3, {1, 0.5, 0.5}},   -- {size, centerX, centerY}

17	MOTION_BLUR =       {CCMotionBlurFilter, 2, {1, 0}},        -- {size, angle}

18

-- others

19	SHARPEN =       {CCSharpenFilter, 2, {0, 0}},   -- {sharpness, amount}

20	MASK =          {CCMaskFilter, 1},              -- {DO NOT USE IT}

21	DROP_SHADOW =   {CCDropShadowFilter, 1},        -- {DO NOT USE IT}

22

}

quick-cocos2dx的项目里实现了各种filter，并在脚本层封装了接口调用，这样就可以方便地对sprite添加滤镜了。

使用多组shader实现滤镜叠加：

       我们知道，每个CCNode实例都持有一个m_pShaderProgram成员变量进行渲染操作，而CCGLProgram负责shader的生成、编译、缓存、attribute的bind、uniform设置等等工作，也没有提供修改接口。滤镜的叠加，除了修改cocos引擎的源码，这里也提供了另外一种方式。使用CCRenderTexture。

       CCRenderTexture可以用来渲染屏幕外的内容，我们可以使用它将纹理渲染到屏幕外的区域中，再对纹理进行进一步操作。

01	//建立横向和纵向模糊滤镜

02	CCHBlurFilter* __hblurFilter = CCHBlurFilter::create(0.02f);

03	CCBlurBaseFilter* __vblurFilter = CCVBlurFilter::create(0.02f);

04	//对helloworld.pn使用横向模糊滤镜

05	CCSprite* __hs = CCFilteredSprite::create("helloworld.png", __hblurFilter);

06	__hs->setAnchorPoint(ccp(0,0));

07	CCSize __size = __hs->getContentSize();

08	//将进行过横向模糊的纹理渲染到CCRenderTexture中

09	CCRenderTexture* __canva = CCRenderTexture::create(__size.width, __size.height);

10	__canva->begin();

11	__hs->visit();

12	__canva->end();

13	//根据CCRenderTexture中的纹理创建新的纹理

14	CCTexture2D* __tex2 = new CCTexture2D();

15	__tex2->initWithImage(__canva->newCCImage(true));

16	__tex2->autorelease();

17	//根据新的纹理创建最终的CCFilteredSprite，应用纵向模糊滤镜

18	CCSprite* __final = CCFilteredSprite::createWithTexture(__tex2, __vblurFilter);

19	__final->setAnchorPoint(ccp(0,0));

20	__final->setPosition(ccp(0,0));

21

//显示最终效果

22	this->addChild(__final);

这个filters项目可以在这里找到。https://github.com/zrong/cocos2d-x-filters