[Shader]NGUI与灰化

最新推荐文章于 2021-03-25 17:08:17 发布
最新推荐文章于 2021-03-25 17:08:17 发布
阅读量1w 收藏 8
点赞数 7
分类专栏： 游戏开发 3D Unity3D 文章标签： Unity3d NGUI 3D 手游 shader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kakashi8841/article/details/45478433
版权
Unity3D 同时被 3 个专栏收录
46 篇文章 0 订阅
订阅专栏
游戏开发
42 篇文章 11 订阅
订阅专栏
3D
41 篇文章 0 订阅
订阅专栏




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代码如下：

Shader "Unlit/Transparent Colored"
{
	Properties
	{
		_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
	}
	
	SubShader
	{
		LOD 100

		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
		}
		
		Cull Off
		Lighting Off
		ZWrite Off
		Fog { Mode Off }
		Offset -1, -1
		Blend SrcAlpha OneMinusSrcAlpha

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
				
			#include "UnityCG.cginc"
	
			struct appdata_t
			{
				float4 vertex : POSITION;
				float2 texcoord : TEXCOORD0;
				fixed4 color : COLOR;
			};
	
			struct v2f
			{
				float4 vertex : SV_POSITION;
				half2 texcoord : TEXCOORD0;
				fixed4 color : COLOR;
				fixed gray : TEXCOORD1; 
			};
	
			sampler2D _MainTex;
			float4 _MainTex_ST;
				
			v2f vert (appdata_t v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.texcoord = v.texcoord;
				o.color = v.color;
				o.gray = dot(v.color, fixed4(1,1,1,0));
				return o;
			}
				
			fixed4 frag (v2f i) : COLOR
			{
			    fixed4 col;
				col = tex2D(_MainTex, i.texcoord);
				
				if(i.gray == 0)
				{
					float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));
					col.rgb = float3(grey, grey, grey);
				}
				else
				{
				  col = col * i.color;
				}
				return col;
			}
			ENDCG
		}
	}

	SubShader
	{
		LOD 100

		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
		}
		
		Pass
		{
			Cull Off
			Lighting Off
			ZWrite Off
			Fog { Mode Off }
			Offset -1, -1
			ColorMask RGB
			AlphaTest Greater .01
			Blend SrcAlpha OneMinusSrcAlpha
			ColorMaterial AmbientAndDiffuse
			
			SetTexture [_MainTex]
			{
				Combine Texture * Primary
			}
		}
	}
}
我们在vert中计算设置的颜色（下面那个图为设置的地方）是否全为0

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

就这样完成了修改了。


4、支持softclip

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

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

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

Shader "HIDDEN/Unlit/Transparent Colored 1"
{
	Properties
	{
		_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
	}

	SubShader
	{
		LOD 200

		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
		}
		
		Pass
		{
			Cull Off
			Lighting Off
			ZWrite Off
			Offset -1, -1
			Fog { Mode Off }
			ColorMask RGB
			AlphaTest Greater .01
			Blend SrcAlpha OneMinusSrcAlpha

			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			sampler2D _MainTex;
			float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);
			float2 _ClipArgs0 = float2(1000.0, 1000.0);

			struct appdata_t
			{
				float4 vertex : POSITION;
				half4 color : COLOR;
				float2 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 vertex : POSITION;
				half4 color : COLOR;
				float2 texcoord : TEXCOORD0;
				float2 worldPos : TEXCOORD1;
			};

			v2f vert (appdata_t v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.color = v.color;
				o.texcoord = v.texcoord;
				o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
				return o;
			}

			half4 frag (v2f IN) : COLOR
			{
				// Softness factor
				float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;
			
				// Sample the texture
				half4 col = tex2D(_MainTex, IN.texcoord);

				
				if (dot(IN.color, fixed4(1,1,1,0)) == 0)
				{
				  col = tex2D(_MainTex, IN.texcoord);
				  col.rgb = dot(col.rgb, fixed3(.222,.707,.071));
				}else{
				  col = col * IN.color;
				}
				 
				col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);
				return col;
			}
			ENDCG
		}
	}
	
	SubShader
	{
		LOD 100

		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
		}
		
		Pass
		{
			Cull Off
			Lighting Off
			ZWrite Off
			Fog { Mode Off }
			ColorMask RGB
			AlphaTest Greater .01
			Blend SrcAlpha OneMinusSrcAlpha
			ColorMaterial AmbientAndDiffuse
			
			SetTexture [_MainTex]
			{
				Combine Texture * Primary
			}
		}
	}
}


