程序博客网 > java工程师任职资格

NGUI之按钮置灰

来源：互联网 发布：java工程师任职资格 编辑：程序博客网 时间：2024/04/27 23:59

转载自：http://www.cnblogs.com/U-tansuo/p/NGUI_Button_disable.html

转载自：http://blog.csdn.net/kakashi8841/article/details/45478433

传统按钮置灰，需要使用另外一张纹理。

本例通过修改shader和NGUI sprite的r值来实现按钮的置灰。优势：节省纹理，操作简单

只需将NGUI的Resource/Shaders目录下Unlit - Transparent Colored的shader修改部分代码即可，如下（第60行处）：

//original//fixed4 frag (v2f IN) : COLOR//{//return tex2D(_MainTex, IN.texcoord) * IN.color;//}//modifiedfixed4 frag (v2f IN) : COLOR{fixed4 col = tex2D(_MainTex, IN.texcoord) * IN.color;if( IN.color.r < 0.0001 ){float grey = dot( col.rgb, float3(0.299, 0.587, 0.114 ));col.rgb = float3(grey, grey, grey );}return col;}
此时，只需修改UISprite的Color Tint中的r值为0即可。

注释：其中（0.299， 0.587， 0.114）为灰度公式的参数



转载自：http://blog.csdn.net/kakashi8841/article/details/45478433

1、灰化的需求

很多時候，我们做游戏会遇到一种情况。比如一个技能图标，可以点的时候是正常的颜色，不能点的时候是灰色的。又比如一个功能，开放的时候是正常颜色，没开放的时候是灰色的。更常见的就是，比如你的QQ好友，不在线头像也会变成灰色的。

那么，上述种种情况就出现了一种需求，把一个图片变成灰色的。


2、说说灰化与灰度

首先，你不能说让美术出两套图，一套彩色一套灰色的吧。这样会增加资源占用。

那么我们只能想办法通过程序来处理。

那么我们要先搞清楚，灰色的图片是怎样的。

（彩色）

（灰化后）

看到“战队升级”那几个字和他们的背景，就是灰色的啦。

那怎样把一张图片变成灰色的，首先，颜色由RGB组成（你想说由CMYK、HSB、甚至索引色，我不会跟你争这个，毕竟，我是个有素养的人），我们看到的所谓灰色。就是R、G、B这三个值都一样。也就是说，我们要把图片原RGB值计算成一个新的RGB，这个新的颜色他的R=G=B。


那好，那RGB怎么计算成一个灰度值呢？

这里涉及到一个灰化的公式，这公式是一个经验公式，也就是说，这个公式是不固定的。只要你算出来之后，效果是灰色的，那就可以了。

比如，最简单的，你可以用公式：

k = (r + g + b) / 3

这样是对RGB取平均值。

还有个心理学公式：

k = r*.222 + g*.707 + b*.071;

这个公式是什么意思呢？大家可以发现，0.222+0.707+0.071 = 1

其实这个公式的意思就是觉得RGB所占比重不同，比如R占0.222。那么他把RGB值分别乘以对应的比重，就得到一个新的值。而公式1，其实也就认为RGB所占比重是一样的。

这些公式最后得到的都是灰色图片（因为你R=G=B=k），只不过看起来视觉效果不同。你也可以自己试试其他的比重。


3、NGUI灰化实践

说那么多，不如动手来撸几行代码。

思路就是修改NGUI的Transparent Colored这个shader。我们通过丢失一个颜色来处理。把（0，0，0）作为启用灰度的开关。

Transparent Colored代码如下：

