操作系统: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) = (,,,)
[MaterialToggle] PixelSnap ("Pixel snap", Float) = // Add values to determine if outlining is enabled and outline color.
[PerRendererData] _Outline ("Outline", Float) =
[PerRendererData] _OutlineColor("Outline Color", Color) = (,,,)
} 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 > && c.a != ) {
// Get the neighbouring four pixels.
fixed4 pixelUp = tex2D(_MainTex, IN.texcoord + fixed2(, _MainTex_TexelSize.y));
fixed4 pixelDown = tex2D(_MainTex, IN.texcoord - fixed2(, _MainTex_TexelSize.y));
fixed4 pixelRight = tex2D(_MainTex, IN.texcoord + fixed2(_MainTex_TexelSize.x, ));
fixed4 pixelLeft = tex2D(_MainTex, IN.texcoord - fixed2(_MainTex_TexelSize.x, )); // If one of the neighbouring pixels is invisible, we render an outline.
if (pixelUp.a * pixelDown.a * pixelRight.a * pixelLeft.a == ) {
c.rgba = fixed4(, , , ) * _OutlineColor;
}
} c.rgb *= c.a; return c;
}
ENDCG
}
}
}

现在创建一个名为SpriteOutline的材质,并在检查器中分配新创建的着色器。

[ShaderStaff] Sprite Outline外轮廓效果-LMLPHP

接下来创建一个新的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 : );
block.SetColor("_OutlineColor", color);
spriteRenderer.SetPropertyBlock(block);
}
}

现在,基本工作完成了,添加了一些精灵到你的场景。 将SpriteRenderer组件的材质字段更改为上面创建的SpriteOutline材质。 您还需要将SpriteOutline组件添加到此游戏对象中,以默认显示白色轮廓。 要隐藏轮廓,只需禁用或删除组件。

[ShaderStaff] Sprite Outline外轮廓效果-LMLPHP

随着所有的完成,你现在应该有一个黄色轮廓的精灵。 在检查view中,您可以独立于SpriteRenderer颜色将颜色更改为任何您想要的颜色。 自定义着色器还维护默认sprite着色器的所有现有功能。

[ShaderStaff] Sprite Outline外轮廓效果-LMLPHP[ShaderStaff] Sprite Outline外轮廓效果-LMLPHP

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

05-12 09:13