Sprite Outline

Sprite Outline" shader in Unity by checking the sprite texture borders. This article explains how to create such effect using both Unity Shader Graph or HLSL. Read more!

Sprite Outline

In this “Unity Sprite Outline” tutorial we’ll discover how to create both a “Sprite Innerline” and a “Outer Sprite Outline”.
Simply, the Inner Sprite Outline shader is drawn “inside” the sprite, while “Outer” is the opposite

Read more about “Texture’s Texel Size” here.

0:00
/0:01

HLSL

Inner Sprite Outline HLSL

Shader "Unlit/InnerSpriteOutline HLSL"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
		_OutlineColor("Outline Color", Color) = (1,1,1,1)
    }
    SubShader
    {
		Tags
		{
			"RenderType" = "Transparent"
		}
 
		Blend SrcAlpha OneMinusSrcAlpha
 
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
 
            #include "UnityCG.cginc"
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
 
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
 
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float4 _MainTex_TexelSize;
 
			fixed4 _OutlineColor;
 
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
 
            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
 
				fixed leftPixel = tex2D(_MainTex, i.uv + float2(-_MainTex_TexelSize.x, 0)).a;
				fixed upPixel = tex2D(_MainTex, i.uv + float2(0, _MainTex_TexelSize.y)).a;
				fixed rightPixel = tex2D(_MainTex, i.uv + float2(_MainTex_TexelSize.x, 0)).a;
				fixed bottomPixel = tex2D(_MainTex, i.uv + float2(0, -_MainTex_TexelSize.y)).a;
 
				fixed outline = (1 - leftPixel * upPixel * rightPixel * bottomPixel) * col.a;
 
                return lerp(col, _OutlineColor, outline);
            }
            ENDCG
        }
    }
}

Outer Sprite Outline HLSL

To have achieve an “Outline” instead of an “Innerline”, just change the “outline” line (in the previous code snippet) into this:

fixed outline = max(max(leftPixel, upPixel), max(rightPixel, bottomPixel)) - col.a;

Amplify Shader

Inner Sprite Outline ASE

Outer Sprite Outline ASE

Febucci

Help us stay independent!

Make sure you never miss other content and help us stay independent and keep posting what we love. It's free! ♥️

Never miss any new post, from games, tools and what we notice in the industry in general
Our Unity, Godot, Game Art and Design learning notes
Help us reach you even if social medias change algorithms, die, AI takes over and suddenly no one knows what's real anymore..
Already have an account? Sign in

Deep dive

Almost five years ago I released a plugin called “Text Animator for Unity”, a tool I made/needed for my own games - and Today it is also getting used in other games like “Dredge, Cult of The Lamb”, “Slime Rancher 2” and many more!! I’d love if you could check it out! you’d also support us with this blog and new assets! ✨

Product callout image

Thanks so much for reading!