[plain] view plaincopy在CODE上查看代码片派生到我的代码片
  1. Shader "Unlit/Transparent Colored"  
  2. {  
  3.     Properties  
  4.     {  
  5.         _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}  
  6.     }  
  7.       
  8.     SubShader  
  9.     {  
  10.         LOD 100  
  11.   
  12.         Tags  
  13.         {  
  14.             "Queue" = "Transparent"  
  15.             "IgnoreProjector" = "True"  
  16.             "RenderType" = "Transparent"  
  17.         }  
  18.           
  19.         Cull Off  
  20.         Lighting Off  
  21.         ZWrite Off  
  22.         Fog { Mode Off }  
  23.         Offset -1, -1  
  24.         Blend SrcAlpha OneMinusSrcAlpha  
  25.   
  26.         Pass  
  27.         {  
  28.             CGPROGRAM  
  29.             #pragma vertex vert  
  30.             #pragma fragment frag  
  31.                   
  32.             #include "UnityCG.cginc"  
  33.       
  34.             struct appdata_t  
  35.             {  
  36.                 float4 vertex : POSITION;  
  37.                 float2 texcoord : TEXCOORD0;  
  38.                 fixed4 color : COLOR;  
  39.             };  
  40.       
  41.             struct v2f  
  42.             {  
  43.                 float4 vertex : SV_POSITION;  
  44.                 half2 texcoord : TEXCOORD0;  
  45.                 fixed4 color : COLOR;  
  46.                 fixed gray : TEXCOORD1;   
  47.             };  
  48.       
  49.             sampler2D _MainTex;  
  50.             float4 _MainTex_ST;  
  51.                   
  52.             v2f vert (appdata_t v)  
  53.             {  
  54.                 v2f o;  
  55.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
  56.                 o.texcoord = v.texcoord;  
  57.                 o.color = v.color;  
  58.                 o.gray = dot(v.color, fixed4(1,1,1,0));  
  59.                 return o;  
  60.             }  
  61.                   
  62.             fixed4 frag (v2f i) : COLOR  
  63.             {  
  64.                 fixed4 col;  
  65.                 col = tex2D(_MainTex, i.texcoord);  
  66.                   
  67.                 if(i.gray == 0)  
  68.                 {  
  69.                     float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));  
  70.                     col.rgb = float3(grey, grey, grey);  
  71.                 }  
  72.                 else  
  73.                 {  
  74.                   col = col * i.color;  
  75.                 }  
  76.                 return col;  
  77.             }  
  78.             ENDCG  
  79.         }  
  80.     }  
  81.   
  82.     SubShader  
  83.     {  
  84.         LOD 100  
  85.   
  86.         Tags  
  87.         {  
  88.             "Queue" = "Transparent"  
  89.             "IgnoreProjector" = "True"  
  90.             "RenderType" = "Transparent"  
  91.         }  
  92.           
  93.         Pass  
  94.         {  
  95.             Cull Off  
  96.             Lighting Off  
  97.             ZWrite Off  
  98.             Fog { Mode Off }  
  99.             Offset -1, -1  
  100.             ColorMask RGB  
  101.             AlphaTest Greater .01  
  102.             Blend SrcAlpha OneMinusSrcAlpha  
  103.             ColorMaterial AmbientAndDiffuse  
  104.               
  105.             SetTexture [_MainTex]  
  106.             {  
  107.                 Combine Texture * Primary  
  108.             }  
  109.         }  
  110.     }  
  111. }  
我们在vert中计算设置的颜色（下面那个图为设置的地方）是否全为0

如果全为0，则在frag中应用灰化公式。

就这样完成了修改了。


4、支持softclip

为了对softclip起做用，请一起修改

Transparent Colored 1.shader、Transparent Colored 2.shader、Transparent Colored 3.shader为如下代码：

网上可能很多文章没说到上面3个shader的修改，导致很多开发者在softclip中使用灰化的时候不起效果。

