【quick-cocos2d-x】灰化效果

http://cn.cocos2d-x.org/tutorial/show?id=1976

 

先上效果图：

 

参考：Cocos2d-x让精灵图像变灰的方法

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

但这个方法在Quick-Cocos（下面简称QC）3.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）。
它的内容是：

ccShader_PositionTextureColor.vert

const char* ccPositionTextureColor_vert = STRINGIFY(
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

\n#ifdef GL_ES\n
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
\n#else\n
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
\n#endif\n

void main()
{
    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的第一个参数不就得咯？

 

const GLchar* pszVertSource = 
    "attribute vec4 a_position; \n \ attribute vec2 a_texCoord; \n \ attribute vec4 a_color; \n \ \n#ifdef GL_ES\n \n \ varying lowp vec4 v_fragmentColor; \n \ varying mediump vec2 v_texCoord; \n \ \n#else\n \n \ varying vec4 v_fragmentColor; \n \ varying vec2 v_texCoord; \n \ \n#endif\n \n \ void main() \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用：

CUtil.cpp

void setGray(Node *node){
  USING_NS_CC;
  do
  {
    const GLchar* pszFragSource =
            "#ifdef GL_ES \n \         precision mediump float; \n \         #endif \n \         uniform sampler2D u_texture; \n \         varying vec2 v_texCoord; \n \         varying vec4 v_fragmentColor; \n \         void main(void) \n \         { \n \         // Convert to greyscale using NTSC weightings \n \         vec4 col = texture2D(u_texture, v_texCoord); \n \         float grey = dot(col.rgb, vec3(0.299, 0.587, 0.114)); \n \         gl_FragColor = vec4(grey, grey, grey, col.a); \n \         }";
      
    GLProgram* pProgram = new GLProgram();
    pProgram->initWithByteArrays(ccPositionTextureColor_noMVP_vert, pszFragSource);
    node->setGLProgram();
    CHECK_GL_ERROR_DEBUG();
  }while(0);}

lua部分：

DisplayUtil.lua

--不进行灰化的对象特有的方法DisplayUtil.LIST_DONT_GRAY = {
    "getSprite",     --ProgressTimer
    "setString",     --Label}--判断能否灰化function DisplayUtil.canGray(node)
    for i,v in ipairs(DisplayUtil.LIST_DONT_GRAY) do
        if node[v] then
            return false
        end
    end
    return trueend--灰化对象function DisplayUtil.setGray(node, v)
    if type(node) ~= "userdata" then
        printError("node must be a userdata")
        return
    end
    if v == nil then
        v = true
    end
    if not node.__isGray__ then
        node.__isGray__ = false
    end
    if v == node.__isGray__ then
        return
    end
    if v then
        if DisplayUtil.canGray(node) then
        --调用C++的setGray方法
            setGray(tolua.cast(node, "cocos2d::Node"))
            --
            -- local glProgram = 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
        --children
        local children = node:getChildren()
        if children and table.nums(children) > 0 then
            --遍历子对象设置
            for i,v in ipairs(children) do
                if DisplayUtil.canGray(v) then
                    DisplayUtil.setGray(v)
                end
            end
        end
    else
        DisplayUtil.removeGray(node)
    end
    node.__isGray__ = vend--取消灰化function DisplayUtil.removeGray(node)
    if type(node) ~= "userdata" then
        printError("node must be a userdata")
        return
    end
    if not node.__isGray__ then
        return
    end
    if DisplayUtil.canGray(node) then
        local glProgram = 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
    --children
    local children = node:getChildren()
    if children and table.nums(children) > 0 then
        --遍历子对象设置
        for i,v in ipairs(children) do
            if DisplayUtil.canGray(v) then
                DisplayUtil.removeGray(v)
            end
        end
    end
    node.__isGray__ = falseend

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

来源网址：http://evamango-blog.logdown.com/posts/243059-quick-cocos-32-methods-to-make-object-gray