1. 程式人生 > >NGUI相關----UITexture圖片邊緣流光效果

NGUI相關----UITexture圖片邊緣流光效果

寫在前面

    文章來源為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

相關推薦

NGUI相關----UITexture圖片邊緣效果

寫在前面     文章來源為http://blog.csdn.net/blinkseed        大概已經有兩個星期沒寫文章了,中間又搞了幾個效果,但完全沒時間總結         本人入行時間比較奇葩,本來新人都是一開始搞NGUI的,但我一開始就是搞實景,導致幾乎對

Unity Shader-邊緣檢測效果(基於顏色,基於深度法線,邊緣效果,轉場效果

前言 週末通關了一個小遊戲,流程很短,6個小時左右就通關,但是遊戲的畫風,視角,玩法都比較新奇,對了,遊戲的名字也很奇特《12 Is Better Than 6》(12比6好是有什麼梗嗎?)。 遊戲採用的是俯視角,人物在活著的時候基本只能看到個帽子,玩法類似很早玩的《

Unity Shader 模型效果

gin coord 技術 mali pass pda class hit geo Shader "Custom/FlowColor" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _Flow

文字效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>文字流光效果</title> <script src="http://libs.baidu.com/j

【複習筆記】 cocos2d-x 2.x 渲染特效實現 八 效果

簡單來說,流光效果就是在貼圖上利用glowmap在原貼圖上的移動做動態的發亮效果,來讓貼圖看起來有光亮在移動。為了讓貼圖上的亮斑的排布看起來更加貼近自然,我們利用柏林噪聲來生成glowmap。事實上,二維或者三維的柏林噪聲在圖形學上有很多的應用,它可以用來描述很多自然的數學

unityShader物體表面效果

本文轉載自http://blog.csdn.net/lyh916/article/details/51831720 參考連結:http://liweizhaolili.blog.163.com/blog/static/162307442012726111843408/ 效果圖: 1.首先,匯入un

shader 效果

Shader "Custom/FlashUV" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _Layer1Tex("Layer1",2D) = "white"{} _Color("Color"

Unity3D開發(九):Unity3d效果

遊戲開發群:201276069 之前曾經注意過Material中紋理的屬性都有Tiling和Offset,但沒有深究過其用途,今天才知道竟然可以利用Offset做uv動畫,從而完成各種有趣的動畫,比如流光效果! 流過效果即通常一條高光光在物體上劃過,模擬高光移動照射物體

2D效果

Shader例項:2D流光 準備: 1.一張背景圖 2.一張流光圖 3.一張過濾圖 like this: 效果: 程式碼: 複製程式碼 Shader “Custom/2d_flow” { Properties {

Unity LOGO效果

之前寫過一篇LOGO流光的shader,原理幾乎是一樣的,今天我又翻出來優化了一下,為了讓效果看起來更有質感,不那麼突兀,或者說是不那麼直接的讓人看出來原理就是將一張斜著的作為流光的圖片放在上面移動,為此我做了一點改動。 我們讓流光劃過的位置呈現出一種凸起的樣

css3圖片效果

css3出來後,之前很多flash才能做的效果,現在甚至不用寫一句js,單純靠css3新增的屬性就能輕鬆實現! css3實現圖片頭像掃光高亮效果,原始碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

css實現滑鼠懸浮字型背景模糊效果

原文地址:→看過來 寫在前面 有的時候感覺寫點小玩意兒挺開心的,還能實踐很多的小知識點,所以這次學著寫了個有趣的滑鼠懸浮模糊效果,只使用了css額。 效果圖 原始碼地址→傳送門 預覽地址→傳送門 小知識點 filter: blur(

shader 和 +扭曲shader

針對 targe for 分享 posit stream ans dir sky 我認為這種shader能通過簡單的方式呈現出不錯的效果。 1.流光shader: Shader "Unlit/StreamShader" { //流光shader Prope

圖片的無縫滾動效果

-- adding margin image left offset mage lang cti 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

ajax抓取網站接口圖片瀑布筆記

ajax抓取網站接口圖片瀑布流筆記用php結合ajax來實現去其它網站抓取圖片,在自己本地用!ajax代碼部分<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

Unity3D 邊緣Shader

fall imp position int space pac com power 邊緣 Shader "Custom/NewShader" { Properties { _MainTex ("Base (RGB)", 2D) = "whit

swift3.0 圖片放大縮小動畫效果

manager data- 獲取 index ron ase set nis scale 一. 內容說明 跟我之前這篇類似,只不過那篇是OC版本,這篇是Swift版本 OC版本鏈接地址 目的:通過kingfisher請求5張圖片,展示出來。然後利用圖片放大縮小管

讓文字發出炫酷的效果

round 分享 bgp 發出 .com gre bsp mask ini .colorful { /* -webkit-mask-image: linear-gradient(to right, red, orange, yellow, green, cyan, b

transform復習之圖片的旋轉木馬效果

tex his log eight rspec 版本 旋轉木馬 image lis 效果示意圖 <!DOCTYPE><html><head><meta http-equiv="Content-Type" content="te

【unity實用技能】unity在遊戲中更換角色的shader,比如加個

無原本想著這個功能怎麽實現,剛好在項目裏看到這裏記錄一下。 首先項目的模型裏會有一個基本的Material,這個就是美術出給你的模型的材質。 可能有的需求是在遊戲中觸發一個事件,你身上加個流光或者描邊等效果。 我們知道這些效果如果要表現在身上,用特效是不好看的,要用Shader去表現。 這時候就需要你換一個S