在cocos2dx 中添加自定义 shaders --- 改变 HSL 色调,饱和度, 亮度

Cocos2d-x 2019-05-18


订阅

步骤1

准备shaders文件-ccShad_Hsl.h

/*
 * cocos2d for iPhone: http://www.cocos2d-iphone.org
 *
 * copyright (c) 2011 Brian Chapados
 * Permission is hereby granted,free of charge,to any person obtaining a copy
 * of this software and associated documentation files (the "Software"),to deal
 * in the Software without restriction,including without limitation the rights
 * to use,copy,modify,merge,publish,distribute,sublicense,and/or sell
 * copies of the Software,and to permit persons to whom the Software is
 * furnished to do so,subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR
 * IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * fitness FOR A PARTIculaR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR copYRIGHT HOLDERS BE LIABLE FOR ANY CLaim,damAGES OR OTHER
 * LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,0)"> * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

" \n\
#ifdef GL_ES \n\
precision mediump float; \n\
#endif \n\
 \n\
varying vec2 v_texCoord; \n\
uniform sampler2D CC_Texture0; \n\
\n\
uniform float AddHue; \n\
uniform float AddSat; \n\
uniform float AddLig; \n\
uniform float AddRed; \n\
uniform float AddGreen; \n\
uniform float AddBlue; \n\
uniform float AddAlpha; \n\
float Hue_2_RGB(float v1,float v2,float vH ) \n\
{ \n\
 float ret;\n\
 if ( vH < 0.0 )\n\
 vH += 1.0;\n\
 if ( vH > 1.0 )\n\
 vH -= 1.0;\n\
 if ( ( 6.0 * vH ) < 1.0 )\n\
 ret = ( v1 + ( v2 - v1 ) * 6.0 * vH );\n\
 else if ( ( 2.0 * vH ) < 1.0 )\n\
 ret = ( v2 );\n\
 else if ( ( 3.0 * vH ) < 2.0 )\n\
 ret = ( v1 + ( v2 - v1 ) * ( ( 2.0 / 3.0 ) - vH ) * 6.0 );\n\
 else\n\
 ret = v1;\n\
 return ret;\n\
}\n\
void main(void)\n\
{\n\
 float Cmax,Cmin;\n\
 float D;\n\
 float H,S,L;\n\
 float R,G,B;\n\
 vec4 color = texture2D(CC_Texture0,v_texCoord);\n\
 R = color.r;\n\
 G = color.g;\n\
 B = color.b;\n\
 Cmax = max (R,max (G,B));\n\
 Cmin = min (R,min (G,0)"> L = (Cmax + Cmin) / 2.0;\n\
 if (Cmax == Cmin)\n\
 {\n\
 H = 0.0;\n\
 S = 0.0;\n\
 }\n\
 D = Cmax - Cmin;\n\
 if (L < 0.5)\n\
 S = D / (Cmax + Cmin);\n\
 S = D / (2.0 - (Cmax + Cmin));\n\
 if (R == Cmax)\n\
 H = (G - B) / D;\n\
 } else {\n\
 if (G == Cmax)\n\
 H = 2.0 + (B - R) /D;\n\
 H = 4.0 + (R - G) / D;\n\
 H = H / 6.0;\n\
 // modify H/S/L values\n\
 H += AddHue;\n\
 S += AddSat;\n\
 L += AddLig;\n\
 if (H < 0.0)\n\
 H = H + 1.0;\n\
 H = clamp(H,0.0,1.0);\n\
 S = clamp(S,0)"> L = clamp(L,0)"> // convert back to RGB\n\
 float var_2,var_1;\n\
 if (S == 0.0)\n\
 R = L;\n\
 G = L;\n\
 B = L;\n\
 if ( L < 0.5 )\n\
 var_2 = L * ( 1.0 + S );\n\
 var_2 = ( L + S ) - ( S * L );\n\
 var_1 = 2.0 * L - var_2;\n\
 R = Hue_2_RGB( var_1,var_2,H + ( 1.0 / 3.0 ) );\n\
 G = Hue_2_RGB( var_1,H );\n\
 B = Hue_2_RGB( var_1,H - ( 1.0 / 3.0 ) );\n\
 R = R * AddRed;\n\
 G = G * AddGreen;\n\
 B = B * AddBlue;\n\
 gl_FragColor = vec4(R,B,color.a * AddAlpha);\n\
";

将它放入E:\HSluZiLong\cocos2d-x-2.2.1\cocos2d-x-2.2.1\cocos2dx\shaders 目录下

步骤2.

在ccShaders.h 中加入代码

extern CC_DLL const GLchar * ccPositionColorHSL_frag;
extern CC_DLL const GLchar * ccPositionColorHSL_vert;

在ccShaders.cpp 中加入代码

const GLchar * ccPositionColorHSL_frag =
#include "ccShad_Hsl.h"


在CCGLProgram.h 中定义

#define KCCShader_Position_hsl"KCCShader_Position_hsl"

在CCshadercache.cpp 中 追加枚举kCCShaderType_Position_hsl,

在CCshadercache.cpp 的reloadDefaultShaders中加入代码

p = programForKey(KCCShader_Position_hsl);
p->reset();
loadDefaultShader(p,kCCShaderType_Position_hsl);

在CCshadercache.cpp 的loadDefaultShader中加入代码

case kCCShaderType_Position_hsl:
p->initWithVertexShaderByteArray(ccPositionTextureColor_vert,ccPositionColorHSL_frag);
p->addAttribute(kCCAttributeNamePosition,kCCVertexAttrib_Position);
p->addAttribute(kCCAttributeNameColor,kCCVertexAttrib_Color);
p->addAttribute(kCCAttributeNameTexCoord,kCCVertexAttrib_TexCoords);
break;

在CCshadercache.cpp 的loadDefaultShaders中加入代码

p = new CCGLProgram();
loadDefaultShader(p,kCCShaderType_Position_hsl);

m_pPrograms->setobject(p,KCCShader_Position_hsl);
p->release();

步骤3.

在CCSprite 类中 追加 HSL 接口

 bool m_use_hsl;
 GLfloat m_color_h m_color_s m_color_l m_color_agluint hLocation sLocation lLocation rLocation gLocation bLocation aLocation;


  1. voidinitHSL();
  2. voiddrawHSL();
  3. voidsetHSL(floath,floats,87); background-color:inherit">floatl);
  4. voidsetH(floath);
  5. voidsetS(floats);
  6. voidsetL( floatgetH(void){returnm_color_h;}
  7. floatgetS(returnm_color_s;}
  8. floatgetL(returnm_color_l;}

copy
    voidCCSprite::initHSL()
  1. {
  2. if(m_use_hsl==false)
  3. m_use_hsl=true;
  5. setShaderProgram(CCshadercache::sharedshadercache()->programForKey(KCCShader_Position_hsl));
  6. hLocation=glGetUniformlocation(getShaderProgram()->getProgram(),"AddHue");
  7. sLocation=glGetUniformlocation(getShaderProgram()->getProgram(),"AddSat");
  8. lLocation=glGetUniformlocation(getShaderProgram()->getProgram(),"AddLig");
  9. rLocation=glGetUniformlocation(getShaderProgram()->getProgram(),"AddRed");
  10. gLocation=glGetUniformlocation(getShaderProgram()->getProgram(),"AddGreen");
  11. bLocation=glGetUniformlocation(getShaderProgram()->getProgram(),"AddBlue");
  12. aLocation=glGetUniformlocation(getShaderProgram()->getProgram(),"AddAlpha");
  13. }
  14. }
  16. voidCCSprite::drawHSL()
  17. {
  18. ccBlendFuncblend=getBlendFunc();
  19. ccGLBlendFunc(blend.src,blend.dst);
  20. getShaderProgram()->use();
  21. getShaderProgram()->setUniformsForBuiltins();
  22. getShaderProgram()->setUniformlocationWith1f(hLocation,m_color_h);
  23. getShaderProgram()->setUniformlocationWith1f(sLocation,m_color_s);
  24. getShaderProgram()->setUniformlocationWith1f(lLocation,m_color_l);
  25. getShaderProgram()->setUniformlocationWith1f(rLocation,_displayedColor.r/255.f);
  26. getShaderProgram()->setUniformlocationWith1f(gLocation,_displayedColor.g/255.f);
  27. getShaderProgram()->setUniformlocationWith1f(bLocation,_displayedColor.b/255.f);
  28. m_color_a=this->getopacity()/255.f;
  29. getShaderProgram()->setUniformlocationWith1f(aLocation,m_color_a);
  30. ccGLBindTexture2D(getTexture()->getName());
  31. ccGLEnabLevertexAttribs(kCCVertexAttribFlag_PosColorTex);
  32. #definekQuadSizesizeof(m_squad.bl)
  33. longoffset=(long)&m_squad;
  34. //vertex
  35. intdiff=offsetof(ccV3F_C4B_T2F,vertices);
  36. glVertexAttribPointer(kCCVertexAttrib_Position,3,GL_FLOAT,GL_FALSE,kQuadSize,(void*)(offset+diff));
  37. //texCoods
  38. diff=offsetof(ccV3F_C4B_T2F,texCoords);
  39. glVertexAttribPointer(kCCVertexAttrib_TexCoords,2,0); background-color:inherit">//color
  40. glVertexAttribPointer(kCCVertexAttrib_Color,4,GL_UNSIGNED_BYTE,GL_TRUE,248)"> glDrawArrays(GL_TRIANGLE_STRIP,4);
  41. CC_INCREMENT_GL_DRAWS(1);
  42. voidCCSprite::setHSL(floatl)
  43. initHSL();
  44. setH(h);
  45. setS(s);
  46. setL(l);
  47. voidCCSprite::setH(floath)
  48. initHSL();
  49. m_color_h=h;
  50. voidCCSprite::setS(floats)
  51. m_color_s=s;
  52. voidCCSprite::setL( m_color_l=l;
  53. if(m_color_l>0)
  54. blend.src=GL_SRC_ALPHA;
  55. else
  56. blend.src=GL_ONE;
  57. blend.dst=GL_ONE_MINUS_SRC_ALPHA;
  58. setBlendFunc(blend);
  59. }

在CCSprite.cpp 的updateBlendFunc中追加代码

if(m_use_hsl)
{
ccBlendFunc blend = getBlendFunc();
if(m_color_l > 0)
blend.src = GL_SRC_ALPHA;
else
blend.src = GL_ONE;
blend.dst = GL_ONE_MINUS_SRC_ALPHA;
setBlendFunc(blend);
}

在CCSprite.cpp 的setTexture中追加代码

if(this->m_use_hsl)
{
m_use_hsl = false;
initHSL();
}


在CCSprite.cpp 的draw 开头插入代码

if(m_use_hsl)
{
drawHSL();
return;
}

步骤5.

调用接口

copy
    CCSprite*pSprite=CCSprite::create("Icon.png");
  1. //-1~10无变化
  2. pSprite->setS(-1);
  3. //positionthespriteonthecenterofthescreen
  4. pSprite->setPosition(ccp(visibleSize.width/2+origin.x,visibleSize.height/2+origin.y));
  5. //addthespriteasachildtothislayer
  6. this->addChild(pSprite,0);
  7. }


报|字号订阅

相关文章

如何使用CCRenderTexture创建动态纹理 Cocos2d-x 2 1 4
    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习
Cocos-code-ide使用入门学习地点：杭州滨江邮箱：appdevzw@1...
Cocos2D-x-3.0 编译(Win7)
第一次開始用手游引擎挺激动！！！进入正题。下载资源1：从C...
Cocos2d-x 2 0 在Windows平台下的使用
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
quick-cocos2d-x实例之挑战记忆极限设计文档
1.  来源 QuickV3sample项目中的2048样例游戏，以及最近《...
Cocos2d-x 3 X CMake MinGW版本编译运行
   Cocos2d-x3.x已经支持使用CMake来进行构建了，这里尝试...