Looking for glow effect for sprites (mobile friendly)

Unity Engine
1

Hi Guys,

I’m looking for a material/shader I can apply to sprites (ideally both UI and non-UI sprites), that mimics Photoshop’s outer-glow effect. (Understandably it won’t recreate Photoshop’s outer glow exactly!)

2DxFX doesn’t appear to have a glow effect, just solid outlines. Same for Sprite Color FX.

Blend Mode does this apparently, but its $75 - looking for something cheaper. Also, only works on some mobile devices.

Glow Effect appears to be full-screen only, and I’m looking for per-sprite.

I haven’t tried MK Glow - but looks to be mesh-based.

Advanced Glow doesn’t have much of a description and some poor reviews. Doesn’t mention sprites anyway.

This Unity Answers post (“Make Sprites Glow” reference s"glow" provides a different (a nice shine) effect. Not what I’m looking for.

This Unity Forums post ("Create a Glowing effect for 2D sprites) hasn’t helped me, the Glow Per Object asset has a tiny description and a 2 star rating, so I’ve avoided it so far. Not obvious it setup for sprites or mobile.

This Unity forums thread (“free sprite flow shader”) refers to a Unity Technologies Bit Bucket 2D demo repo, but the link doesn’t work (I’m also new to BitBucket). Suspect it the relevant files may not be available now.

… …so I’m asking a common question, looking for new answers. I need something that

  • Works with sprites
  • Provides an outer glow (soft, faded edge, expanding from the edge of the sprite (not a solid stroke))
  • Works on mobile (I will be applying it to 128x128 sprites, so the per-pixel cost should be fairly low)
  • Doesn’t need to be free, but preferable <$25

Does anyone have any experience of existing assets or techniques to help me? If I’ve been unfair or misunderstood any of the assets linked above, please correct me!

2

Glow effect is actually per object so it will probably be your best bet.

3

The problem with outer glow is it’s a very expensive effect to reproduce in real time, and worse the way sprites work the glow can only extend as far as the sprite’s mesh, which is usually fairly tight to the sprite, and can bleed glows from the surrounding sprites packed in the sprite atlas too close, hence why the outline effect that is common is usually only a pixel or two wide.

The easiest way to do a outer glow like Photoshop is going to be to an outer glow in Photoshop. It wouldn’t be too hard to just have the glow just in the alpha channel and a fairly simple shader to use that alpha in a way to allow for it to show as a glow. Obviously requires some setup, but doesn’t have the issues a purely shader based approach would have.

2 Likes
4

Here’s a quick shader and example sprite (grabbed from this thread, don’t know the original author http://forum.unity3d.com/threads/2d-samurai-and-ninja-character-sprite.240425/ )

Shader "Sprites/Cheap Outer Glow"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        _GlowScale ("Glow Scale", Range(0,1)) = 1
        _GlowColor ("Glow Color", Color) = (1,1,1,1)
        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
    }

    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 target 2.0
            #pragma multi_compile _ PIXELSNAP_ON
            #pragma multi_compile _ 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;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(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;

            fixed _GlowScale;
            fixed4 _GlowColor;

            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;

                // Use alpha assuming glow is a gradient from 0.0 to ~0.75% alpha, and the rest is the sprite.
                fixed spriteAlpha = saturate(c.a * 4.0 - 3.0);
                fixed glowAlpha = saturate(1.0 - (1.0 - c.a / 0.75) / max(_GlowScale, 0.01)) * saturate(_GlowScale * 32.0);
                c.a = max(spriteAlpha, glowAlpha * _GlowColor.a);
                c.rgb = lerp(_GlowColor.rgb, c.rgb, 1.0 - (1.0 - saturate(spriteAlpha / max(_GlowColor.a, 0.01))) * saturate(_GlowScale * 32.0));

                c.rgb *= c.a;
                return c;
            }
        ENDCG
        }
    }
}

2791841--202438--glowSprite.png

The sprite was generated by using an outer glow with precise settings and an alpha of 75%. That value is important for the shader to work properly. A softer outer glow will work too, but it won’t scale as nicely.

6 Likes
5

is it possible to use this with lighweight pipeline?

6

What does that actually mean?

7

Umm that’s kind of what the whole post after that is about …

8

what about this one?

1 Like
9

That draws a super bright outline around the sprite, then lets the bloom post process do the glow. Post processing can be very slow on mobile. The above technique doesn’t require any post processing.

1 Like