zoukankan      html  css  js  c++  java
  • cocos2d 3.X Shader 变暗和变灰


    1.为了节约一张图引发的Shader使用


    我们注意到这个游戏其中常常使用一些button。美术会给两张图。一张略微暗点,表示按下的状态。

    可是这种图一多起来。就比較占用资源。Sprite更改颜色无法表现出这种效果。想起来Shader能够。


    2.变灰是比較常见


    Cocos2d 中有一个变灰的样例,这里就列出shader代码:

    #ifdef GL_ES
    precision mediump float;
    #endif
    
    varying vec4 v_fragmentColor;
    varying vec2 v_texCoord;
    
    void main(void)
    {
    	vec4 c = texture2D(CC_Texture0, v_texCoord);
    	gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b);
    	gl_FragColor.w = c.w;
    }

    那几个系数相加会等于1,不同的调整会有不同的效果。

    效果图:



    第一张就是变灰的效果图,可是离第3张的效果还有距离啊。


    3.变暗的原理


    搞过图形学的应该会比較easy知道。我也是搜索了才知道,我们知道白色是1或者255,黑色是0. 当一个颜色越接近0表示越接近黑色。也就是说,仅仅要把每一个像素的颜色乘以一个比1小的数。就会有变暗的效果了!

    #ifdef GL_ES
    precision mediump float;
    #endif
    
    varying vec4 v_fragmentColor;
    varying vec2 v_texCoord;
    
    void main(void)
    {
    	vec4 c = texture2D(CC_Texture0, v_texCoord);
    	float greyNum = 0.75;
    	vec4 final = c;
    	final.r = c.r * greyNum;
    	final.g = c.g * greyNum;
    	final.b = c.b * greyNum;
    	
    	gl_FragColor = final;
    }

    我这里设置的是0.75

    终于效果图:



    已经很接近第3张我们须要的目标图了。这样就能够省下一半的图片了。不知道渲染速度会不会慢。


    http://www.waitingfy.com/archives/1741

  • 相关阅读:
    函数
    函数知识点 --- 函数的认知,组成,格式 --------------- #10
    打包app
    vue ie
    css position
    awesome vue
    20110636乐建18588529432
    vue2.0-基于elementui换肤[自定义主题]
    三目运算符,多条件判断
    微信二次开发准备工作
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/6776143.html
Copyright © 2011-2022 走看看