NGUI sprite 变灰shader

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/konglingbin66/article/details/51880153

1.初衷

最近做一个装备的滚动条,需要将因为金钱不足不能购买的装备置灰,原来置灰是使用texture+shader,现在是使用sprite+shader,但是NGUI原有的sprite不具备添加shader的能力。为什么要用sprite,这样可以减少drawcall,提高一些效率。


2.置灰shader

shader就是在片段阶段时通过float grey = dot(col.rgb, float3(0.299, 0.587, 0.114)); 这句语句来实现灰化的,就是将顶点的像素与一个值进行点乘,来影响每个顶点的像素来呈现出整体灰化的效果。下面是参考网上大神给出的灰化shader代码:

Shader "Custom/MaskGray2" {
	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
			Fog { Mode Off }
			Offset -1, -1
			Blend SrcAlpha OneMinusSrcAlpha

			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag           
			#include "UnityCG.cginc"

			sampler2D _MainTex;
			float4 _MainTex_ST;

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

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

			v2f o;

			v2f vert (appdata_t v)
			{
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.texcoord = v.texcoord;
				o.color = v.color;

				return o;
			}

			fixed4 frag (v2f i) : COLOR
			{
				fixed4 col;   
				col = tex2D(_MainTex, i.texcoord);   
				col.rgb = dot(col.rgb, fixed3(.222,.707,.071));  

				return col;  
			}

			ENDCG
		}
	}
}
这个shader里面核心代码只有一句 col.rgb = dot(col.rgb, fixed3(.222,.707,.071));

3.给UISprite换材质

要给单独的UISprite更换材质,才不会影响通图集中的其他图片。

using UnityEngine;
using System.Collections;
using System;


public class UISprite_shader:UISprite
{
    protected UIPanel panelObj = null;
    protected Material GrayMaterial;
    /// <summary>
    /// ngui对Sprite进行渲染时候调用
    /// </summary>
    /// <value>The material.</value>
    public override Material material  
    {  
        get  
        {  
            Material mat = base.material;  

            if (mat == null)  
            {  
                mat = (atlas != null) ? atlas.spriteMaterial : null;  
            }  

            if (GrayMaterial !=null)  
            {  
                return GrayMaterial;  
            }  
            else  
            {  
                return mat;  
            }  
        }  
    }

    /// <summary>
    /// 调用此方法可将Sprite变灰
    /// </summary>
    /// <value>The material.</value>
    public void SetGray()  
    {
        Material mat = new Material(Shader.Find("Custom/MaskGray2"));
        mat.mainTexture = material.mainTexture;
        GrayMaterial = mat;

        RefreshPanel(gameObject); 
    }

    /// <summary>
    /// 隐藏按钮,setActive能不用尽量少用,效率问题。
    /// </summary>
    /// <value>The material.</value>
    public void SetVisible(bool isVisible)
    {
        if (isVisible)
        {
            transform.localScale =  new Vector3(1,1,1);
        }
        else
        {
            transform.localScale = new Vector3(0,0,0);
        }

    }

    /// <summary>
    /// 将按钮置为禁止点击状态,false为禁用状态
    /// </summary>
    /// <value>The material.</value>
    public  void SetEnabled(bool isEnabled)
    {
        if (isEnabled)
        {
            BoxCollider lisener = gameObject.GetComponent<BoxCollider> ();
            if (lisener)
            {
                lisener.enabled = true;
            }

            SetNormal();
        }
        else
        {
            BoxCollider lisener = gameObject.GetComponent<BoxCollider> ();
            if (lisener)
            {

                lisener.enabled = false;
            }

            SetGray();
        }
    }

