加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

cocos变灰图

发布时间：2020-12-14 17:14:41 所属栏目：百科 来源：网络整理
导读：转载出处：http://blog.csdn.net/u010223072/article/details/49640147 本人使用cocos2dx-3.3 前言：游戏中有很多按钮控件，它们一般会有选中和未选中2种状态。我们如果要区分这两种状态的表现，很多时候是直接叫美术给两种状态下的资源，或直接setColor设置

转载出处：http://blog.csdn.net/u010223072/article/details/49640147


本人使用cocos2dx-3.3


前言：游戏中有很多按钮控件，它们一般会有选中和未选中2种状态。我们如果要区分这两种状态的表现，很多时候是直接叫美术给两种状态下的资源，或直接setColor设置颜色。这样无疑增加了资源的大小或不美观(看需求)。本节将介绍怎么通过opengl es程序来实现图片置灰操作。

注：这个置灰操作是基于Cocos-Lua的，具体原理分析这里不打算介绍，主要讲如何实现。

实现步骤

  • Lua端操作：

1，置灰Lua代码(ShaderEffect.lua)

local ShaderEffect = {

        vertDefaultSource = "n"..
        "attribute vec4 a_position; n" ..
        "attribute vec2 a_texCoord; n" ..
        "attribute vec4 a_color; n"..                                                    
        "#ifdef GL_ES  n"..
        "varying lowp vec4 v_fragmentColor;n"..
        "varying mediump vec2 v_texCoord;n"..
        "#else                      n" ..
        "varying vec4 v_fragmentColor; n" ..
        "varying vec2 v_texCoord;  n"..
        "#endif    n"..
        "void main() n"..
        "{n" ..
        "gl_Position = CC_PMatrix * a_position; n"..
        "v_fragmentColor = a_color;n"..
        "v_texCoord = a_texCoord;n"..
        "}",pszFragSource2 = "#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"..
        "uniform vec2 pix_size;n"..
        "void main(void) n" ..
        "{ n" ..
        "vec4 sum = vec4(0,0); n" ..
        "sum += texture2D(u_texture,v_texCoord - 4.0 * pix_size) * 0.05;n"..
        "sum += texture2D(u_texture,v_texCoord - 3.0 * pix_size) * 0.09;n"..
        "sum += texture2D(u_texture,v_texCoord - 2.0 * pix_size) * 0.12;n"..
        "sum += texture2D(u_texture,v_texCoord - 1.0 * pix_size) * 0.15;n"..
        "sum += texture2D(u_texture,v_texCoord                 ) * 0.16;n"..
        "sum += texture2D(u_texture,v_texCoord + 1.0 * pix_size) * 0.15;n"..
        "sum += texture2D(u_texture,v_texCoord + 2.0 * pix_size) * 0.12;n"..
        "sum += texture2D(u_texture,v_texCoord + 3.0 * pix_size) * 0.09;n"..
        "sum += texture2D(u_texture,v_texCoord + 4.0 * pix_size) * 0.05;n"..
        "gl_FragColor = sum;n"..
        "}",--变灰
        psGrayShader = "#ifdef GL_ES n" ..
        "precision mediump float; n" ..
        "#endif n" ..
        "varying vec4 v_fragmentColor; n" ..
        "varying vec2 v_texCoord; n" ..
        "void main(void) n" ..
        "{ n" ..
        "vec4 c = texture2D(CC_Texture0,v_texCoord); n" ..
        "gl_FragColor.xyz = vec3(0.3*c.r + 0.15*c.g +0.11*c.b); n"..
        "gl_FragColor.w = c.w; n"..
        "}",--移除变灰
        psRemoveGrayShader = "#ifdef GL_ES n" ..
        "precision mediump float; n" ..
        "#endif n" ..
        "varying vec4 v_fragmentColor; n" ..
        "varying vec2 v_texCoord; n" ..
        "void main(void) n" ..
        "{ n" ..
        "gl_FragColor = texture2D(CC_Texture0,v_texCoord); n" ..
        "}",pszFragSource1 = "#ifdef GL_ES n" ..
        "precision mediump float; n" ..
        "#endif n" ..
        "varying vec4 v_fragmentColor; n" ..
        "varying vec2 v_texCoord; n" ..
        "void main(void) n" ..
        "{ n" ..
        "vec4 c = texture2D(CC_Texture0,}

function ShaderEffect:init()
    local pGrayProgram = cc.GLProgram:createWithByteArrays(self.vertDefaultSource,self.psGrayShader)
    pGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
    pGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
    pGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
    pGrayProgram:link()
    pGrayProgram:use()
    pGrayProgram:updateUniforms()
    cc.GLProgramCache:getInstance():addGLProgram(pGrayProgram,"pGrayProgram")


    local pRemoveGrayProgram = cc.GLProgram:createWithByteArrays(self.vertDefaultSource,self.psRemoveGrayShader)
    pRemoveGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
    pRemoveGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
    pRemoveGrayProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
    pRemoveGrayProgram:link()
    pRemoveGrayProgram:use()
    pRemoveGrayProgram:updateUniforms()
    cc.GLProgramCache:getInstance():addGLProgram(pRemoveGrayProgram,"pRemoveGrayProgram")
end


function ShaderEffect:addGrayNode(node)
    --变灰的
    local pProgram = cc.GLProgram:createWithByteArrays(self.vertDefaultSource,self.psGrayShader)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)

    pProgram:link()
    pProgram:use()
    pProgram:updateUniforms()
    node:setGLProgram(pProgram)
