minionsart
patreon
Shader Graph: Sprite Outline Effects
🕑 Added 2020-05-29 10:11:36 +0000 UTCHey all!
Here is finally the sprite shader outline effect for Shader Graph. The Code version is from a while back now. But with last weeks Clean Navmesh map tutorial also using the shader, I wanted to add it quickly.
I haven't tried to see if the Navmesh Map setup works in URP, but I think it should. I will make a separate package for URP users for that tutorial if it works :)
The graph files for the outline and versions, and the subgraph are attached. Don't forget the subgraph before using the outline graphs!
Sprite Outline
Create a new Sprite Shader (Create>Shader>2D Renderer> Sprite Unlit Graph)
First off add the MainTexture(the Sprite).
I assigned a picture in the texture slot so it's easier to see what's going on
Create a new Sample Texture 2D node, and a new Texture 2D Asset. Convert the Texture 2D Asset as a property, and make sure the Reference is "_MainTex".
Untick Exposed as this sprite will be handled by the Sprite Renderer on the GameObject.
If you create a new Sprite in the scene view, and assign a material with this shader, it should look like a normal sprite, no changes from having no material.
Outline via UV offset
To create the outline we need to offset the UV of the main texture, into 4 directions.
Let's start by just going left.
Create a UV node, Split it because we only need xy, and add a new Vector2 node with the X set to a new Vector1 property for Outline Width.
Adding this result to the main textures gives you a second version next to it. Notice that the second version is limited by the shape of the sprite.
You can change this by going to the Sprite Import settings, and changing the Mesh Type to Full Rect. Now we have the full sprite surface to play with.
At the moment, we're using the full RGBA of the offset texture, but we only need the alpha value. So attach the A of the Sample Texture.
Subgraph
This was the left side, that leaves the right, top, and bottom sides.
To make this easier, we're going to put the UV offset into a SubGraph
Select all these nodes(exclude the Vector2 at bottom), and right-click > Convert to Sub-Graph. Name something like UVOffset
Group the Width to Vector2 to UVOffset-Subgraph together, and copy it 3 times for the right, top, and bottom.
The right will have a Negate node after the Width, and top and bottom have the same setup but going to the Y value of the Vector2.
Add all these nodes together.
There is one more step needed to get the outline, remove the original alpha. Take the original Alpha, invert it via One Minus, and Multiply it with the Left,Right,Top,Bottom result.
And that's the outline done! You can see that if you go too wide, the 4 sides clearly split up. But for a small outline it looks great :)
Adding Color
To add color, create a new Color Property, and multiply it with the outline result, before it gets added to the Main Sprite texture.
That's the main tutorial done, let's quickly add some extras!
Adding Texture and Scrolling
Add a Time node, and 2 Vector1 properties for scrolling Speed X and Y. Put this into a new Vector2 and plug into an Tiling and Offset node into a new texture sampler.
Also add a Vector1 property for Scale into the Tiling slot.
Adding Firey Aura effect
Cut off the pattern using a Step function before adding in the color. For a bit more depth in the outline, add the pattern back in with an opacity Multiplier
Some Settings;
Thanks for reading!