    /// <summary>
    /// 将GrayMaterial置为null,此时会调用默认材质,刷新panel才会重绘Sprite
    /// </summary>
    /// <value>The material.</value>
    public void SetNormal()
    {
        GrayMaterial = null;
        RefreshPanel(gameObject); 

    }
    ///刷新panel,重绘Sprite 
    void RefreshPanel(GameObject go) 
    { 
        if (panelObj == null) 
        { 
            panelObj = NGUITools.FindInParents<UIPanel>(go); 
        }

        if (panelObj != null)  
        {  
            panelObj.enabled = false;  
            panelObj.enabled = true;  
        }  
    }
    
}
在SetGray()中,动态的创建了一个material并且赋值给Sprite,然后刷新panel时,在重绘这个Sprite时候,会调用material,这个时候,会返回我们创建好的GrayMaterial,在我们需要将Sprite恢复正常时候,仅需将我们的GrayMaterial置为null就行了。Shader "Custom/MaskGray2" 算是shader的目录吧,我个人理解啊,当给材质指定shader的时候,就是按照这个菜单来的。

我们实现功能的时候使用UISprite_shader,而不是原来的UISprite,如下图:



4.在ScrollView中添加clip shader

置灰之后的图片可以看到当灰色装备在ScrollView中,并且选中softClip选项时,灰色UISprite不会被剪裁,会超出边界。这是因为剪切也是shader实现的,但是该shader并不知道如何剪裁置灰的图片(我的个人理解啊)。NGUI的渲染都是通过UIDrawCall类进行的,通过断点发现(其实是别人发现的),当ScrollView进行遮罩时会在UIDrawCall的CreateMaterial()函数内进行动态换Shader操作:

if (panel != null && panel.clipping == Clipping.TextureMask)
		{
			mTextureClip = true;
			shader = Shader.Find("Hidden/" + shaderName + textureClip);
		}
		else if (mClipCount != 0)
		{
			shader = Shader.Find("Hidden/" + shaderName + " " + mClipCount);
			if (shader == null) shader = Shader.Find(shaderName + " " + mClipCount);

			// Legacy functionality
			if (shader == null && mClipCount == 1)
			{
				mLegacyShader = true;
				shader = Shader.Find(shaderName + soft);
			}
		}
		else shader = Shader.Find(shaderName);

通过上述代码可知,当为SoftClip状态下时,NGUI会自动给Sprite寻找名字为”Hidden/” + shaderName + ” ” + mClipCount的shader,显然,在Normal状态下,此时shader会变为NGUI自带的”Hidden/Unlit/Transparent Colored 1”,进入该shader后,我们会发现在frag()函数内有这么句代码col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);问题找到了,原来ScrollView是通过句代码来实现遮罩的,那么当我们将shader换成我们自己的shader时,首先在SoftClip下找不到一个叫”Hidden/MaskGray2 1”的shader进行替换,这时NGUI会强行换成默认状态的shader,因此,这就是导致我们上述问题的关键。

我的shader路径名是Shader "Custom/MaskGray2 1",匹配UIDrawcall中的CreateMaterial中的语句:

if (shader == null) shader = Shader.Find(shaderName + " " + mClipCount);

也可以是“Hidden/Custom/MaskGray2 1”,匹配上语句:

shader = Shader.Find("Hidden/" + shaderName + " " + mClipCount);


Shader "Custom/MaskGray2 1"
{
	Properties
	{
		_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
		_CutoffTex ("Cutoff (RGB), Alpha (A)", 2D) = "white" {}
	}

	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;
			sampler2D _CutoffTex;
			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) * IN.color;
				half4 alpha = tex2D(_CutoffTex, IN.texcoord);
				col = fixed4(col.rgb,alpha.a * col.a);
				col.rgb = dot(col.rgb, fixed3(.222,.707,.071));
				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就是把Shader "HIDDEN/Unlit/Transparent Colored 1"拷贝过来,这个是scrollView选中softClip之后的默认shader,然后在这个shader的frag语句中发现一条col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);,然后我们添加一条置灰的语句col = fixed4(col.rgb,alpha.a * col.a);,即可实现置灰UISprite被剪切的效果。

最终效果如下图:







参考:http://blog.csdn.net/lixiang9166/article/details/46851887

展开阅读全文

没有更多推荐了,返回首页