[plain] view plaincopy在CODE上查看代码片派生到我的代码片
  1. Shader "HIDDEN/Unlit/Transparent Colored 1"  
  2. {  
  3.     Properties  
  4.     {  
  5.         _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}  
  6.     }  
  7.   
  8.     SubShader  
  9.     {  
  10.         LOD 200  
  11.   
  12.         Tags  
  13.         {  
  14.             "Queue" = "Transparent"  
  15.             "IgnoreProjector" = "True"  
  16.             "RenderType" = "Transparent"  
  17.         }  
  18.           
  19.         Pass  
  20.         {  
  21.             Cull Off  
  22.             Lighting Off  
  23.             ZWrite Off  
  24.             Offset -1, -1  
  25.             Fog { Mode Off }  
  26.             ColorMask RGB  
  27.             AlphaTest Greater .01  
  28.             Blend SrcAlpha OneMinusSrcAlpha  
  29.   
  30.             CGPROGRAM  
  31.             #pragma vertex vert  
  32.             #pragma fragment frag  
  33.   
  34.             #include "UnityCG.cginc"  
  35.   
  36.             sampler2D _MainTex;  
  37.             float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);  
  38.             float2 _ClipArgs0 = float2(1000.0, 1000.0);  
  39.   
  40.             struct appdata_t  
  41.             {  
  42.                 float4 vertex : POSITION;  
  43.                 half4 color : COLOR;  
  44.                 float2 texcoord : TEXCOORD0;  
  45.             };  
  46.   
  47.             struct v2f  
  48.             {  
  49.                 float4 vertex : POSITION;  
  50.                 half4 color : COLOR;  
  51.                 float2 texcoord : TEXCOORD0;  
  52.                 float2 worldPos : TEXCOORD1;  
  53.             };  
  54.   
  55.             v2f vert (appdata_t v)  
  56.             {  
  57.                 v2f o;  
  58.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
  59.                 o.color = v.color;  
  60.                 o.texcoord = v.texcoord;  
  61.                 o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;  
  62.                 return o;  
  63.             }  
  64.   
  65.             half4 frag (v2f IN) : COLOR  
  66.             {  
  67.                 // Softness factor  
  68.                 float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;  
  69.               
  70.                 // Sample the texture  
  71.                 half4 col = tex2D(_MainTex, IN.texcoord);  
  72.   
  73.                   
  74.                 if (dot(IN.color, fixed4(1,1,1,0)) == 0)  
  75.                 {  
  76.                   col = tex2D(_MainTex, IN.texcoord);  
  77.                   col.rgb = dot(col.rgb, fixed3(.222,.707,.071));  
  78.                 }else{  
  79.                   col = col * IN.color;  
  80.                 }  
  81.                    
  82.                 col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);  
  83.                 return col;  
  84.             }  
  85.             ENDCG  
  86.         }  
  87.     }  
  88.       
  89.     SubShader  
  90.     {  
  91.         LOD 100  
  92.   
  93.         Tags  
  94.         {  
  95.             "Queue" = "Transparent"  
  96.             "IgnoreProjector" = "True"  
  97.             "RenderType" = "Transparent"  
  98.         }  
  99.           
  100.         Pass  
  101.         {  
  102.             Cull Off  
  103.             Lighting Off  
  104.             ZWrite Off  
  105.             Fog { Mode Off }  
  106.             ColorMask RGB  
  107.             AlphaTest Greater .01  
  108.             Blend SrcAlpha OneMinusSrcAlpha  
  109.             ColorMaterial AmbientAndDiffuse  
  110.               
  111.             SetTexture [_MainTex]  
  112.             {  
  113.                 Combine Texture * Primary  
  114.             }  
  115.         }  
  116.     }  
  117. }  

[plain] view plaincopy在CODE上查看代码片派生到我的代码片
  1. Shader "HIDDEN/Unlit/Transparent Colored 2"  
  2. {  
  3.     Properties  
  4.     {  
  5.         _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}  
  6.     }  
  7.   
  8.     SubShader  
  9.     {  
  10.         LOD 200  
  11.   
  12.         Tags  
  13.         {  
  14.             "Queue" = "Transparent"  
  15.             "IgnoreProjector" = "True"  
  16.             "RenderType" = "Transparent"  
  17.         }  
  18.           
  19.         Pass  
  20.         {  
  21.             Cull Off  
  22.             Lighting Off  
  23.             ZWrite Off  
  24.             Offset -1, -1  
  25.             Fog { Mode Off }  
  26.             ColorMask RGB  
  27.             AlphaTest Greater .01  
  28.             Blend SrcAlpha OneMinusSrcAlpha  
  29.   
  30.             CGPROGRAM  
  31.             #pragma vertex vert  
  32.             #pragma fragment frag  
  33.   
  34.             #include "UnityCG.cginc"  
  35.   
  36.             sampler2D _MainTex;  
  37.             float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);  
  38.             float4 _ClipArgs0 = float4(1000.0, 1000.0, 0.0, 1.0);  
  39.             float4 _ClipRange1 = float4(0.0, 0.0, 1.0, 1.0);  
  40.             float4 _ClipArgs1 = float4(1000.0, 1000.0, 0.0, 1.0);  
  41.   
  42.             struct appdata_t  
  43.             {  
  44.                 float4 vertex : POSITION;  
  45.                 half4 color : COLOR;  
  46.                 float2 texcoord : TEXCOORD0;  
  47.             };  
  48.   
  49.             struct v2f  
  50.             {  
  51.                 float4 vertex : POSITION;  
  52.                 half4 color : COLOR;  
  53.                 float2 texcoord : TEXCOORD0;  
  54.                 float4 worldPos : TEXCOORD1;  
  55.             };  
  56.   
  57.             float2 Rotate (float2 v, float2 rot)  
  58.             {  
  59.                 float2 ret;  
  60.                 ret.x = v.x * rot.y - v.y * rot.x;  
  61.                 ret.y = v.x * rot.x + v.y * rot.y;  
  62.                 return ret;  
  63.             }  
  64.   
  65.             v2f vert (appdata_t v)  
  66.             {  
  67.                 v2f o;  
  68.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
  69.                 o.color = v.color;  
  70.                 o.texcoord = v.texcoord;  
  71.                 o.worldPos.xy = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;  
  72.                 o.worldPos.zw = Rotate(v.vertex.xy, _ClipArgs1.zw) * _ClipRange1.zw + _ClipRange1.xy;  
  73.                 return o;  
  74.             }  
  75.   
  76.             half4 frag (v2f IN) : COLOR  
  77.             {  
  78.                 // First clip region  
  79.                 float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;  
  80.                 float f = min(factor.x, factor.y);  
  81.   
  82.                 // Second clip region  
  83.                 factor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;  
  84.                 f = min(f, min(factor.x, factor.y));  
  85.   
  86.                 half4 col;  
  87.                 col = tex2D(_MainTex, IN.texcoord);  
  88.                 if (dot(IN.color, fixed4(1,1,1,0)) == 0)  
  89.                 {  
  90.                   col.rgb = dot(col.rgb, fixed3(.222,.707,.071));  
  91.                 }else{  
  92.                   col = col * IN.color;  
  93.                 }  
  94.   
  95.                 col.a *= clamp(f, 0.0, 1.0);  
  96.                   
  97.                 return col;  
  98.             }  
  99.             ENDCG  
  100.         }  
  101.     }  
  102.       
  103.     SubShader  
  104.     {  
  105.         LOD 100  
  106.   
  107.         Tags  
  108.         {  
  109.             "Queue" = "Transparent"  
  110.             "IgnoreProjector" = "True"  
  111.             "RenderType" = "Transparent"  
  112.         }  
  113.           
  114.         Pass  
  115.         {  
  116.             Cull Off  
  117.             Lighting Off  
  118.             ZWrite Off  
  119.             Fog { Mode Off }  
  120.             ColorMask RGB  
  121.             AlphaTest Greater .01  
  122.             Blend SrcAlpha OneMinusSrcAlpha  
  123.             ColorMaterial AmbientAndDiffuse  
  124.               
  125.             SetTexture [_MainTex]  
  126.             {  
  127.                 Combine Texture * Primary  
  128.             }  
  129.         }  
  130.     }  
  131. }  
