Tip: Here's a hack to improve TMP text quality at smaller on-screen sizes.

When rendering small text, TMPro can be a little aggressive when cropping quads, resulting in ugly thin lines at the edges of some characters:

6107655--664887--upload_2020-7-20_2-40-17.png
6107655--664890--upload_2020-7-20_2-41-22.png
Here the l in bagel really ought to have another pixel of width, but TMPro crops it too aggressively.

This can be worked around by adding a small amount of softening and a small amount of fully transparent outline:

6107655--664893--upload_2020-7-20_2-43-41.png

This tricks TMPro into making the polygons an extra pixel or two across, which creates a much more pleasing result:

6107655--664896--upload_2020-7-20_2-45-16.png
6107655--664899--upload_2020-7-20_2-46-35.png
However, this comes at the expense of crispness when fonts are rendered very large. I would post a picture but 5 is the limit.

What I ended up doing was hacking the shader (in this case the mobile version) as follows:

float hackout = _OutlineWidth + (0.121*(min(20.0pixelSize.x, 1.0) - 1.0));
float hacksoft = _OutlineSoftness + (0.078
(min(20.0*pixelSize.x, 1.0) - 1.0));

scale /= 1 + (hacksoft * _ScaleRatioA * scale);
float bias = (0.5 - weight) * scale - 0.5;
float outline = hackout * _ScaleRatioA * 0.5 * scale;

The upshot is that when zoomed in a lot, the shader code above ‘undoes’ the little bit of softening and outline set in the material, but leaves it in place when the text is small on-screen.

Hope that’s some use for someone :slight_smile:

You can enabled Extra Padding in the Extra Settings panel of the Text Component.

Having said that, at some point a custom implementation of Conservative Rendering will be added to shaders to automatically handle this.

Or you could do that. :smile:

6107688--664911--upload_2020-7-20_3-11-24.png

Side by side I think the hacked version still looks ever so slightly nicer in a couple of places, but it’s no longer the night-and-day difference that made it worth the trouble. Thanks!