Post by KaiClavier in How do I do a gradient outline?

Viewing post in How do I do a gradient outline?

It's common in graphics design, but pretty rare for dialogue text in games! Have you seen the effect in another game? That might give me an idea on how it was implemented.

What is the effect going to be used for if you don't mind me asking? If it's something like short UI elements or decorative text, it'd be way more efficient to just render what you need in an art program and drag that into Unity... I can chase efficiency all I want, but I can't beat a .png when it comes down to it! (With raster-based text rendering, anyway!)

The only way I can think of doing it *now* (and didn't care too much about efficiency) is...

Set the outline colour to something to use for a chroma key (lets say green), and then have it so that text is on a layer that's only captured by a camera obeying that chroma key and replacing it with whatever you need.

amesaros72 days ago

Yes I guess that's true, haha. I stumbled upon this indie project randomly that has the effect I'm trying to achieve. Don't know the name, unfortunately: link

You'll notice letters have a 1-pixel thick purple-to-blue outline. The gradients are little irregular (notice how some of the numbers are mostly blue), which might hint at how it was done. Also we have a shine effect over the text in the input field , which I suspect is just a shader. And then lastly some special effects on the selected letter, which I'm not particularly concerned with.

I mainly wanted it for my character creation screen to make it more visually distinct from the other menu text, which may also include an on-screen keyboard. I'm hesitant to use raster-based graphics for a handful of reasons, but if that's how the above effect was achieved who am I to argue. I just feel like even if there's no practical way to have gradients built-in with the outline, there's gotta be some way to fake it by drawing a gradient image on top of the letter or set of letters and then masking it to only appear on the outline. I just don't know enough about masking as it relates to text or if I'd need some kind of shader to do it.

KaiClavier72 days ago (1 edit)

Oh, I see what you mean now! When you said gradient, I thought you meant in the way that the rainbow text STM has by default shows a gradient over space, not a gradient over time. *That* should for sure be possible to mod into a custom STM shader without needing to mask anything. I should have asked to see a sample sooner, that is indeed a cool use-case for a gradient outline!

Are you familiar with modifying shader code? What I'm thinking is basically... Set it up so the _OutlineColor variable is either a gradient or two values representing the colours you want (e.g. _OutlineColor1 _OutlineColor2), and then you use _Time.y and some math (Or _SinTime.w! Or a custom pingpong function...) to lerp between these values within either the vert or frag functions of the shader, where the shader normally just grabs _OutlineColor. I could code this for you if you send over your invoice number via email, but I think it could be a good learning experience to try it yourself!

amesaros72 days ago

Oh, well that's great news. Sorry, I forgot gradient could be interpreted a few different ways. I'll give it a try, but I certainly wouldn't turn down some help. I really only have experience with shader graph and even that's pretty spotty. So I've duplicated the "STM Ultra" shader as well as the "STMultra" shader include file. I updated the shader to include the new STMultra.cginc, and added a second outline color in the shader file: [ShowIf(EFFECT_OUTLINE)] _OutlineColor2 ("Outline Color 2", Color) = (0,0,0,1). I then updated my Super Text to use the new shader. Right now I'm trying to get the second outline color to appear in the inspector, which seems to be less straightforward than I thought. I'll keep at it, but if you think you could make the adjustment fairly easily I went ahead and sent you my invoice number. It would be cool to see gradient outlines as a built-in feature in the next update for other shader un-inclined people like myself.

KaiClavier72 days ago

Right, Super Text Mesh has a custom material viewer for editing material properties right in the editor (The code for this is within STMCustomInspectorTools.cs) but that's not needed to edit the material properties, you can edit it as if it's a normal material! (By clicking on the created material in the project window, and editing the properties in Unity's inspector)

I'll take my own try at it and email you that, but it sounds like you've basically got it! For the record, I wasn't going to edit the inspector code to get this working, myself... If I'm happy enough with the implementation, I may add it as a standard feature to the Ultra shader, but I'll have to test for performance efficiency

itch.io

Viewing post in How do I do a gradient outline?