[plain] view plaincopy在CODE上查看代码片派生到我的代码片
  1. Shader "HIDDEN/Unlit/Transparent Colored 3"  
  2. {  
  3.     Properties  
  4.     {  
  5.         _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}  
  6.     }  
  7.   
  8.     SubShader  
  9.     {  
  10.         LOD 200  
  11.   
  12.         Tags  
  13.         {  
  14.             "Queue" = "Transparent"  
  15.             "IgnoreProjector" = "True"  
  16.             "RenderType" = "Transparent"  
  17.         }  
  18.           
  19.         Pass  
  20.         {  
  21.             Cull Off  
  22.             Lighting Off  
  23.             ZWrite Off  
  24.             Offset -1, -1  
  25.             Fog { Mode Off }  
  26.             ColorMask RGB  
  27.             AlphaTest Greater .01  
  28.             Blend SrcAlpha OneMinusSrcAlpha  
  29.   
  30.             CGPROGRAM  
  31.             #pragma vertex vert  
  32.             #pragma fragment frag  
  33.   
  34.             #include "UnityCG.cginc"  
  35.   
  36.             sampler2D _MainTex;  
  37.             float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);  
  38.             float4 _ClipArgs0 = float4(1000.0, 1000.0, 0.0, 1.0);  
  39.             float4 _ClipRange1 = float4(0.0, 0.0, 1.0, 1.0);  
  40.             float4 _ClipArgs1 = float4(1000.0, 1000.0, 0.0, 1.0);  
  41.             float4 _ClipRange2 = float4(0.0, 0.0, 1.0, 1.0);  
  42.             float4 _ClipArgs2 = float4(1000.0, 1000.0, 0.0, 1.0);  
  43.   
  44.             struct appdata_t  
  45.             {  
  46.                 float4 vertex : POSITION;  
  47.                 half4 color : COLOR;  
  48.                 float2 texcoord : TEXCOORD0;  
  49.             };  
  50.   
  51.             struct v2f  
  52.             {  
  53.                 float4 vertex : POSITION;  
  54.                 half4 color : COLOR;  
  55.                 float2 texcoord : TEXCOORD0;  
  56.                 float4 worldPos : TEXCOORD1;  
  57.                 float2 worldPos2 : TEXCOORD2;  
  58.             };  
  59.   
  60.             float2 Rotate (float2 v, float2 rot)  
  61.             {  
  62.                 float2 ret;  
  63.                 ret.x = v.x * rot.y - v.y * rot.x;  
  64.                 ret.y = v.x * rot.x + v.y * rot.y;  
  65.                 return ret;  
  66.             }  
  67.   
  68.             v2f vert (appdata_t v)  
  69.             {  
  70.                 v2f o;  
  71.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
  72.                 o.color = v.color;  
  73.                 o.texcoord = v.texcoord;  
  74.                 o.worldPos.xy = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;  
  75.                 o.worldPos.zw = Rotate(v.vertex.xy, _ClipArgs1.zw) * _ClipRange1.zw + _ClipRange1.xy;  
  76.                 o.worldPos2 = Rotate(v.vertex.xy, _ClipArgs2.zw) * _ClipRange2.zw + _ClipRange2.xy;  
  77.                 return o;  
  78.             }  
  79.   
  80.             half4 frag (v2f IN) : COLOR  
  81.             {  
  82.                 // First clip region  
  83.                 float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;  
  84.                 float f = min(factor.x, factor.y);  
  85.   
  86.                 // Second clip region  
  87.                 factor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;  
  88.                 f = min(f, min(factor.x, factor.y));  
  89.   
  90.                 // Third clip region  
  91.                 factor = (float2(1.0, 1.0) - abs(IN.worldPos2)) * _ClipArgs2.xy;  
  92.                 f = min(f, min(factor.x, factor.y));  
  93.   
  94.                 // Sample the texture  
  95.                 half4 col = tex2D(_MainTex, IN.texcoord);  
  96.                 if (dot(IN.color, fixed4(1,1,1,0)) == 0)  
  97.                 {  
  98.                   col.rgb = dot(col.rgb, fixed3(.222,.707,.071));  
  99.                 }else{  
  100.                   col = col * IN.color;  
  101.                 }  
  102.   
  103.                 col.a *= clamp(f, 0.0, 1.0);  
  104.                 return col;  
  105.             }  
  106.             ENDCG  
  107.         }  
  108.     }  
  109.       
  110.     SubShader  
  111.     {  
  112.         LOD 100  
  113.   
  114.         Tags  
  115.         {  
  116.             "Queue" = "Transparent"  
  117.             "IgnoreProjector" = "True"  
  118.             "RenderType" = "Transparent"  
  119.         }  
  120.           
  121.         Pass  
  122.         {  
  123.             Cull Off  
  124.             Lighting Off  
  125.             ZWrite Off  
  126.             Fog { Mode Off }  
  127.             ColorMask RGB  
  128.             AlphaTest Greater .01  
  129.             Blend SrcAlpha OneMinusSrcAlpha  
  130.             ColorMaterial AmbientAndDiffuse  
  131.               
  132.             SetTexture [_MainTex]  
  133.             {  
  134.                 Combine Texture * Primary  
  135.             }  
  136.         }  
  137.     }  
  138. }  

