Cocos lua图片置灰

18 篇文章 0 订阅
58 篇文章 2 订阅

1、引言

  在实际的开发过程中,我们有时可以看到同样的按钮,按钮图片在不同状态表现也不一样!我们需要考虑优化这种问题。就是相同的图片只做一张图就可以了,没有必要多做很多灰度图片。我们该怎么做呢?先卖一个关子,嘻嘻(#.#)

2、思路

  上面我们已经发现问题了,猜想一下呗?好的,你没猜错。就是shader,通过一段代码,来改变图片的色值。班门弄斧了,废话少说我们直接上代码:

function setSpriteGray(sp,flag)  
    -- 默认vert
    local vertShaderByteArray = "\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"..  
        "}"  

    -- 置灰frag
    local flagShaderByteArray = "#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.4*c.r + 0.4*c.g +0.4*c.b); \n"..  
        "gl_FragColor.w = c.w; \n"..  
        "}"  

    -- 移除置灰frag  
    local pszRemoveGrayShader = "#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" ..  
        "}" 
    if flag then 
        local glProgram = cc.GLProgram:createWithByteArrays(vertShaderByteArray,flagShaderByteArray)  
        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_FLAG_TEX_COORDS)  
        glProgram:link()  
        glProgram:updateUniforms()  
        sp:getVirtualRenderer():getSprite():setGLProgram(glProgram)  
    else 
        local glProgram = cc.GLProgram:createWithByteArrays(vertShaderByteArray,pszRemoveGrayShader)  
        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_FLAG_TEX_COORDS)  
        glProgram:link()  
        glProgram:updateUniforms()  
        sp:getVirtualRenderer():getSprite():setGLProgram(glProgram) 
    end 
end

3、使用

  使用就很简单了,直接传入按钮或者图片纹理和是否置灰就可以了!

setSpriteGray(self.btnGoldReLive,not result.Data.Gold.Enable)

4、结束语


The End
  好了,今天的分享就到这里,如有不足之处,还望大家及时指正,随时欢迎探讨交流!!!


喜欢的朋友们,请帮顶、点赞、评论!您的肯定是我写作的不竭动力!

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
评论

打赏作者

对酒当歌﹏✍

您的鼓励是我写作的最大动力!

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值