Unity 一个好用的UI灰度Shader

引言

在unity日常项目的开发过程中，经常会遇到这种情况，显示按钮不可点击，最简单的方式，直接将Button的Interactable改为false，但是UI表现效果不是很好。我们可以考虑重新制作一个灰度的UI，如果这种需求比较多的情况下，就需要制作很多的图片，这时候可以考虑使用灰度shader来替代，如果追求UI画质，还是重新制作新的图片比较好。

Shader

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Common/UI/UIGray"
{
	Properties
	{
		[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
		_Color("Tint", Color) = (1,1,1,1)

		_StencilComp("Stencil Comparison", Float) = 8
		_Stencil("Stencil ID", Float) = 0
		_StencilOp("Stencil Operation", Float) = 0
		_StencilWriteMask("Stencil Write Mask", Float) = 255
		_StencilReadMask("Stencil Read Mask", Float) = 255

		_ColorMask("Color Mask", Float) = 15

		[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
		//-------------------add----------------------  
		[Toggle(UNITY_UI_GRAYSCALE)] _UseUIGrayScale("Use Gray Scale", Float) = 1
		//-------------------add----------------------  
	}

		SubShader
	{
		Tags
	{
		"Queue" = "Transparent"
		"IgnoreProjector" = "True"
		"RenderType" = "Transparent"
		"PreviewType" = "Plane"
		"CanUseSpriteAtlas" = "True"
	}

		Stencil
	{
		Ref[_Stencil]
		Comp[_StencilComp]
		Pass[_StencilOp]
		ReadMask[_StencilReadMask]
		WriteMask[_StencilWriteMask]
	}

		Cull Off
		Lighting Off
		ZWrite Off
		ZTest[unity_GUIZTestMode]
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask[_ColorMask]

		Pass
	{
		CGPROGRAM
#pragma vertex vert  
#pragma fragment frag  

#include "UnityCG.cginc"  
#include "UnityUI.cginc"  

#pragma multi_compile __ UNITY_UI_ALPHACLIP  
		//-------------------add----------------------  
#pragma multi_compile __ UNITY_UI_GRAYSCALE  
		//-------------------add----------------------  

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

	struct v2f
	{
		float4 vertex   : SV_POSITION;
		fixed4 color : COLOR;
		half2 texcoord  : TEXCOORD0;
		float4 worldPosition : TEXCOORD1;
	};

	fixed4 _Color;
	fixed4 _TextureSampleAdd;
	float4 _ClipRect;

	v2f vert(appdata_t IN)
	{
		v2f OUT;
		OUT.worldPosition = IN.vertex;
		OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

		OUT.texcoord = IN.texcoord;

#ifdef UNITY_HALF_TEXEL_OFFSET  
		OUT.vertex.xy += (_ScreenParams.zw - 1.0)*float2(-1,1);
#endif  

		OUT.color = IN.color * _Color;
		return OUT;
	}

	sampler2D _MainTex;

	fixed4 frag(v2f IN) : SV_Target
	{
		half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

		color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

#ifdef UNITY_UI_ALPHACLIP  
		clip(color.a - 0.001);
#endif  
		//-------------------add----------------------  
#ifdef UNITY_UI_GRAYSCALE  
		color.rgb = Luminance(color.rgb);
#endif        
		//-------------------add----------------------  
		return color;
	}
		ENDCG
	}
	}
}

使用方法

1、创建一个Material，使用此shader

2、将Material指定给对应Image的Material就可以了。

如果有更好的方法，欢迎大家来讨论。