Shader "HIDDEN/Unlit/Transparent Colored 2"
{
	Properties
	{
		_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
	}

	SubShader
	{
		LOD 200

		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
		}
		
		Pass
		{
			Cull Off
			Lighting Off
			ZWrite Off
			Offset -1, -1
			Fog { Mode Off }
			ColorMask RGB
			AlphaTest Greater .01
			Blend SrcAlpha OneMinusSrcAlpha

			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			sampler2D _MainTex;
			float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);
			float4 _ClipArgs0 = float4(1000.0, 1000.0, 0.0, 1.0);
			float4 _ClipRange1 = float4(0.0, 0.0, 1.0, 1.0);
			float4 _ClipArgs1 = float4(1000.0, 1000.0, 0.0, 1.0);

			struct appdata_t
			{
				float4 vertex : POSITION;
				half4 color : COLOR;
				float2 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 vertex : POSITION;
				half4 color : COLOR;
				float2 texcoord : TEXCOORD0;
				float4 worldPos : TEXCOORD1;
			};

			float2 Rotate (float2 v, float2 rot)
			{
				float2 ret;
				ret.x = v.x * rot.y - v.y * rot.x;
				ret.y = v.x * rot.x + v.y * rot.y;
				return ret;
			}

			v2f vert (appdata_t v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.color = v.color;
				o.texcoord = v.texcoord;
				o.worldPos.xy = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
				o.worldPos.zw = Rotate(v.vertex.xy, _ClipArgs1.zw) * _ClipRange1.zw + _ClipRange1.xy;
				return o;
			}

			half4 frag (v2f IN) : COLOR
			{
				// First clip region
				float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;
				float f = min(factor.x, factor.y);

				// Second clip region
				factor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;
				f = min(f, min(factor.x, factor.y));

				half4 col;
				col = tex2D(_MainTex, IN.texcoord);
				if (dot(IN.color, fixed4(1,1,1,0)) == 0)
				{
				  col.rgb = dot(col.rgb, fixed3(.222,.707,.071));
				}else{
				  col = col * IN.color;
				}

				col.a *= clamp(f, 0.0, 1.0);
				
				return col;
			}
			ENDCG
		}
	}
	
	SubShader
	{
		LOD 100

		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
		}
		
		Pass
		{
			Cull Off
			Lighting Off
			ZWrite Off
			Fog { Mode Off }
			ColorMask RGB
			AlphaTest Greater .01
			Blend SrcAlpha OneMinusSrcAlpha
			ColorMaterial AmbientAndDiffuse
			
			SetTexture [_MainTex]
			{
				Combine Texture * Primary
			}
		}
	}
}

Shader "HIDDEN/Unlit/Transparent Colored 3"
{
	Properties
	{
		_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
	}

	SubShader
	{
		LOD 200

		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
		}
		
		Pass
		{
			Cull Off
			Lighting Off
			ZWrite Off
			Offset -1, -1
			Fog { Mode Off }
			ColorMask RGB
			AlphaTest Greater .01
			Blend SrcAlpha OneMinusSrcAlpha

			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			sampler2D _MainTex;
			float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);
			float4 _ClipArgs0 = float4(1000.0, 1000.0, 0.0, 1.0);
			float4 _ClipRange1 = float4(0.0, 0.0, 1.0, 1.0);
			float4 _ClipArgs1 = float4(1000.0, 1000.0, 0.0, 1.0);
			float4 _ClipRange2 = float4(0.0, 0.0, 1.0, 1.0);
			float4 _ClipArgs2 = float4(1000.0, 1000.0, 0.0, 1.0);

			struct appdata_t
			{
				float4 vertex : POSITION;
				half4 color : COLOR;
				float2 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 vertex : POSITION;
				half4 color : COLOR;
				float2 texcoord : TEXCOORD0;
				float4 worldPos : TEXCOORD1;
				float2 worldPos2 : TEXCOORD2;
			};

			float2 Rotate (float2 v, float2 rot)
			{
				float2 ret;
				ret.x = v.x * rot.y - v.y * rot.x;
				ret.y = v.x * rot.x + v.y * rot.y;
				return ret;
			}

			v2f vert (appdata_t v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.color = v.color;
				o.texcoord = v.texcoord;
				o.worldPos.xy = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
				o.worldPos.zw = Rotate(v.vertex.xy, _ClipArgs1.zw) * _ClipRange1.zw + _ClipRange1.xy;
				o.worldPos2 = Rotate(v.vertex.xy, _ClipArgs2.zw) * _ClipRange2.zw + _ClipRange2.xy;
				return o;
			}

			half4 frag (v2f IN) : COLOR
			{
				// First clip region
				float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;
				float f = min(factor.x, factor.y);

				// Second clip region
				factor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;
				f = min(f, min(factor.x, factor.y));

				// Third clip region
				factor = (float2(1.0, 1.0) - abs(IN.worldPos2)) * _ClipArgs2.xy;
				f = min(f, min(factor.x, factor.y));

				// Sample the texture
				half4 col = tex2D(_MainTex, IN.texcoord);
				if (dot(IN.color, fixed4(1,1,1,0)) == 0)
				{
				  col.rgb = dot(col.rgb, fixed3(.222,.707,.071));
				}else{
				  col = col * IN.color;
				}

				col.a *= clamp(f, 0.0, 1.0);
				return col;
			}
			ENDCG
		}
	}
	
	SubShader
	{
		LOD 100

		Tags
		{
			"Queue" = "Transparent"
			"IgnoreProjector" = "True"
			"RenderType" = "Transparent"
		}
		
		Pass
		{
			Cull Off
			Lighting Off
			ZWrite Off
			Fog { Mode Off }
			ColorMask RGB
			AlphaTest Greater .01
			Blend SrcAlpha OneMinusSrcAlpha
			ColorMaterial AmbientAndDiffuse
			
			SetTexture [_MainTex]
			{
				Combine Texture * Primary
			}
		}
	}
}