end

function ShaderEffect:removeGrayNode(node)

    local pProgram = cc.GLProgram:createWithByteArrays(self.vertDefaultSource,self.psRemoveGrayShader)
    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)

    pProgram:link()
    pProgram:use()
    pProgram:updateUniforms()
    node:setGLProgram(pProgram)
end

function ShaderEffect:AddBlur(node)
    local fileUtiles = cc.FileUtils:getInstance()
    local vertSource = self.vertDefaultSource
    local fragSource = fileUtiles:getStringFromFile("shaders/example_Blur.fsh")
    local pProgram = cc.GLProgram:createWithByteArrays(vertSource,fragSource)
    node:setGLProgram(pProgram)
    --local glprogramstate = cc.GLProgramState:getOrCreateWithGLProgram(pProgram)
    local size = node:getTexture():getContentSizeInPixels()
    node:getGLProgramState():setUniformVec2("pix_size",size)
    node:getGLProgramState():setUniformFloat("blurRadius",20.0);
    node:getGLProgramState():setUniformFloat("sampleNum",0.1);
--    
--    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
--    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
--    pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
    pProgram:link()
    pProgram:use()
    pProgram:updateUniforms()
end

-- 按钮置灰
function ShaderEffect:addGrayButton(button)
    if button == nil then
        cclog("param can't be nil")
        return
    end
    -- 遍历按钮的子节点
    --[[local children = button:getChildren()
    if children and #children>0 then
        for _,aSprite in ipairs(children) do
            if aSprite.getVirtualRenderer then
                self:addGrayNode(aSprite:getVirtualRenderer():getSprite())        
            elseif aSprite.setGLProgram then
                self:addGrayNode(aSprite)
            end
        end
    end
    ]]
    -- 按钮本身
    local sprite9 = button:getVirtualRenderer()     
    local sprite = sprite9:getSprite()
    self:addGrayNode(sprite)
end

-- 按钮返回正常
function ShaderEffect:removeGrayButton(button)
    if button == nil then
        cclog("param can't be nil")
        return
    end
    -- 按钮本身
    local sprite9 = button:getVirtualRenderer()   
    local sprite = sprite9:getSprite()
    self:removeGrayNode(sprite)
end

--遍历变灰
function ShaderEffect:setGrayAndChild(node,isNotRecursive)
    if node == nil then
        return
    end
    local array = node:getSpriteChildren()
    for key,var in pairs(array) do

        var:setGLProgram(cc.GLProgramCache:getInstance():getGLProgram("pGrayProgram"))
    end
    if isNotRecursive ~= true then
        --children
        local array = node:getChildren()
        for key,var in pairs(array) do
            self:setGrayAndChild(var)
        end
    end
