Unity 2D Sprite Outline outer contour Effect

Operating system: Windows8.1

Graphics: Nivida gtx965m

Development tools: UNITY5.3.8F1

Unity provides 2D object sprite objects, but does not provide support for the outer contour outline effect, this time will use the extended version of the default sprite shader and a simple component to add the sprite outline. This can be used to highlight the sprite on the mouse, highlight elements in the environment, or simply make the Sprite stand out from the surrounding environment.

First, create a new shader named Sprite-outline in your project. This shader provides all the functionality of the default sprite shader and adds a sprite outline.

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#pragmaVertex vert#pragmaFragment Frag#pragmaMulti_compile _ pixelsnap_on#pragmaShader_feature Etc1_external_alpha#include"Unitycg.cginc"            structappdata_t {float4 vertex:position;                FLOAT4 Color:color;            FLOAT2 texcoord:texcoord0;            }; structv2f {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                returnOut ;            } sampler2d _maintex;            Sampler2d _alphatex;            FLOAT4 _maintex_texelsize; Fixed4 samplespritetexture (Float2 UV) {fixed4 color=tex2d (_maintex, UV); #ifEtc1_external_alpha//get the color from a external texture (Usecase:alpha support for ETC1 on Android)COLOR.A =tex2d (_alphatex, UV). R; #endif //Etc1_external_alpha                returncolor; } fixed4 Frag (v2f in): sv_target {fixed4 C= Samplespritetexture (In.texcoord) *In.color; //If Outline is enabled and there are 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; returnC; } ENDCG} }}

Now create a material named Spriteoutline and assign the newly created shader in the inspector.

Next, create a new C # script and name it spriteoutline. The component will process updates to our materials in the editor and at run time, turn off or turn on contour effects, and change the outline color. You can also use this component in animations to enable or disable the outlines of specific animation frames or to change the outline color.

usingUnityengine; [Executeineditmode] Public classSpriteoutline:monobehaviour { PublicColor color =Color.White; PrivateSpriterenderer Spriterenderer; voidonenable () {Spriterenderer= getcomponent<spriterenderer>(); Updateoutline (true); }    Private voidondisable () {Updateoutline (false); }    //Update is called once per frame    voidUpdate () {Updateoutline (true); }    voidUpdateoutline (BOOLoutline) {Materialpropertyblock block=NewMaterialpropertyblock ();        Spriterenderer.getpropertyblock (block); Block. SetFloat ("_outline", outline? 1f:0); Block. SetColor ("_outlinecolor", color);    Spriterenderer.setpropertyblock (block); }}

Now that the basic work is done, add some sprites to your scene. Change the material field of the Spriterenderer component to the Spriteoutline material created above. You will also need to add the Spriteoutline component to this game object to display the white outline by default. To hide an outline, simply disable or remove the component.

With all the finishes, you should now have a yellow outline of the genie. In the check view, you can change the color to any color you want, independent of the spriterenderer color. Custom shaders also maintain all existing features of the default sprite shader.

Done, Effect!

Unity 2D Sprite Outline outer contour Effect