好，改完了。测试工程稍后上传。
0 0
java工程师任职资格 java工程师任职资格
原创粉丝点击
热门IT博客
sql的全称sql的全称
java权限管理实现思路java权限管理实现思路
域名dns修改生效
java 汉字转gbk编码
ff14国服数据统计
apache cxf 配置
mac文件统一命名
淘宝卖家数据
网络歌曲大全 伤感离殇
ppt图表数据编辑不了
广东汽车订票软件
php column函数
手机word软件
网络防火墙有什么用
数据录入是干什么的
js 变量赋值
java 打印所有属性
c语言编写成绩管理系统
管理酒店有哪些软件
md5java解密算法
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 补脾中药 吃什么补脾 脾肺双补有什么中成药 补脾益肠丸的功效 祛湿补脾的食物 补脾益肾汤 脾不好怎么补 肾脾双补口服液效果 补脾祛湿 补脾益肠丸的功效与作用 补脾祛湿食物 补脾祛湿汤 仁和肾脾双补口服液 补脾吃什么好 什么食物补脾 吃什么食物补脾 吃啥补脾 补脾食物有哪些 补脾吃什么 怎样补脾 如何补脾 补脾的食物有哪些 脾怎么调理 怎样调理脾 补脾益肾颗粒 怎样补脾健脾 补脾怎么补 入脾 什么东西补脾 复脾 肾脾双补 肾脾双补丸 补脾的水果 小儿扶脾颗粒 清热泻脾散 补脾的中药 怎么样补脾 补脾阴的食物 调脾 女人补脾 养胃补脾

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里