NGUI相关----UITexture图片边缘流光效果

7 篇文章 0 订阅
4 篇文章 0 订阅

写在前面

       文章来源为http://blog.csdn.net/blinkseed
        大概已经有两个星期没写文章了,中间又搞了几个效果,但完全没时间总结
        本人入行时间比较奇葩,本来新人都是一开始搞NGUI的,但我一开始就是搞实景,导致几乎对NGUI没了解,开始接触界面时顺水推舟就开始研究刚出生UGUI了。
        但NGUI依旧比较重要,在维护以前的Unity项目来说:-)

效果预览

    NGUI自带的透明shader效果:

    

    本文所教授的shader效果:


(高光在左上)


(高光在右上)

  源码说明

    源代码的shader部分是由NGUI所提供的Unlit/Transparent Colored修改的,你可以看到几乎一模一样的顶点着色器

Shader "Custom/Rimlight" 
{
	Properties
	{
		_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
		_angle("angle" , Range(0, 1)) = 0 //高光角度
		_RimLightColor("Rim Light Color",Color) = (1,1,1,0)//高光颜色
	}
	
	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;
			half4 _MainTex_TexelSize;
	        fixed _angle;
	        half4 _RimLightColor;
			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 IN) : COLOR
			{
			    fixed4 c = tex2D(_MainTex, IN.texcoord);
			    fixed2 TexOffset = _MainTex_TexelSize.xy;
			    c = c * IN.color;
			    //================遮罩部分============================
			    //坐标运算转为屏幕中心做二维坐标原点
			    float2 uv = IN.texcoord - float2(0.5,0.5);
                // 遮罩角度
                _angle = 6.284*(_angle-0.5); 
                //反算出像素点角度的Tan值
                float TanAngle = atan2(uv.y, uv.x);
                //角度与高光角度的差距
                float AngleDis = 1-saturate(abs(_angle - TanAngle));
                AngleDis += 1-saturate(abs(_angle - TanAngle-6.284));
                AngleDis += 1-saturate(abs(_angle - TanAngle+6.284));
                //寻找图片的边缘值,即alpha的边缘
                fixed a0 = tex2D(_MainTex, IN.texcoord + TexOffset ).a;
                fixed a1 = tex2D(_MainTex, IN.texcoord + TexOffset * fixed2 ( 1 , -1 ) ).a;
                fixed a2 = tex2D(_MainTex, IN.texcoord + TexOffset * fixed2 ( -1 , 1 ) ).a;
                fixed a3 = tex2D(_MainTex, IN.texcoord + TexOffset * fixed2 ( -1 , -1 ) ).a;
                fixed finala = abs(c.a * 4 - ( a0 + a1 + a2 + a3 ));
                AngleDis *= finala;
                // 打高光
                c += fixed4(_RimLightColor.rgb*AngleDis, 0);
				return c;
			}
			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
			Blend SrcAlpha OneMinusSrcAlpha
			ColorMaterial AmbientAndDiffuse
			
			SetTexture [_MainTex]
			{
				Combine Texture * Primary
			}
		}
	}
}

最后附上控制高光打转的代码

using UnityEngine;
using System.Collections;

public class ControlAngle : MonoBehaviour {
	public Material mat;//带有高光的材质球
	public float Rate = 0;//运转速率
	float NextTime = 0;//下一次轮回时间
	float angle;//运转角度
	// Use this for initialization
	void Start () 
	{
	   
	}
	
	// Update is called once per frame
	void Update () 
	{
	   if (NextTime <= Time.time) 
	   {
			NextTime = Time.time + Rate;
			angle = 0;
	   } 
	   else 
	   {
			angle = (NextTime - Time.time)/Rate;
	   }
		mat.SetFloat ("_angle",angle);
	}
}

最后的最后附上上述的源码 http://download.csdn.net/detail/blinkseed/9100731

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值