好，改完了。测试工程稍后上传。


kakashi8841
关注
专栏目录
NGUI图片置灰方法
SHY不小心
07-31 933
1.修改Transparent Colored系列shader，通过设置Color.rgb来设置灰度 2.增加灰度系列shader，通过更换Sprite的material来设置灰度 using UnityEngine; using System.Collections; /// <summary> /// 设置图片灰度 /// </summary> public cl...
Unity3D开发（二）：NGUI之UIButton"禁用"状态时置灰
445822357
09-30 903
NGUI中的Button几乎是最常用到的控件之一，并且可以组合各种组件（比如UIButtonColor，UIButtonOffset，UITweenxx），方便设置Button的各种状态下的属性，几乎可以满足我们的所有需求。 但是对于当Button的isEnabled属性设置为false时，根据设置的disableColor属性设置不可点击时的颜色时，虽然我们设置的灰色，但并不是我们想象中的样子...
[原]NGUI之按钮置灰
weixin_33940102的博客
07-28 119
传统按钮置灰，需要使用另外一张纹理。 本例通过修改shader和NGUI sprite的r值实现按钮置灰。优势：节省纹理，操作简单 将NGUI Unlit/Transparent Colored片段部分改成如下：fixed4 frag (v2f i) : COLOR { fixed4 col= tex2D(_MainTex, i.texcoord) * i.color; ...
NGUI扩展之 图片置灰
zebin的博客
09-10 767
在属性 面板添加一个小功能，置灰属性。 设计思路很简单， 就是通过勾选或者不勾选，实现置灰 或者不置灰。 包括对scroview的置灰等等… 实际上，在NGUI中 所有需要渲染的 物体 都继承自 wight, 而编辑器 部分则 作用于它。 在UIWidgetInspector 中。 这个脚本作用于 UIWidget， 而我们 知道所有需要渲染的元素都继承自 UIWidget 包括sprite 可以找到这个， DrawInspectorProperties 画属性面板的 属性，我们就可以在里面进行 画
关于NGUI置灰的方案
Something
05-09 836
关于NGUI置灰的方案
[Unity][NGUI][Shader]NGUI精灵变灰
BuladeMian的博客，菜得抠脚，菜得真实
03-25 363
来自参考资料1的内容。 NGUI的精灵 为 默认材质，颜色为000000,A255。颜色就会变灰 项目中得有NGUI 对这几个Shader进行修改。提前备份原文件。 Unlit/Transparent Colored Shader "Unlit/Transparent Colored" { Properties { _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {} } SubShader { LOD 100...
【Unity3D】【NGUI】选中某个图标后高亮（或者灰化）
四爷的专栏
12-27 9183
NGUI讨论群：333417608 需求 点击怪物头像后，头像高亮。（限制：高亮值只能一样） 方法 复制Unlit - Transparent Colored.shader，进行修改 1、 Shader "Unlit/Transparent Colored" 改为 Shader "Unlit/Transparent Colored (Bright)" 2、 Prope
Unity Texture置灰处理
zphshiwo的专栏
08-14 2021
最近搞了一下置灰相关内容，这个鬼东西...真是坑 如果用的地方不多的话，那就让美术出图吧...不过如果各个地方都在用，我们还是老老实实写个shader吧，不然还是很浪费资源的.. 我用的NGUI，其实这个关系不是很大啦..NGUI里有一个Transparent Colored shader，这个如果你创建NGUI Texture会默认用这个shader。 我们的做法也很简单，就是如果Texu...
NGUI的UISprite动态染色的一种解决方案
iwinterice的专栏
06-08 4360
游戏的UI开发中经常会遇到
Unity - UGUI 图片置灰 Shader
12-11
在Shader 使用在 Unity UGUI 的 图片上，图片选择该Shader，图片将显示会灰白色
NGUI基础之button(按钮)
weixin_33913332的博客
01-14 317
1，button的创建；2，button组件的基本属性；3，button的事件监听 原位地址：http://blog.csdn.net/dingkun520wy/article/details/50434520 1，button的创建 编辑器创建 代码创建 /// <summary> /// 动态加载一个NGUI按钮 /// </s...
NGUI_Button
weixin_33998125的博客
12-17 145
十、按钮，Button 1、按钮的核心作用： 按钮能够接收单击并触发响应事件 按钮单击时能同时触发多个响应事件 按钮可以有普通、悬停、单击、禁用等多个状态的不同表现 广泛的说，按钮的核心在于接收事件 2、创建按钮： 创建一个sprite，这个sprite将会是按钮的外形 选中这个sprite，然后为其添加Boxcollier,附加ButtonScript 在Sprit...
NGUI配合shader，把精灵图片置灰
linxinfa的专栏
01-27 809
方法一 图集的材质球的shader使用下面的shader脚本 Shader "Unlit/Transparent Colored (AlphaClip_r) " { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _AlphaTex ("Trans (A)", 2D) = "white...
NGUI 图片变灰 Shader
ykr168age的专栏
03-07 358
原理 将彩色图片映射到灰度的的一个过程，我们一般使用的颜色值一般rgb32位每个八位的，在Shader里面颜色被转换到[0-1]范围。根据人们的经验得到一个转换的比例是R:0.3 G:0.6 B:0.1 这个大概就是这个范围得到转换效果还不错。 关键代码 fixed4 frag(v2f IN) : SV_Target { fixed4 color = tex2D(_MainTex, ...
Unity3D开发(一)：NGUI Sprite效果变灰(按钮禁用状态)的解决方案
lixiang9166的博客
07-12 7293
博主逛csdn有几年的时间了，但每每都是遇到问题时，来寻找解决方案的情况居多，并未开通过博客，也未发过任何文章，随着自己从网上得到的帮助越来越多，本着回馈与共同进步的想法，遂开通博客，并将自己在日常开发中遇到的问题记录下来，供广大网友们参考与讨论。本人14年底因为项目需要随开始接触Unity3D引擎，博主一开始是用cocos2dx引擎开发手游，接触U3D后，发现确实U3D才是一套完整的手游开发解决方
NGUI Sprite灰化处理，很简单的一种方式
qijian7758的博客
02-25 1553
NGUI Sprite灰化处理，最近项目要用到，四处查资料，发现网上给的答案用起来都比较复杂，下面是自己偶然发现的一种方法 首先找到NGUI Sharder目标：Assets\NGUI\Resources\Shaders 打开Unlit - Transparent Colored.shader文件 把下面这段 fixed4 frag (v2f IN) : COLOR { return t
【Unity&Shader】NGUI实现图集变灰功能
BuladeMian的博客，菜得抠脚，菜得真实
12-22 1735
需求分析 直接调整Sprite或者Texture的Color值达不到美术所要的效果节省资源，为了实现去色效果，美术不必提供另外一张PS处理过后的图集，只需要程序修改shader动态处理即可怎么做修改NGUI使用的Shaders(新添加四个，为什么后文讲解)制作XX_Gary图集编写统一逻辑接口针对Sprite切换图集，针对UITexture切换Shader 修改NGUI使用的Sha
NGUI 图片变灰
weixin_30555125的博客
07-11 95
效果图 1、先准备好一个变灰shader。代码如下 Shader "Custom/Gray" { Properties { _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {} } SubShader { LOD 200 Tags { "Queue" = "Trans...
Unity NGUI PrefabStagePatching工具修复与UI可视化教程
1. Unity编辑器与NGUI的关系 Unity编辑器是开发Unity游戏和应用的主要界面，提供了场景编辑、资源管理等多种功能。NGUI是Unity的一个流行UI系统插件，提供丰富的UI组件和功能，如面板、按钮、滑动条等，用于创建和...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值