Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice

TextMesh Pro Text Mesh Pro - "box" around text unwanted effect / bug

Discussion in 'UGUI & TextMesh Pro' started by WSWhitehouse, Apr 22, 2019.

  1. WSWhitehouse

    WSWhitehouse

    Joined:
    Sep 26, 2018
    Posts:
    8
    I've got text in my scene and it seems to keep creating boxes around the text, like so: upload_2019-4-22_2-13-30.png

    Im using Unity version 2019.1, and the newest text mesh pro. I've tried multiple fonts but if i change anything in the material settings it creates a box around the text. I've also regenerated the font atlas in different resolutions and ive changed the padding and render mode, but nothing changes.

    Does anyone have this problem and know how to fix it? It also seems to be like this once the game is built.
     
    Tymianek and mchts like this.
  2. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Typically a semi transparent box around the text is the result of the sampling point size to padding being too small. You should normal aim for a ratio of about 10%.

    In the image above, it doesn't look like this box is semi transparent so perhaps the incorrect shader is assigned to the material?

    Can you post an image showing the Face Info of your font asset?

    Can you also post an image of the Material inspector on the text object making sure that I can also see the setting in the Debug section of the material.
     
    G76Dev likes this.
  3. WSWhitehouse

    WSWhitehouse

    Joined:
    Sep 26, 2018
    Posts:
    8
  4. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Still need to see the Face Info on the font asset but I suspect your ratio of sampling point size to padding is too small given your padding is 6 and the atlas texture 8K x 8K which is likely excessive in terms of size.

    With regards to the atlas texture size and given the new Dynamic SDF system is available, you should aim for 1024 X 1024 or a maximum of 2048 x 2048 where you would have a static primary font asset that contains the known text in the project with a dynamic fallback assigned to it as a catch all for user input.
     
    darbotron likes this.
  5. WSWhitehouse

    WSWhitehouse

    Joined:
    Sep 26, 2018
    Posts:
    8
    Heres the face info
    upload_2019-4-22_3-54-29.png
     
    richardfu71 likes this.
  6. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Your Sampling Point Size is 1352 and your padding is 6 for a ratio of 0.4% which is why you are seeing this grey box around the text. Your Sampling Point Size to Padding ratio should be about 10%

    Rule of thumb, also aim for a Sampling Point Size of about 72 to 96 points. 1352 is way too high.

    Regenerate your font asset with more reasonable values. Use an atlas texture size of 1024 x 1024 if all you are adding to the font asset is Extended ASCII.
     
    Fraccas, darbotron, G76Dev and 10 others like this.
  7. WSWhitehouse

    WSWhitehouse

    Joined:
    Sep 26, 2018
    Posts:
    8
    Okay, thank you. Changing the sampling point size fixed the issue.
     
    Yunrock likes this.
  8. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Make sure your take the time to watch the Font Asset Creation video as well as the Working with Material Presets.

    I'll need to update those videos at some point but their content still remains pretty relevant today.
     
  9. liveswithoutfear

    liveswithoutfear

    Joined:
    Sep 4, 2018
    Posts:
    11
    I was having the same issue with certain TextMeshPro fonts. I found that you can also eliminate the problem by adjusting the Perspective Filter slider bar in the inspector down to 0 in the Debug Settings. Well it worked for me anyway, hopefully others might find it helpful.
     
    BonusB and ROBYER1 like this.
  10. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Perspective filtering can also cause a similar issue but most of the time, the above is related to the Sampling Point Size to Padding ratio being too small. So step one should always to check this Ratio to make sure it is about 10%.

    If that doesn't resolve the behavior then next check Perspective Filtering.
     
    beard-or-die likes this.
  11. radiantboy

    radiantboy

    Joined:
    Nov 21, 2012
    Posts:
    1,600
    Im trying to fix the same issue but when I adjust sampling point size and apply, unity seems to reimport the asset for ever, the task manager shows unity is reading around 6meg/sec but this goes on for ever until I kill unity. Why is this ?
     
  12. radiantboy

    radiantboy

    Joined:
    Nov 21, 2012
    Posts:
    1,600
    got it, regenerate the font properly with TextMeshPro->Font Asset Creator, finally my fonts look good after years, thanks!
     
    N8W1nD likes this.
  13. bfoddy

    bfoddy

    Joined:
    Mar 27, 2012
    Posts:
    85
    It's kinda terrible that the auto size option is on by default and doesn't set an appropriate padding value. Worse, it hides the current autogenerated size from the user so they have to switch over to manual to even know what the current point size is, so they can calculate what the padding value ought to be. But worse! There's no tooltip or information in the manual to let the user know that they should adjust the padding value in this way... the only way they could figure it out is to find this forum thread (or presumably, to sit through a long tutorial video in the hopes of finding the resolution to the issue).

    I see students and indie developers with this issue all the time. It's always a late-breaking panic when they find out some user on low-spec hardware wants to run the game at a lower resolution and suddenly there are rectangles everywhere that weren't visible in editor. It sucks, guys! I'm back here at this thread for the third time myself because it only crops up for me about once a year and I have no way to remember the totally arbitrary (from the user's POV) rule - particularly since the relevant value (point size) is by default invisible to the user.
     
    caden-burleson, N8W1nD and kcfos like this.
  14. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    The resulting point size and padding ratio is displayed in the Result Window of the Font Asset Creator as seen below.

    upload_2020-11-19_12-34-12.png

    Next opportunity that I have to work on the Font Asset Creator, I will add tooltips to these properties.

    I will also explore revising the padding where it can be defined as a fix value or percentage of sampling point size where it would be 10% by default.

    I certainly agree the documentation is lacking on this which will be addressed.
     
  15. bfoddy

    bfoddy

    Joined:
    Mar 27, 2012
    Posts:
    85
    Sounds good! Looking forward to these changes.
     
    N8W1nD likes this.
  16. Tymianek

    Tymianek

    Joined:
    May 16, 2015
    Posts:
    94
    No matter what settings I change I get the boxes
    And the boxes are only rendered in Game, not in Scene view.
     
    Last edited: Feb 11, 2021
  17. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Can you post an image of your font asset so I can see the Generation Settings?

    Also post an image of the text with this square box around it.
     
    Tymianek likes this.
  18. Tymianek

    Tymianek

    Joined:
    May 16, 2015
    Posts:
    94
    After some thought I think my boxes aren't related to these boxes OP has. It is an entirely different problem.
    upload_2021-2-11_23-44-22.png
    After some experimentation, I managed to get an error "Material doesn't have a float or range property '_CullMode'"
    upload_2021-2-11_23-45-24.png
     
  19. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    The TMP shaders were updated several months ago to include a new property to control culling. Updating the shaders by re-importing the TMP Essential Resources should resolve that. You can choose to only import the shaders.
     
    Tymianek likes this.
  20. IAndrewNovak

    IAndrewNovak

    Joined:
    Nov 29, 2013
    Posts:
    105
    Same issue Unity 2020.2.3f1. I tried to delete and reimport shaders and the Update Atlas Texture option. Nothing helped.

    Fonts files link



     
    Last edited: Feb 12, 2021
  21. Tymianek

    Tymianek

    Joined:
    May 16, 2015
    Posts:
    94
    Click on the Import and Import all TMP Essentials
    upload_2021-2-12_17-41-7.png
    upload_2021-2-12_17-43-44.png

    If your TMP version was older also use the Project Files GUID Remapping Tool and scan the whole project (It may take a while) and Save Modified Project Files
    upload_2021-2-12_17-43-3.png
     
    lifeisabeach likes this.
  22. IAndrewNovak

    IAndrewNovak

    Joined:
    Nov 29, 2013
    Posts:
    105
    I fixed the issue by changing the padding and regenerating font atlas while font size will be about 72 to 96 points.
    Weird this problem appears after updated text mesh pro resources.
     
  23. Tymianek

    Tymianek

    Joined:
    May 16, 2015
    Posts:
    94
    I also had a similar issue in another project and resolved it by changing the rendering mode, so you can try different ones to see if it helps
    upload_2021-2-12_23-31-53.png
     
  24. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    These visual artifacts are the result of the Sampling Point Size to Padding ratio being too small.

    Changing the sampling mode on its own should not affect this but changing the sampling mode where it happens to also result in a change of the sampling point size and padding would appear to fix it.

    The default ratio of sampling point size to padding should be 10%. This is why the default sampling point size is 90 and padding 9. Sampling Point Size of 90 might be a bit on the big side but again just make sure you keep the ratio the same.
     
    Tymianek likes this.
  25. Tymianek

    Tymianek

    Joined:
    May 16, 2015
    Posts:
    94
    These artifacts can also happen with certain combinations of different shaders + material settings and rendering modes when using the default sampling.
    upload_2021-2-13_0-50-22.png
     
  26. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Yes. But this is also related to the Sampling Point Size to Padding Ratio as the effective range of material properties like Dilation, Outline, Underlay, etc. are determined by this ratio.

    The larger the ratio the more range you get on that Underlay Offset for instance. So what ends up happening is users start adjusting material property values to offset that Underlay where when that ratio is small doesn't give you much range. As such, they end up using a max value of 1.0 where we are now at the edge between two glyphs in the texture which can result in that same visual artifact.

    The solution is to increase that ratio of sampling point size to padding which in turn give you more range and equality important staying away from using max values.

    As a general rule whenever you end up pushing these values near their max, it is a sign that your sampling point size to padding might be too small. I rarely use font assets with a ratio smaller than 10%. Sometimes I use 20% for visual FX styling where I want a large underlay offset or glow range. I try to always keep the material property values below 0.8 where most of the time, they end up below 0.5. Ie. an Outline of 0.5 when the ratio is 10% is a big outline.

    Important Note: When creating fallback font assets, it is important to make sure their sampling point size to padding ratio is the same as their primary. This will ensure the visual appearance of those FX like outline are consistent in width (in the case of an outline) relative to the primary font asset. Although the sampling point size to padding ratio should be the same, the actual sampling point size and padding can be different as well as texture size. For instance, if the primary has 100 sampling point size with padding of 10, the fallback can have a sampling point size of 50 with padding of 5.
     
    literacy, Tymianek and Allthebees like this.
  27. Tymianek

    Tymianek

    Joined:
    May 16, 2015
    Posts:
    94
    Thanks for clarifying.
     
    Stephan_B likes this.
  28. Chris_Payne_QS

    Chris_Payne_QS

    Joined:
    Jul 16, 2016
    Posts:
    83
    I have a 90 point font with a 9 pixel padding and still have this issue, but only in the Game view when the text is small enough to be mipmapped. This confuses me -surely if it can render without artefacts in the Editor view, it can do it in the Game view?

    Game view (blown up a bit for ease):
    upload_2021-11-2_13-11-0.png

    Editor view at similar size. Note the outline colour is also grey ingame, when it should be black:
    upload_2021-11-2_13-12-3.png

    I presume it's because when mipmapped, the SDF forms bridges between characters and never reaches zero. But I can't see any way to disable mipmaps on the atlas or control mipmap bias. I am guessing that the editor view does not mipmap, because the small editor font looks to be sampled straight from the top LOD rather than filtered.
     
    Last edited: Nov 2, 2021
  29. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Mipmapping doesn't work with SDF. As such SDF Atlas textures are created with Mipmapping disabled so unless something else is re-enabling mipmapping on those texture it should not be enabled.

    Are you using any type of scaling of the Gameview or CanvasScaler in the scene? If so, try testing with one of the SDF SSD shaders which are included with the TMP Essential Resources. Let me know if you still get the visual artifacts with one of those shaders.
     
  30. Chris_Payne_QS

    Chris_Payne_QS

    Joined:
    Jul 16, 2016
    Posts:
    83
    The SSD shaders are not available unfortunately, presumably because I'm on URP (they're pink in the Inspector)
    There is scaling because my UI designer wants to target 4K as a reference resolution meaning that the Canvas Scaler usually scales the parent UI window by between 0.2 and 0.5 - also the font is created at 90pt which seems excessive.

    I can fix it by regenerating the font with a lower point size, which reduces the need for mipmapping.
     
  31. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    The SSD shaders should work with URP. Check to make sure all of your TMP shaders are contained in the same folder which is now outside of the Resources folder. It is possible that your SSD shaders were imported in the new location in "TextMesh Pro/Shaders/..." but your .cginc files are still contained in "TextMesh Pro/Resources/Shaders/..." this would result in the shaders not compiling.
     
  32. Chris_Payne_QS

    Chris_Payne_QS

    Joined:
    Jul 16, 2016
    Posts:
    83
    Ah, thanks for that. Moved all the shaders + cgincs into the new folder, but the SSD ones still don't appear in the shader dropdown :(
    As I say though, smaller point size has fixed the mipmapping so I'm happy :D
     
  33. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    Did you re-import the TMP Essential Resources? You can do so by going to "Window - TextMeshPro - Import TMP Essential Resources". This will bring up the asset importer where you can see and select what will be imported.
     
    Tymianek likes this.
  34. Havie

    Havie

    Joined:
    Oct 12, 2019
    Posts:
    89
    It was the Perspective Filter under the debug settings (can get to it blow lighting,glow etc)
    setting it to 0 removed the boxes behind my letters
     
  35. Luxxuor

    Luxxuor

    Joined:
    Jul 18, 2019
    Posts:
    89
    Two years later and there is still no simple "You should aim for around 10% Ratio" hint anywhere in the font asset creator, a small change that could prevent a lot of users investigating the same problem.
     
    Havie likes this.
  36. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    When font assets are created via the context menu create option, the default sampling point size is 90 and padding is 9 for a 10% ratio.

    In the latest preview releases of TMP, the font asset creator now has two modes for padding, an absolute mode and a relative / percentage mode where it defaults to 10%.

    upload_2022-3-30_12-57-25.png

    The above should help minimize new users potentially running into this issue. This issue is covered in the following FAQ Question 2 in the sticky post above.
     
  37. jbartelt

    jbartelt

    Joined:
    Aug 22, 2018
    Posts:
    13
    Changing the font shader to Distance Field SSD fixed the issue for me.
     
    wagenheimer likes this.
  38. TheSheyper

    TheSheyper

    Joined:
    Jul 3, 2013
    Posts:
    21
    Hi @Stephan_B
    I also have semi transparent box around the text when I'm walking 1 meter from the text (world space canvas) and the boxes disapear when I'm closer.
    No scaling on the objet (only on the root canvas), and 10% ratio (also tried Perspective Filter to 0 but didn't do anything)
    My only solution for now is using Distance Field SSD shader like @jbartelt (I'm using the mobile version for performance)
    So now it works but I don't really know why, any clue ?
    Thanks ! ;)
     
  39. wagenheimer

    wagenheimer

    Joined:
    Jun 1, 2018
    Posts:
    320
    I have the same issue and changing the font shader to Distance Field SSD also fixed the issue for me.
     
    unity_5Y9V5yMQCD2wng likes this.
  40. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    6,588
    In order for text to render correctly when using Signed Distance Field, scaling information (SDF Scale) has to be passed to the shader for each individual characters. This SDF Scale represents the relationship between the actual rendered scale of the glyph relative to the sampling point size in the texture. With normal SDF shaders, this scale information is encoded in the UV0.W (in version 3.2.0-pre.x) This scale is handled in the vertex shader. This is very efficient from a performance point of view but requires making sure this scale is correct.

    By contract, the SSD shaders use Screen Space Derivative to compute this scale. This is convenient since we no longer have to pass this scale but this operation is done in the fragment shader / per pixel which is more costly from a performance point of view. Please note that on some devices this SSD has been optimized where the costs are marginal but this is not the case on all platforms. On desktop devices, the performance different is marginal but like I said it can be more significant on mobile devices.

    When using the normal shaders, TMP does its best to track potential scale changes to update the SDF Scale but this is not always possible as changes to resolution for instance are not easily tracked or manipulation of scales of objects outside of what TMP can detect. In those types of cases, using the SSD shaders makes life easier but always be sure to check / test to make sure everything appears to be running as you expect.
     
  41. Iciolo

    Iciolo

    Joined:
    May 11, 2014
    Posts:
    1
    Thank you
     
  42. dontshootthefighter

    dontshootthefighter

    Joined:
    May 6, 2021
    Posts:
    1
    Change the Shader to TextMeshPro/Mobile/Bitmap
     
    ROBYER1 likes this.
  43. esanuriana08

    esanuriana08

    Joined:
    Jan 10, 2021
    Posts:
    13
    Hi @Stephan_B
    I have problem about Font Asset. in Image1 text looks good. but when I add an animation scale from 0,0,0 to 1,1,1, a box will appear like image2...is this a bug or anything else?
    image1 upload_2023-3-1_8-21-30.png
    image 2 upload_2023-3-1_8-22-5.png

    edit: This issue only occurs in world UI. on other rendering look fine
     
  44. radiantboy

    radiantboy

    Joined:
    Nov 21, 2012
    Posts:
    1,600
    I gave up trying to make tmp work with foreign characters. what a mess, what an awful text system. The old text system works perfectly fine, no idea why tmp is so S***.
     
  45. ihgyug

    ihgyug

    Joined:
    Aug 5, 2017
    Posts:
    194
    I've noticed this issue can also appear when you animate the scale of the transform (or a parent), and the "Is Scale Static" property is set to true in the Extra Settings of the TMP component.
    Don't forget to turn off the property to false in those cases.