先上效果图:


借鉴了[Cocos2d-x 让精灵图像变灰的方法]。


但这个方法在Quick-Cocos3.2下不能完美实现变灰效果-变灰了的对象的位置会跳到屏幕右上角。

百思不得其解,搜一下有没有人发现这个问题,果然有:

[关于Sprite的setShaderProgram后坐标改变的问题]

发现4楼的仁兄的回复有亮点:

[如何在Cocos2d-x 3.0中使用opengl shader?]

点进去一看,内容是这样的:

“坐标变化的解决了,将附件gray.vsh 中的CC_MVPMatrix 改为 CC_PMatrix 即可 ”


我估计应该是位置转换的矩阵问题吧,gray.vsh是什么下面会说到。


经过分析,发现原因在addGray方法([Cocos2d-x 让精灵图像变灰的方法])的27行:

pProgram->initWithVertexShaderByteArray(ccPositionTextureColor_vert,pszFragSource);


ccPositionTextureColor_vert是什么呢?它存放在cocos/renderer下,名为ccShader_PositionTextureColor.vert。它的作用是……以在下的理解,是一个shader方法(ccShader),关于位置、材质与颜色的(PositionTextureColor)且是针对顶点的(.vert)。

它的内容是:

constchar*ccPositionTextureColor_vert=STRINGIFY(attributevec4a_position;attributevec2a_texCoord;attributevec4a_color;\n#ifdefGL_ES\nvaryinglowpvec4v_fragmentColor;varyingmediumpvec2v_texCoord;\n#else\nvaryingvec4v_fragmentColor;varyingvec2v_texCoord;\n#endif\nvoidmain(){gl_Position=CC_MVPMatrix*a_position;v_fragmentColor=a_color;v_texCoord=a_texCoord;});


咦,发现有一个熟悉的面孔-“CC_MVPMatrix”。其实上面说到的gray.vsh的内容就是ccShader_PositionTextureColor.vert大括号括住的部分。那我将ccShader_PositionTextureColor.vert的CC_MVPMatrix改为CC_PMatrix是否就能解决灰化后对象的位置问题呢?答案是否定的,这样改会影响其他对象(例如文本)的定位。

那我再定义一个GLchar传到pProgram->initWithVertexShaderByteArray的第一个参数不就得咯?

constGLchar*pszVertSource="attributevec4a_position;\n\attributevec2a_texCoord;\n\attributevec4a_color;\n\\n#ifdefGL_ES\n\n\varyinglowpvec4v_fragmentColor;\n\varyingmediumpvec2v_texCoord;\n\\n#else\n\n\varyingvec4v_fragmentColor;\n\varyingvec2v_texCoord;\n\\n#endif\n\n\voidmain()\n\{\n\gl_Position=CC_PMatrix*a_position;\n\v_fragmentColor=a_color;\n\v_texCoord=a_texCoord;\n\}";pProgram->initWithVertexShaderByteArray(pszVertSource,pszFragSource);


经实践证实是可行的。其实有个更简单的方法,就是:

pProgram->initWithVertexShaderByteArray(ccPositionTextureColor_noMVP_vert,pszFragSource);


原来cocos/renderer下有个文件叫ccShader_PositionTextureColor_noMVP.vert。




最后附上实现灰化功能的全部代码。


C++部分,将此方法导出给lua用:

voidsetGray(Node*node){USING_NS_CC;do{constGLchar*pszFragSource="#ifdefGL_ES\n\precisionmediumpfloat;\n\#endif\n\uniformsampler2Du_texture;\n\varyingvec2v_texCoord;\n\varyingvec4v_fragmentColor;\n\voidmain(void)\n\{\n\//ConverttogreyscaleusingNTSCweightings\n\vec4col=texture2D(u_texture,v_texCoord);\n\floatgrey=dot(col.rgb,vec3(0.299,0.587,0.114));\n\gl_FragColor=vec4(grey,grey,grey,col.a);\n\}";GLProgram*pProgram=newGLProgram();pProgram->initWithByteArrays(ccPositionTextureColor_noMVP_vert,pszFragSource);node->setGLProgram();CHECK_GL_ERROR_DEBUG();}while(0);}


lua部分:

--不进行灰化的对象特有的方法DisplayUtil.LIST_DONT_GRAY={"getSprite",--ProgressTimer"setString",--Label}--判断能否灰化functionDisplayUtil.canGray(node)fori,vinipairs(DisplayUtil.LIST_DONT_GRAY)doifnode[v]thenreturnfalseendendreturntrueend--灰化对象functionDisplayUtil.setGray(node,v)iftype(node)~="userdata"thenprintError("nodemustbeauserdata")returnendifv==nilthenv=trueendifnotnode.__isGray__thennode.__isGray__=falseendifv==node.__isGray__thenreturnendifvthenifDisplayUtil.canGray(node)then--调用C++的setGray方法setGray(tolua.cast(node,"cocos2d::Node"))----localglProgram=node:getGLProgram()--node:setGLProgram(glProgram)--node:getGLProgram():bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)--node:getGLProgram():bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)--node:getGLProgram():bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_TEX_COORDS)--不知道为什么下面2行一定要写node:getGLProgram():link()node:getGLProgram():updateUniforms()end--childrenlocalchildren=node:getChildren()ifchildrenandtable.nums(children)>0then--遍历子对象设置fori,vinipairs(children)doifDisplayUtil.canGray(v)thenDisplayUtil.setGray(v)endendendelseDisplayUtil.removeGray(node)endnode.__isGray__=vend--取消灰化functionDisplayUtil.removeGray(node)iftype(node)~="userdata"thenprintError("nodemustbeauserdata")returnendifnotnode.__isGray__thenreturnendifDisplayUtil.canGray(node)thenlocalglProgram=cc.GLProgramCache:getInstance():getGLProgram("ShaderPositionTextureColor_noMVP")node:setGLProgram(glProgram)--glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)--glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)--glProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_TEX_COORDS)--不知道为什么下面2行不能写,写了会出问题--glProgram:link()--glProgram:updateUniforms()end--childrenlocalchildren=node:getChildren()ifchildrenandtable.nums(children)>0then--遍历子对象设置fori,vinipairs(children)doifDisplayUtil.canGray(v)thenDisplayUtil.removeGray(v)endendendnode.__isGray__=falseend


怎么使用不用我多说了吧。