1. 程式人生 > >Unity之2D Sprite Outline外輪廓效果

Unity之2D Sprite Outline外輪廓效果

mono -o 著色器 queue 開發工具 啟用 avi unity5 顯卡

操作系統:Windows8.1

顯卡:Nivida GTX965M

開發工具:Unity5.3.8f1


Unity提供了2D Object Sprite對象,但是沒有提供外輪廓Outline效果的支持,本次將會使用擴展版本的默認sprite著色器以及一個簡單的組件來添加sprite的輪廓。這可以用於突出鼠標上的精靈,突出顯示環境中的元素,或僅僅使精靈從周圍環境中脫穎而出。

首先,在您的項目中創建一個名為Sprite-Outline的新著色器。 這個著色器提供了默認sprite著色器的所有功能,並添加了sprite輪廓。

Shader "Sprites/Outline"
{
    Properties
    {
        [PerRendererData] _MainTex (
"Sprite Texture", 2D) = "white" {} _Color ("Tint", Color) = (1,1,1,1) [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0 // Add values to determine if outlining is enabled and outline color. [PerRendererData] _Outline ("Outline", Float) = 0 [PerRendererData] _OutlineColor(
"Outline Color", Color) = (1,1,1,1) } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" } Cull Off Lighting Off ZWrite Off Blend One OneMinusSrcAlpha Pass { CGPROGRAM
#pragma vertex vert #pragma fragment frag #pragma multi_compile _ PIXELSNAP_ON #pragma shader_feature ETC1_EXTERNAL_ALPHA #include "UnityCG.cginc" struct appdata_t { float4 vertex : POSITION; float4 color : COLOR; float2 texcoord : TEXCOORD0; }; struct v2f { float4 vertex : SV_POSITION; fixed4 color : COLOR; float2 texcoord : TEXCOORD0; }; fixed4 _Color; float _Outline; fixed4 _OutlineColor; v2f vert(appdata_t IN) { v2f OUT; OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex); OUT.texcoord = IN.texcoord; OUT.color = IN.color * _Color; #ifdef PIXELSNAP_ON OUT.vertex = UnityPixelSnap (OUT.vertex); #endif return OUT; } sampler2D _MainTex; sampler2D _AlphaTex; float4 _MainTex_TexelSize; fixed4 SampleSpriteTexture (float2 uv) { fixed4 color = tex2D (_MainTex, uv); #if ETC1_EXTERNAL_ALPHA // get the color from an external texture (usecase: Alpha support for ETC1 on android) color.a = tex2D (_AlphaTex, uv).r; #endif //ETC1_EXTERNAL_ALPHA return color; } fixed4 frag(v2f IN) : SV_Target { fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color; // If outline is enabled and there is a pixel, try to draw an outline. if (_Outline > 0 && c.a != 0) { // Get the neighbouring four pixels. fixed4 pixelUp = tex2D(_MainTex, IN.texcoord + fixed2(0, _MainTex_TexelSize.y)); fixed4 pixelDown = tex2D(_MainTex, IN.texcoord - fixed2(0, _MainTex_TexelSize.y)); fixed4 pixelRight = tex2D(_MainTex, IN.texcoord + fixed2(_MainTex_TexelSize.x, 0)); fixed4 pixelLeft = tex2D(_MainTex, IN.texcoord - fixed2(_MainTex_TexelSize.x, 0)); // If one of the neighbouring pixels is invisible, we render an outline. if (pixelUp.a * pixelDown.a * pixelRight.a * pixelLeft.a == 0) { c.rgba = fixed4(1, 1, 1, 1) * _OutlineColor; } } c.rgb *= c.a; return c; } ENDCG } } }

現在創建一個名為SpriteOutline的材質,並在檢查器中分配新創建的著色器。

技術分享

接下來創建一個新的C#腳本並將其命名為SpriteOutline。 該組件將在編輯器和運行時處理更新我們的材質,關閉或打開輪廓效果,還可以更改輪廓顏色。 也可以在動畫中使用此組件,以啟用或禁用特定動畫幀的輪廓或更改輪廓顏色。

using UnityEngine;

[ExecuteInEditMode]
public class SpriteOutline : MonoBehaviour {

    public Color color = Color.white;

    private SpriteRenderer spriteRenderer;

    void OnEnable () {
        spriteRenderer = GetComponent<SpriteRenderer>();

        UpdateOutline(true);
    }

    private void OnDisable()
    {
        UpdateOutline(false);
    }

    // Update is called once per frame
    void Update () {
        UpdateOutline(true);
    }

    void UpdateOutline(bool outline)
    {
        MaterialPropertyBlock block = new MaterialPropertyBlock();
        spriteRenderer.GetPropertyBlock(block);
        block.SetFloat("_Outline", outline ? 1f : 0);
        block.SetColor("_OutlineColor", color);
        spriteRenderer.SetPropertyBlock(block);
    }
}

現在,基本工作完成了,添加了一些精靈到你的場景。 將SpriteRenderer組件的材質字段更改為上面創建的SpriteOutline材質。 您還需要將SpriteOutline組件添加到此遊戲對象中,以默認顯示白色輪廓。 要隱藏輪廓,只需禁用或刪除組件。

技術分享

隨著所有的完成,你現在應該有一個黃色輪廓的精靈。 在檢查view中,您可以獨立於SpriteRenderer顏色將顏色更改為任何您想要的顏色。 自定義著色器還維護默認sprite著色器的所有現有功能。

技術分享技術分享

大功告成,效果如圖所示!

Unity之2D Sprite Outline外輪廓效果