Search Unity

TextMesh Pro Blurry Text At Odd Resolution Sizes

Discussion in 'Unity UI & TextMesh Pro' started by bentontr, Nov 9, 2018.

  1. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    Hello,
    I'm running into an issue with UI text where it is quite blurry at odd resolutions. For example everything is fine at 1024x768, but becomes blurry at 1023x768. I've found that the Canvas has a fractional position at these resolutions because it can't be evenly divided (of course). This is causing all the text to become blurry for some reason.

    This is pretty easy to reproduce if someone else wants to try it out. Has anyone else ran into this problem? Just to be clear this does not have to do with general text clarity, the text itself is fine (normally). A simple solution would be to simply clamp these values, however, it doesn't seem like you can really drive the canvas size or position besides using a scalar (in screen space).
     
  2. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    638
    yes, the UGUI Text often produces blurry text. There are two solutions:
    1. Increase the "Reference Pixels Per Unit" in the Canvas Scaler (will maybe mess up your existing UI)
    2. Do not use the default UGUI Text. Instead go for the (free) asset Text Mesh Pro (if you are using Unity 2017+, import it via the Package manager).
     
  3. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    Thanks for the response, but actually this is also a problem with textmeshpro bitmap fonts as well (Not SDF). Like I said above, this is a very specific issue caused by the canvas have a non-integer position at odd screen resolutions (odd numbers). My font is already pixel perfect, but only when the height and width of the window are divisible by two.

    Here is a simple example using unity UI text:


    One I took at 1024 x 768 canvas position: (512, 384), one at 1023 x 768 (511.5, 384) and the text is blurry.

    Edit: Slight correction, it seems TMP SDF fonts are having a similar distortion in this case.
     
    Last edited: Nov 12, 2018
  4. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    Still don't have a good solution for this. Does anyone have any ideas?
     
  5. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    Small update, I made some more progress and narrowed down my problem a bit. I found that this issue doesn't seem to happen with a pixel perfect canvas for regular unity text. My TMP bitmap text, however, becomes distorted with odd screen resolutions. See the following example here, if you zoom in on the image and look at the m's in remember the issue is especially noticeable.
    upload_2018-11-15_18-34-35.png

    I use TMP bitmap fonts throughout my project, especially for small text like this. I first noticed the problem in a build of my game running in windowed mode running at an odd resolution like this.
     
    Last edited: Nov 16, 2018
  6. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    @Stephan_B Any idea why this would happen with TMP bitmap fonts? I can post a demo scene if needed.
     
  7. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    2,267
    A demo scene / .unitypackage I could use for testing would be great.

    P.S. I am aware of potential issues with off resolution which in my opinion should be avoided in the first place.
     
  8. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    Here is a package with a simple demo. Steps to reproduce:
    1) Open SampleScene
    2) Change the game window size in the editor between an even and odd size
    3) Observe the differences in the text when switching between the even and odd size (for example, 1024x768 vs 1023x768)

    Ideally the resolution would always be even, however, the odd window sizes tend to occur when playing games in windowed mode. For example, this happens for me if I play in windowed mode and click the automatic expand button at the top of the window. In windows 10 at least, when it fills the screen for me this way I end up with an odd sized window and the text becomes blurry.
     

    Attached Files:

  9. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    Oh, one other thing I forgot to mention. Try checking and unchecking pixel perfect on the canvas. Seems like the regular unity text does this as well, but only when the canvas isn't pixel perfect (which seems like expected behavior I guess).
     
  10. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    @Stephan_B
    Hey Stephan,
    Just wanted to check back and see if you had a chance to look at the demo scene I posted.

    Thanks for the help!
     
  11. bentontr

    bentontr

    Joined:
    Jun 9, 2017
    Posts:
    23
    Went ahead and filed a bug report on this issue for better tracking. Included a demo scene and project for reference purposes in the report as well (pretty much the same as the scene as I posted above). The case id is: 1109005.

    I took a look at the TextMeshPro label implementation vs the unity text implementation but it wasn't clear how exactly they differ in handling the pixel perfect canvas flag. I noticed unity text overrides OnPopulateMesh from the base graphic class whereas TMPro doesn't seem to, not sure if that is relevant or if the special implementation of this function in the Unity text class has an impact on handling pixel perfect mode.