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)

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Daniele
Daniele

No responses yet