Unity 实用教程之 UI界面变灰色灰化效果实现
1、打开Unity，新建一个空工程，具体如下图
2、在场景中添加一个 Image，并设置为绿色，具体如下图
3、在工程中，新建一个 材质 和一个 Shader，并把材质的Shader设置为新建的Shader，其中 Shader的代码如下图
4、ImageGreyShader 的具体内容如下：
Shader "Custom/ImageGreyShader" {
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
}
SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
// 源rgba*源a + 背景rgba*(1-源A值)
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
half2 texcoord : TEXCOORD0;
};
sampler2D _MainTex;
fixed4 _Color;
v2f vert(appdata_t IN)
{
v2f OUT;
OUT.vertex = UnityObjectToClipPos(IN.vertex);
OUT.texcoord = IN.texcoord;
#ifdef UNITY_HALF_TEXEL_OFFSET
OUT.vertex.xy -= (_ScreenParams.zw-1.0);
#endif
OUT.color = IN.color * _Color;
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
float grey = dot(color.rgb, fixed3(0.22, 0.707, 0.071));
return half4(grey,grey,grey,color.a);
}
ENDCG
}
}
}
5、在工程中新建一个脚本 Test，双击脚本，进行代码编辑，具体如下图
6、Test 脚本的具体内容如下：
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour {
public GameObject imageGo;
public Material imageGrey;
private bool isGrey = false;
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
if (Input.GetKeyDown (KeyCode.A)) {
if (imageGo != null && imageGrey != null && isGrey == false) {
imageGo.GetComponent <Image>().material = imageGrey;
isGrey = true;
}else if (imageGo != null && imageGrey != null && isGrey == true) {
imageGo.GetComponent <Image>().material = null;
isGrey = false;
}
}
}
}
7、脚本编译正确后，回到Unity界面在场景中新建一个 GameObject，把脚本 Test，挂载上去，并把新建的 材质 和 Image 赋值给脚本，具体如下图
8、运行场景，按下 A 键， Image 变灰和变绿切换，具体如下图
9、到此，《Unity 实用教程之 UI界面变灰色灰化效果实现》讲解结束，谢谢