shader graph outline for sprites, how do you stop the edges getting cut off?

Question

trying to do a simple 1px outline on sprites when you hover them, to show you can interact. shader graph in URP 2D. my approach: sample the main texture alpha 4 times with the UV offset by one texel up, down, left and right, add them up, subtract the original alpha, use that as the outline mask

it works... except the outline is cut off at the edges of the sprite. like the top of the characters head has no outline at all, and neither do the sides of the fence posts

texel size comes from the _MainTex_TexelSize property so that part seems right. what am i missing?

Tunde Adebayo · Answer

not a unity guy but when i had this in flutter shaders it was because the geometry ended exactly where the visible pixels ended, so there was nowhere to draw the outline. does unity crop the sprite mesh?

Jake Morrison · Answer

solved, posting for future me: 1. sprite import settings, Mesh Type: Full Rect instead of Tight. tight hugs the visible pixels so there are no fragments outside the art to draw the outline on 2. the sprite needs at least 1px of transparent padding in the texture. mine were cropped exactly to the art 3. if you use a sprite atlas, set padding to 2 or more or the neighbour sprite bleeds into your outline thanks tunde, rubber duck of the day

Mariana Costa · Answer

Nice detail for the hover state. Maybe also add a small prompt icon or label, a 1px outline is hard to see for some players.

shader graph outline for sprites, how do you stop the edges getting cut off?

Top answer

Jake Morrison

Get the best of #pixels-and-polygons weekly

Comments