TextMesh Pro TMPro: Draw (external) outline before faces

I'm working on a mobile in which we want outlines. Specifically, we want the outlines to be "external" to make the text pop. In addition, we don't want characters to overlap one another. In other words, rendering the outline before the faces such that the outline will always be completely behind the faces.

After trying out various settings with TMPro, it doesn't seem like there is a simple way to achieve this other than creating 2 TextMeshProUGUI components for each single text. (outline version + face version) Sadly, doing this is very inefficient and requires a lot of rendering performance, so I would much prefer being able to achieve the same effect with just one component.

I almost can't believe there is no such effect in TMPro, as there are a lot more effects in there that Unity doesn't over. At the same time, Unity's outline exactly what we want! (excl. text + outline performance for instance )

Because of that, I feel like I'm missing something obvious... Is there a setting for this? If not, is it possible to make a custom implementation for it without having the source code? We were able to create our own outline for unity's text system using BaseMeshEffect.

I added 2 images that I hope make it clear what I'm talking about. The first image is what happens when using underlay, because every face is drawn first you see overlap between characters. (geometry sorting determining which way they overlap) The second image shows the effect we want, but uses two textmesh components.

 

Any news on this front? Could definitely use this functionality to apply FX per block of text instead of per character.

 

Any news on that front?

 

Any news? Been looking forward to a proper solution to this for a loooong time.

 

We'd also still love to have this by the way

 

Ditto bump. Our style guide uses nice plump text outlines but these overlap unless we space characters too far apart.

 

Bump! Any news @Stephan_B ?

 

That's sounds promising! Being able to make our own shaders for tmpro will UNLEASH the possibilities, I can't wait to play with it. Will it have per letter UVs? This will finally open the world of custom text (apart from the already made effects, lit outline or lit things that are already there).

Good news about per word outline, we have this specific issue in our internal project, where we want quite close letters but with some outline, and that's not possible right now because of letters overlapping.

Thank you for sharing inside dev updates, it's really kind of you!

 

Hi, any news about this feature ?

 

I would also like some idea on when this is coming, if at all. Ideally not tied into the SRPs as we're localising apps using the built-in pipeline, and the current outline implementation makes adding outlines to more flowing languages very difficult.

 

+1 we also need this feature on translated text!

 

I'm also waiting for the new text system for the improved outlines

 

Outlines for pixel-fonts is an absolute pain, please say this is coming soon.

 

This was something initially being looked at for 30-60 days from January 2020... I know it's been a rough year, but this is getting a little silly. Is there any update at all on this?

 

Any updates on this issue? Our artist is really upset that she can not see the same result in Unity and Photoshop.

 

So, I wrote a shader to draw the outline externally but the problem I found was the outline was cropped by character's area and this is not controlled by shader but controlled by TMP directly, so in order to solve I need to do two steps:

1. First generate a new font and be sure you increase the padding size for the Atlas (explained why below), in my case I had padding 5 and increased to 20 to have a decent effect.
2. Use the custom shader attached here. (Path:
   TextMeshPro/Mobile/Distance Field External Outline)

That's it, should make the effect to work like this:

Explanation: A new Atlas is required because TMP calculates the area of the character based on size the character has on Atlas, so by simply adding padding to it you will see the outline already been drawn outside, the problem now is: the area of each character may cross the boundaries of the next char so some letters won't look great, so to fix it some people were using another text on top of that so the characters would be properly drowned.
Then the reason to use this custom shader is to make a more elegant approach for this solution, what the shader is doing is to draw the text with outline and a second one on top without outlines.

Tip: Increasing the padding will decrease the font's Point Size, pay attention on it to have a crispy font, if the point size is below 70 increase the Atlas resolution and generate again.

Tip 2: Do not generate a new Atlas for an existent font instead of generating a new font because you will break all texts using the old Atlas.

 

In case you need to use a texture (i.e. not Mobile optimised) here is the shader, remember to follow the steps from my previous post to increase the font padding.

 

Hello! First of all thank you very much for the shader. Is incredible! I had been looking for a way to achieve this result with TextMeshPro for quite some time.

I would also like to ask if it would be possible to modify it so that when using a color with an alpha channel, the entire set of the external line will be shown in a single tone without any type of overlapping color tones.



Thanks a lot!!!

 

Works great! However, seems to throw an error whenever a property is adjusted:

 

Hi, i'm having issues with your shader, when using the mobile shader you uploaded, i get the outline working only in the outside but each character still overlaps the others around and when using the not mobile shader it works exactly as the default distance field shader of textmeshpro, not only extenal outline and still overlapping

 

I also tried this shader and it doesn't seem to be doing what it's intended to do... I'm using a 96 point size font with outline at max and it looks like this.

 

I had the same problem at first. I played with settings a little bit and found a solution.

In the TMP_Font Asset inspector, if you change the "Atlas Population Mode" to "Dynamic" and the "Atlas Render Mode" to SDF8 (or 16 or 32), you can then change the "Sampling Point Size" until it fits what you want.

I hope it helps.