美文网首页
给cocos2d-x添加滤镜功能

给cocos2d-x添加滤镜功能

作者: 人在广州_2017 | 来源:发表于2017-07-07 23:03 被阅读0次

介绍:

cocos做项目时经常会遇到对图片进行变色的需求,比如最常用的变灰,而cocos2dx的sprite里面并没有这个支持,需要开发者手工去拓展,即通过编写shader来解决。由服务端转来做客户端时候,每次碰到shader都会十分苦恼,无从下手,趁着这次机会学习一下怎么使用shader。通过网上学习知道了下面两种解决的方法:
针对特定的需求编写对应的shader,使用cocos引擎导出的cc.GLProgram的接口直接进行shader编写
参考photoshop的方式,预先实现不同的滤镜,供玩法灵活组合

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

使用:

local FILTERS = {
    -- colors
    GRAY =          {CCGrayFilter},                 -- {r 0.299, g 0.587, b 0.114, a 0.0} or no parameters
    RGB =           {CCRGBFilter, 3, {1, 1, 1}},    -- {0.0~1.0, 0.0~1.0, 0.0~1.0}
    HUE =           {CCHueFilter, 1, {0}},          -- {-180~ 180} see photoshop
    BRIGHTNESS =    {CCBrightnessFilter, 1, {0}},   -- {-1.0~1.0}
    SATURATION =    {CCSaturationFilter, 1, {1}},   -- {0.0~2.0}
    CONTRAST =      {CCContrastFilter, 1, {1}},     -- {0.0~4.0}
    EXPOSURE =      {CCExposureFilter, 1, {0}},     -- {-10.0, 10.0}
    GAMMA =         {CCGammaFilter, 1, {1}},        -- {0.0, 3.0}
    HAZE =          {CCHazeFilter, 2, {0, 0}},      -- {distance -0.5~0.5, slope -0.5~0.5}
    SEPIA =         {CCSepiaFilter},                -- {no parameters}
    -- blurs
    GAUSSIAN_VBLUR =    {CCGaussianVBlurFilter, 1, {0}},        -- {pixel}
    GAUSSIAN_HBLUR =    {CCGaussianHBlurFilter, 1, {0}},        -- {pixel}
    ZOOM_BLUR =         {CCZoomBlurFilter, 3, {1, 0.5, 0.5}},   -- {size, centerX, centerY}
    MOTION_BLUR =       {CCMotionBlurFilter, 2, {1, 0}},        -- {size, angle}
    -- others
    SHARPEN =       {CCSharpenFilter, 2, {0, 0}},   -- {sharpness, amount}
    MASK =          {CCMaskFilter, 1},              -- {DO NOT USE IT}
    DROP_SHADOW =   {CCDropShadowFilter, 1},        -- {DO NOT USE IT}
}

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

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

我们知道,每个CCNode实例都持有一个m_pShaderProgram成员变量进行渲染操作,而CCGLProgram负责shader的生成、编译、缓存、attribute的bind、uniform设置等等工作,也没有提供修改接口。滤镜的叠加,除了修改cocos引擎的源码,这里也提供了另外一种方式。使用CCRenderTexture。
CCRenderTexture可以用来渲染屏幕外的内容,我们可以使用它将纹理渲染到屏幕外的区域中,再对纹理进行进一步操作。

//建立横向和纵向模糊滤镜
CCHBlurFilter* __hblurFilter = CCHBlurFilter::create(0.02f);
CCBlurBaseFilter* __vblurFilter = CCVBlurFilter::create(0.02f);
//对helloworld.pn使用横向模糊滤镜
CCSprite* __hs = CCFilteredSprite::create("helloworld.png", __hblurFilter);
__hs->setAnchorPoint(ccp(0,0));
CCSize __size = __hs->getContentSize();
//将进行过横向模糊的纹理渲染到CCRenderTexture中
CCRenderTexture* __canva = CCRenderTexture::create(__size.width, __size.height);
__canva->begin();
__hs->visit();
__canva->end();
//根据CCRenderTexture中的纹理创建新的纹理
CCTexture2D* __tex2 = new CCTexture2D();
__tex2->initWithImage(__canva->newCCImage(true));
__tex2->autorelease();
//根据新的纹理创建最终的CCFilteredSprite,应用纵向模糊滤镜
CCSprite* __final = CCFilteredSprite::createWithTexture(__tex2, __vblurFilter);
__final->setAnchorPoint(ccp(0,0));
__final->setPosition(ccp(0,0));
//显示最终效果
this->addChild(__final);

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

相关文章

网友评论

      本文标题:给cocos2d-x添加滤镜功能

      本文链接:https://www.haomeiwen.com/subject/cqtdhxtx.html