UI Definition Optimisation

Daniele
2 min readFeb 25, 2022

Font crispness and Textmeshpro

FAQ on TMP including link to creation video:

https://forum.unity.com/threads/useful-information-download-links.458634/#post-7347818

TMP should work on both Screen Space Camera and Screen Space Overlay however as UI Vector Graphics (SVG) only work in Screen Space Camera I have used this as Canvas render mode.

In Screen Space Camera TMP will look blurred if any camera antialiasing is turned on (https://forum.unity.com/threads/camera-space-blurry-text.1115608/). There are other recommendations on the forums reagarding SDF shaders and TMP generation best practices but applying all of those while PP was on didn’t resolve the blurriness issue.

Working setting for canvas camera

UI Vector Graphics

We use Vector Graphics in UI to avoid resolution dependency and enable more flexibility on UI elements resizing.

https://forum.unity.com/threads/unity-ui-svg-support-script.551254/

So far SVG worked reliably without issues (without gradients at least), the only thing to bear in mind is that AA only works in Screen Space Camera.

Extract from the link above

Canvas Settings

Pixel perfect creates some artefacts on UI (misaligned pixels and inconsistent rendering) so it’s disabled.

Screen Space Camera as Render Mode as per above.

UI Scale Mode Scale with Screen Size as the simplest method to ensure resolution agnostic UI.

UI Testing

Test should be run in Full Screen as windowed view can affect font resolution (subtle but visible)

--

--