Unity3D —— NGUI染色遮罩Shader

简述：
遮罩的意思是指对原图被遮住的部分进行一定的处理，这里使用最简单的处理就是染色，所以我们需要创建一个遮罩层，通常使用另一个图片来作为遮罩层，也就是mask图。

---

一、mask图的作用：

跟UITexture使用的图片尺寸大小必须一致，将原图中需要被遮住（染色）的部分的位置在mask图中对应位置用纯色（例如：绿色（三原色的一种））涂满，学过flash动画的应该知道遮罩动画的原理，mask图其实就是一个遮罩层。

---

二、shader的实现思路：

其实就是获取原图 UITexture 上的每个像素点，然后根据坐标位置去获取 mask 图 UITexture 对应位置上指定颜色值的有无，然后乘以透明度（.a 属性），例如：mask 图为绿色，这获取 mask 图像素点的 .g 属性值，加入不为 0，则该像素点要染色，否则则不染色，具体该像素点要染成什么颜色可以通过变量传给 shader 。

---

三、实例：

下面是一个染色 shader 的代码：

Shader "Micro/TransparentMasked" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_MaskTex ("Base (RGB)", 2D) = "white" {}
		_MyColor ("MyColor", Color) = (0,0,1,1)
	}
	
	Category
	{	
		Tags {"Queue"="Transparent" "IgnoreProjector"="True"}
		Lighting Off
		ZWrite On
		Blend One Zero
		SubShader {
			Pass {
				CGPROGRAM
				#pragma vertex vert_img
				#pragma fragment frag
	
				#include "UnityCG.cginc"
	
				uniform sampler2D _MainTex;
				uniform sampler2D _MaskTex;
				float4 _MyColor;
	
				float4 frag(v2f_img i) : COLOR 
				{
					float4 layer = tex2D(_MainTex, i.uv);					
					float4 mask = tex2D(_MaskTex, i.uv);
									
					float4 returnColor = layer;

					float gValue = max(0 ,mask.g - mask.b) * mask.a;

					returnColor = (returnColor * (1 - gValue)) + (_MyColor * returnColor) * gValue;

					returnColor.a = layer.a;
					return returnColor;
				}
				ENDCG
			}
		}
	}
}

1.输入声明：

首先是输入的声明，这里我们需要明确进行此操作所需的输入有：原图（Texture）、遮罩图（Texture）、目标染色色值（float4），即可声明如下：

				uniform sampler2D _MainTex;
				uniform sampler2D _MaskTex;
				float4 _MyColor;

2.处理函数：

关键部分在于每个像素点处理函数部分代码：

float4 frag(v2f_img i) : COLOR 
				{
					float4 layer = tex2D(_MainTex, i.uv);					
					float4 mask = tex2D(_MaskTex, i.uv);
									
					float4 returnColor = layer;

					float gValue = max(0 ,mask.g - mask.b) * mask.a;

					returnColor = (returnColor * (1 - gValue)) + (_MyColor * returnColor) * gValue;

					returnColor.a = layer.a;
					return returnColor;
				}

3.源码解析：

接下来我们进行逐句解析：

• 首先，我们需要将两张图片传入到shader中，用两个float4四元矩阵layer和mask来保存图片数据，每个像素点的数据都是一个float4值，即表示（r,b,g,a）——>（红，绿，蓝，透明度），其中layer是原图层，mask为遮罩层；
• 通过float gValue = max(0 ,mask.g - mask.b) * mask.a;获得该像素点是否染色的状态；
• 计算每个像素点染色之后的结果returnColor = (returnColor * (1 - gValue)) + (_MyColor * returnColor) * gValue;，计算得到每个像素点的输出值；
• 透明度与原图保持一致returnColor.a = layer.a;。

---

四、Unity实践：

• 1.新建一个 Shader 文件，步骤：在 Project 窗口中 右键->Create->Shader，内容为上边的源码，命名为MaskColor.shader：
  

• 2.导入两张图片，原图和 mask 图：
  

• 3.新建一个材质球，步骤：在 Project 窗口中 右键->Create->Material，取名为选中 MaskColor.mat，选中次材质球，将其Shader修改为我们刚刚创建的 MaskColor.shader：
  
  假如一切正常，更改后选中该材质球，在Inspecteor窗口查看其属性可以看到：
  

• 4.将 Avatar.png 拖入到材质球的第一个 Texture 中，将 Avatar_mask.png 拖入到材质球的第二个 Texture 中，修改 MyColor 的色值，这个色值就是我们的遮罩目标染色值，可以在预览窗口看到染色结果：
  

• 5.为了更加直观地观察到染色结果，可以使用 NGUI 在场景中创建一个 UITexture，将 MaskColor.mat 拖到其 Material 属性中，即可在 Game 视窗中看到结果：
  

• 6.加入要动态修改染色的颜色，通过代码对 MyColor 属性进行赋值：

  using UnityEngine;
  using System.Collections;
  
  public class TestColor : MonoBehaviour {
      public UITexture texture;
      // Use this for initialization
      void Start () {
          //染成紫色
          texture.material.SetColor ("_MyColor", new Color(0.619f, 0.431f, 0.717f));
      }
  }
  

  得到新的染色结果:
  

  最终资源文件结构：
  

补充：

其实，Shader 中的图片也是可以通过代码动态替换的，将散图放在 Resources 文件夹下，然后通过 Resources.Load(资源路径); 进行动态获取，然后通过材质的方法 material.SetTexture 进行赋值。