Blurry UI Text

In the gameView, do you have the `Low resolution aspect ratios` option enabled? The GameView will lower the resolution on high dpi screens if that option is enabled.

 

This option is enabled only for Retina displays (when

GUIUtility.pixelsPerPoint > 1

), and is only useful when "aspect ratio" resolution types are selected.

Make sure the Scale slider (right of the resolution/aspect ratio dropdown) is set at 1x, and try fixed resolutions instead of aspect ratios (like the Standalone setting in your screenshot).

 

What point size is the text?

Can you provide the steps to reproduce the above in a new project or provide / export a simple project / scene that would enable me to take a closer look?

 

Thanks for providing the sample project for me to look at. I had a chance to review it and here are my findings / suggestions.

First, the rendering between the scene view and game view appears to be consistent. For instance, if you were to render these objects at relatively the same size, they would appear similar as seen in the image below (left scene view - right game view).



In such cases where we have extreme scaling (relative to the pixel size of the sprite for instance) there is only so much that can be done by the bilinear filtering. You could try to enable Anti-aliasing in the Project Setting - Quality Settings or use some post process FX but in the end trying to display a 390 x 465 sprite in about 39 x 46 pixels or 1/10th its pixel size will be problematic. This is one of the reasons why artwork / sprites are usually designed a different target resolutions. Emojis for instance, are usually designed at 16 x 16, 32 x 32, 64 x 64 and 128 x 128 where depending on the resolution, a different size of those sprites are used.

Now in regards to text, we basically have the same issue where we are trying to represent characters (glyphs) in a very small pixel grid as seen in the image below (left UI.Text - right TMP UGUI)



Similar to sprites, these glyphs have been rendered into a texture at a sampling point size far larger than this target resolution where scaling these down to a pixel grid of 3 x 5 pixels makes it very difficult to accurately render them. As seen on the left side, these glyphs sampled at 200 points and scaled down look pretty bad whereas the glyphs on the right side using TMP and SDF came out a bit better.

In order for bitmap text (used by UI Text) to render correctly at small point size, the glyphs must be sampled for each target point size using Hinted (Raster or Smooth) and displayed at 1:1 and pixel aligned. Here is an example using the same font at 6 point size (left hinted raster - right hinted smooth)



Zoomed in


At 1:1 the hinted smooth on the right renders similar to the SDF from the previous example. Rendering text at point sizes before 8 points is torture.

In terms of setting up your scene, scaling, etc... that is a lot of ground to cover. I recommend finding / watching a bunch or tutorials on this. Here is a good one which although related to pixel art text, it does cover a lot of the information from about about 1:1 rendering / scaling multiples, etc.

 

When using TMP, I would recommend to first test the SDF modes (SDFAA) to see if you are satisfied with the text rendering quality at the target point sizes. Unlike bitmap text rendering where you need a representation of the glyphs for each point size, with SDF you only need one sample for all point size and resolution which is more efficient plus the benefit of being able to add dynamic styling like outline, shadow, texturing, etc.

I would make sure that the scale of these text objects is always uniform and (1, 1, 1) where the scaling potentially occurs at the parent level or as a result of using a Canvas Scaler. You will likely end up using text auto-sizing to dynamically adjust the point size of the text for various target resolutions / scaling. Text auto-size has significant performance overhead and as such, you should read the following post to get a better understanding of how to use text auto-sizing efficiently.

In terms of glyph rendering mode, this is set when you create the font assets which can be done via the Font Asset Creator or using the context menu create - TextMesh Pro - Font Asset as seen in below.



By default font assets created via the context menu will use SDFAA mode which will assign an SDF shader to the Font Material that is a child of the font asset as seen below.



If you were to change the render more to one of the bitmap modes, you will need to change the shader assigned to the material to use one of the TMP bitmap shaders as seen below. You need to use one of the Distance Fields shaders for SDF modes and one of the bitmap shaders for the none SDF render modes.



I would suggest watching the following two videos which although cover localization still provide great insight on how to using Dynamic Font Assets, Fallbacks, Multi Atlas texture, etc.

Should also take a look at these older videos which cover the Font Asset Creator and Creating and Working with Material Presets which is another important concept.

This is a lot of stuff to review / digest but nonetheless all important to get the most out of TMP. Similar to what I said above, just start by creating a dynamic SDF font asset with the default settings, build your UI / scenes at some at some baseline target resolution relying on the Canvas Scaler to handle the other resolutions. There should be several posts and tutorials on how to setup your scene to handle various resolutions using the Canvas Scaler. Start there and let's see how everything goes