end

--遍历取消变灰
function ShaderEffect:setRemoveGrayAndChild(node,var in pairs(array) do
        var:setGLProgram(cc.GLProgramCache:getInstance():getGLProgram("pRemoveGrayProgram"))
    end
    if isNotRecursive ~= true then
        --children
        local array = node:getChildren()
        for key,var in pairs(array) do
            self:setRemoveGrayAndChild(var)
        end
    end

end

ShaderEffect:init()

return ShaderEffect

使用 

local ShaderEffect = require("ShaderEffect")  --加载

ShaderEffect:setGrayAndChild(Button)  --置灰
ShaderEffect:setRemoveGrayAndChild(Button)  --取消置灰

2c++

Lua端代码需要调用C++端扩展的getSpriteChildren()接口(得到控件的精灵对象)，下面就来看看C++端怎么来扩展这个接口(这里以Button置灰为例，其它控件思路一样)：

1，首先在基类CCNode.h中添加这个接口，保证其它控件(没有实现的)至少不会运行出错。

virtual Vector<Node*> getSpriteChildren() { Vector<Node*> vec; return vec; } //@cxx

2，既然以按钮控件为例，就先找到UIButton.h中表示按钮精灵信息的成员，发现是这4个变量表示： 
Scale9Sprite* _buttonNormalRenderer; //初始状态图片 
Scale9Sprite* _buttonClickedRenderer; //点击状态图片 
Scale9Sprite* _buttonDisableRenderer;//抬起后图片 
Label* _titleRenderer; //按钮里文字
从这里可以看出，要得到按钮的所有精灵，还得去Scal9Sprite类和Label类中修改，先上UIButton类中getSpriteChildren()的实现： 

Vector<Node*> Button::getSpriteChildren()
{
    Vector<Node*> vec;
    if (_buttonNormalRenderer) {
        vec.pushBack(_buttonNormalRenderer->getSpriteChildren());
    }
    if (_buttonClickedRenderer) {
        vec.pushBack(_buttonClickedRenderer->getSpriteChildren());
    }
    if (_buttonDisableRenderer) {
        vec.pushBack(_buttonDisableRenderer->getSpriteChildren());
    }
    if (_titleRenderer) {
        vec.pushBack(_titleRenderer->getSpriteChildren());
    }
    return vec;
}

3，上面按钮图片资源数据既然是返回的Scale9Sprite对象的指针，那我们就得去这个类中得到精灵信息，具体getSpriteChildren()的实现如下： 
Vector<Node*> Scale9Sprite::getSpriteChildren()
    {
        Vector<Node*> vec;
        if (_scale9Image) {
            vec.pushBack(_scale9Image);
        }
        if (_topLeftSprite) {
            vec.pushBack(_topLeftSprite);
        }
        if (_topSprite) {
            vec.pushBack(_topSprite);
        }
        if (_topRightSprite) {
            vec.pushBack(_topRightSprite);
        }
        if (_leftSprite) {
            vec.pushBack(_leftSprite);
        }
        if (_centerSprite) {
            vec.pushBack(_centerSprite);
        }
        if (_rightSprite) {
            vec.pushBack(_rightSprite);
        }
        if (_bottomLeftSprite) {
            vec.pushBack(_bottomLeftSprite);
        }
        if (_bottomSprite) {
            vec.pushBack(_bottomSprite);
        }
        if (_bottomRightSprite) {
            vec.pushBack(_bottomRightSprite);
        }
        return vec;
    }

4，按钮的文字数据返回的是Label对象指针，同样，我们得去Label类中实现getSpriteChildren()得到文字的精灵，代码如下： 

Vector<Node*> Label::getSpriteChildren()
{
    Vector<Node*> vec;
    if (_textSprite) {
        vec.pushBack(_textSprite);
    }
    return vec;
}

5，好，这样按钮的4个相关精灵数据都能得到了，接下来就是tolua绑定到Lua端调用，如何绑定，前面章节有介绍。(Lua Shader那边反正是要最终得到 Sprite* 精灵对象来进行处理，遇到间接的纹理对象就一层一层的剥吧…)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同