Search Unity

Sharpenning text

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by MadJohny, Aug 22, 2014.

  1. MadJohny

    MadJohny

    Joined:
    Mar 8, 2013
    Posts:
    143
    I think everyone knows the issue with unity where the text isn't sharp enough and looks blurry, usually to fix that you would grow the font size and then reduce the scale of the object, or vice versa (I think it also worked), but I can't figure out how to do that correctly with the new UI, any tips?
     
  2. Alan47

    Alan47

    Joined:
    Mar 5, 2011
    Posts:
    139
    Same problem here. Tried different fonts, some working better than others, but all of them are quite blurry.
     
    oct4carlos likes this.
  3. Mistale

    Mistale

    Joined:
    Apr 18, 2012
    Posts:
    173
    Same here... I've also experienced problems with text turning into garbage if I switch from normal to bold, for example.
    There have been problems with textrendering for a long time, and I think Unity needs to rewrite the current system.
    Of course there are other solutions as well, TextMeshPro looks good for example (it uses distance-field fonts).

    But overall, some tlc for better textrendering across devices and resolutions would be very appreciated.
     
  4. Legi

    Legi

    Joined:
    Jul 25, 2013
    Posts:
    19
    Check the box "Pixel Perfect" on the Canvas. This should reposition your objects slightly to prevent half pixel positions.

    If that doesn't help, open the example project and create a text object with the same settings as the one in your project (font, size, etc.).
    If it's sharp there but not in your real project, there's probably something wrong in your project settings (don't know what exactly).
    I ended up replacing the project settings folder with one from a new empty project. (Don't forget to make a complete backup first!)
    If it's sharp now you can copy back your backup one by one to find the responsible file.
     
  5. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    7,181
    All the text I've tried has been super smooth and crisp. You guys aren't resizing your text objects using the Scale widget, are you?
     
    Schorey, RossWAR and Dheeraj_Singhani like this.
  6. MadJohny

    MadJohny

    Joined:
    Mar 8, 2013
    Posts:
    143
    I found out how to make it sharp! (I didn't even know there wasn't a example project), anyway, for anyone that needs this, make widht and height huge, it doesn't change the text size but it changes the canvas, then make font size about 100 and finally change the scale on the x and y to something like 0.1 (I wanted a small text so I used that size, adjust as you wish)
     
  7. Marble

    Marble

    Joined:
    Aug 29, 2005
    Posts:
    1,216
    Presumably the solution mentioned here (which I've been using) uses a high resolution version of the text atlas then scales it down to create 'sharpness.' This seems kind of inefficient (scaling down the scaled up version). It would be nice to have a component or option on the text control that guaranteed it was pixel perfect for a fixed resolution, no matter how the parent canvas is scaled.
     
  8. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    7,181
    The solution is simply to almost never use the 'scale' in RectTransforms; basically only use it in, e.g., zoom effects, transitions, etc. What you suggest - pixel perfect regardless of parent scales - is not a sensible solution, performance-wise. If you have a transition where your UI zooms in, then every Text object on the UI would have to re-render its text glyph atlas every frame as the UI scales up. It's just not a good way to do it.

    Just don't scale things. Use the rect parts of the rect transform instead, and your UI can remain pixel perfect.
     
  9. Marble

    Marble

    Joined:
    Aug 29, 2005
    Posts:
    1,216
    Isn't scale necessary to work with UI elements that should appear to have the same normalized size regardless of resolution? The ReferenceResolution component scales the whole canvas and the tutorials do it. It would just be nice if you could have text inside that canvas that is not affected by scale, but is still affected by translation, activation in the hierarchy, etc. So as the text's parent scales up, more text can fit inside its expanding rect.

    Using the "stretch" anchor mode to accomplish a similar effect isn't always a solution for UI elements that need to be constrained to their parents. For example, if I have a tall vertical sprite with a smaller sprite inside it, when the aspect ratio of my resolution changes, the UI elements "stretch" in a way that causes their rect boundaries to change at different rates.
     
  10. Alan47

    Alan47

    Joined:
    Mar 5, 2011
    Posts:
    139
    I didn't scale anything, all scale sliders are at 1.0. Nevertheless, if you try to render a font in a small UI at, say, 10px, it looks extremely blurry, even if you use a TrueType Font that is specialized for small font sizes. No stretching involved.

    In my experience so far, activating "pixel perfect" tends to make things far worse, instead of better.
     
    crushhh likes this.
  11. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,110
    If you can raise a bug where text isn't behaving as you would expect we would be happy to look into it. We are not aware of any issue when things are configured properly.
     
  12. Melang

    Melang

    Joined:
    Mar 30, 2014
    Posts:
    166
    This is indeed an issue, the default font is too blurry. I have to set all my medium-sized font scale to 0.7 because of this (and up its size to around 20). :(

    With the old GUI the text used to look like the one to the left on the example attached.
     

    Attached Files:

    crushhh likes this.
  13. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    I second this. Setting the size to 0.7 and scale the text up gives a much sharper look.
     

    Attached Files:

    crushhh and Melang like this.
  14. Griz

    Griz

    Joined:
    Aug 27, 2013
    Posts:
    124
    You can get crisp fonts in the new uGUI by going to:
    Project settings -> Player -> Settings for PC, Mac, Linux -> Other Settings
    and enabling Direct3D 11. New projects have this option enabled by default.

    Now the question is why this option is even required. Other target platforms don't have this setting available, so for now it forces us to use either the old guitext, or the scaling trick to have nice and sharp fonts, unless there's some other way.
     
    crushhh likes this.
  15. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    Just curious, is it necessary to file a bug report into the tracker? If so, did somebody already file a bug report about this issue?
     
  16. Panzerhandschuh

    Panzerhandschuh

    Joined:
    Dec 4, 2012
    Posts:
    15
    This problem also seems to affect non-text GUI elements. I tried making a sliced sprite with multiple different settings. Here are the results:
    Pixel perfect, 8 AA - The border of the sliced sprite and the text are both very blurry
    Pixel perfect disabled, 8 AA - The border and text both look sharper, but with closer inspection you can see the border edges on the top and bottom do not have a perfect 1 pixel outline with the same color
    Pixel perfect, 0 AA - The top border of the sliced sprite is 2 pixels wide instead of 1 and the bottom of the border does not show up. Also the text is blurry.
    Pixel perfect disabled, 0 AA - This seems to be the best case since the text looks sharp and the border is 1 pixel around each edge as it should be. It should be noted though that sometimes when I move the sliced sprite around, the edges are no longer a perfect one pixel wide border.

    In general, results seem to be better with pixel perfect disabled. I think these blurring issues were also present in NGUI. It would be great if it was fixed.
     

    Attached Files:

    crushhh likes this.
  17. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,110
    Please raise bugs.
     
  18. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    Do we need to vote at them then too? :)

    Ah the times when developers cared for bugs without all this bureaucracy ...

    EDIT: DX11 makes really a huge difference ...
     

    Attached Files:

    Last edited: Aug 23, 2014
  19. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,110
    All the UI bugs are getting looked at my myself and the rest of the UI team. Stuff like this is why we are doing a beta so that we catch everything before we do a full release :)
     
  20. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    Great, thanks. Good luck catching the baddie :)

    Just curious, should we attach the case number to the threads, or are you able to find them in the tracker ?
     
  21. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,110
    It can't hurt to add the case number, but it's not 100% needed.
     
  22. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
  23. ForceX

    ForceX

    Joined:
    Jun 22, 2010
    Posts:
    1,100
    I agree small text is a big issue but the fix appears easy for DX11 projects not so much for DX9 projects. Simply change the rendering mode in the font import settings to Hinted Raster. You will get a desirable look for small pixel style fonts.

    This only works on DX11 projects as enabling pixel perfect on the canvas for DX9 projects breaks pixel perfect for text by shifting them back into 1/2 pixel space.

    View image at 100%

     
    Last edited: Aug 24, 2014
    Melang likes this.
  24. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    Hm, made things even worse here with Arial.
     
  25. JAKJ

    JAKJ

    Joined:
    Aug 17, 2014
    Posts:
    185
    Arial is not a "pixellated" font. For smooth true-type/open-type fonts like that, I find Hinted Smooth works best. It's still not "crisp", but it's decent.
     
  26. ForceX

    ForceX

    Joined:
    Jun 22, 2010
    Posts:
    1,100
    This is what Arial looks like on my build with DX 11 & DX 9 with pixel perfect enabled on the canvas.

    DX11 looks perfect :)
    DX9 looks sad :(

     
    Last edited: Aug 24, 2014
  27. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    Interestingly in DX 11 the pixel perfect option seems to work reverse than with DX 9
     
  28. ForceX

    ForceX

    Joined:
    Jun 22, 2010
    Posts:
    1,100
    Yup. It's been that way for a while. DX11 is doing some type of pixel offsetting that DX9 does not. I've noticed in my 3D Radar package that when using DX11 I would need to remove my method for 1/2 pixel correction that is required in DX9.

    For this problem Unity needs to be aware of which rendering mode it's in Aka DX9 / DX11 and use different methods for pixel correction based on this selection.
     
  29. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    Let's hope a developer reads this ^^
     
  30. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    Let's hope someone submits a bug report...
     
  31. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    Fingers crossed! :D
     
  32. ForceX

    ForceX

    Joined:
    Jun 22, 2010
    Posts:
    1,100
    Working on a package to send as bug report now.
     
  33. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,110
    I'm reading this, make sure there is a bug report!
     
  34. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,474
    Thanks ForceX, so i don't need to file one :)
     
  35. ForceX

    ForceX

    Joined:
    Jun 22, 2010
    Posts:
    1,100
    Bug report sent Case 628467.

    If anyone wants to mess around with it this is the project sent to unity for bug squashing. To see the blurry font problem simply switch between DX9 & DX11.
     

    Attached Files:

    Last edited: Aug 24, 2014
  36. Panzerhandschuh

    Panzerhandschuh

    Joined:
    Dec 4, 2012
    Posts:
    15
    Switching to DX11 fixes the issue for text and sprite blurring which is great. I noticed that blurring can still occur when GUI elements are not properly pixel aligned (ex: a Pos Y of -141.61 blurred the top and bottom edges of my sprite), but I think this is working as intended. The pixel perfect option on the canvas removes the blurring on non pixel aligned elements which is also good. I just wanted to mention this so others don't say DX11 still has blurring issues like I was about to.
     
  37. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,110
    Thanks for the bug report.
     
  38. laryk_ua

    laryk_ua

    Joined:
    Jul 26, 2014
    Posts:
    9
    I have the same problem in my Android project. And the only way to fix it is make width and height huge and scale the text down.
    I do not like this "solution", so hope the problem will be fixed.

    Is there a solution for button's text?
    This text does not have "width" and "height" parameters and other workarounds do not work for me ("Pixel Perfect" option, DX11, pixel alignment etc.)

    UPD: The latest update 4.6.1p1 fixed the problem for a button's text.
    But for general text I should set scale to 0.5 and increase font size in order to have clear font.
     
    Last edited: Dec 15, 2014
  39. Velo222

    Velo222

    Joined:
    Apr 29, 2012
    Posts:
    1,348
    So, I'm finally working with text on my gui, and I'm running into this same problem. I'm using DX9 right now, and the text is eye-gougingly blurry.

    The "fix" people are suggesting doesn't really work. It makes some parts of the font thin and "crisp" I guess, but other parts look terrible still. It's not really a fix to me.

    I'm using Unity 5.0 beta 14 though, so not the latest beta version if this had been updated in the latest beta version?

    Text is just awful. And there's only one font to choose from that is default lol.
     
  40. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    7,181
    You have to load in TTF files to your project folder to get other fonts.
     
  41. Doghelmer

    Doghelmer

    Joined:
    Aug 30, 2014
    Posts:
    112
    Currently struggling with this myself. It's especially annoying if you're attempting to do a pixel art game, where having crisp, sharp text is important for the aesthetic. Having blurry bits on the text ends up looking sloppy. After doing a bunch of research and fiddling around, I think (as others have mentioned earlier) that the only current "solution" is to scale down the rect transform scale and scale up the font size. I am hoping that Unity will address this issue at some point.

    Edit: Looks like there are actually some plugins that deal getting pixel-perfect text. I'll have to check one of these out.. Not sure if all are compatible with 4.6 UI
    https://www.assetstore.unity3d.com/en/#!/content/25561
    https://www.assetstore.unity3d.com/en/#!/content/15320
    https://www.assetstore.unity3d.com/en/#!/content/25561
     
    Last edited: Jan 16, 2015
  42. catweezy

    catweezy

    Joined:
    Mar 9, 2015
    Posts:
    1
    Not sure if this is the same issue anyone else is having. I am using a bitmap font with a custom texture (.fnt and .mat) and things were horribly blurry.

    Went to Edit ->Project Settings -> Quality and saw that texture quality was set to "Half Res". Switched it to Full Res and everything is crystal clear.

    May not be the same issue, but might help someone.
     
  43. BlackTerrorGT

    BlackTerrorGT

    Joined:
    Dec 19, 2012
    Posts:
    15
    I'm just curious if anyone has a work around for this text issue in a world space gui. My current project centers around a HUD for a piece of equipment. In world space GUI's I can't simply scale down the panel and scale up the text because the panel needs to fit in line with a 3d model to appear to be on the equipment screen. It's crazy annoying that the text is perfectly readable in the editor, but when running, completely unreadable. Additionally, this is a web and mobile project, so the DX11 solution doesn't do much for me. Suggestions?
     
  44. byrne

    byrne

    Joined:
    Sep 23, 2014
    Posts:
    7
    This post affects people struggling with world canvas text quality.

    I have been fooling around with text clarity in world space canvases quite a bit lately for my project, and I have deduced that due to the billboarding and scaling transforms that the text needs to go through, it will always appear blurry or 'rough' in some way. The best workaround that I can advise is to add ugui Text objects to a canvas overlay that follows units in world space. Using this technique, fonts are crisp and clear.

    I understand though this might not be optimal for some projects because this means the text isn't parented to the actual game objects and are not positioned in world space. If quality is a concern, I hope this method helps.

    Edit:
    This technique needs to have a Canvas(Screen Space-Camera) with Render Camera set to the camera that is displaying your text. Then use this code to adjust the position of a child text element.

    Vector2 v=Camera.main.WorldToScreenPoint(target.transform.position);
    v=new Vector2(v.x-Screen.width/2, v.y-Screen.height/2);
    textobj.getComponent<RectTransform>.anchoredPosition=v;

    also, if you are programmatically adding text elements to your canvas, remember to set flag (worldpositionstays) to false - setParent(transform, false) to ensure that unity does not change the position/rotation/scaling of the prefab, which will screw up your text position. If you are unsure, make a test text first, and make sure the instantiated text objects have proper scaling and rotation similar to your test object.
     
    Last edited: Mar 25, 2015
  45. crushhh

    crushhh

    Joined:
    Mar 22, 2015
    Posts:
    12
    I'm struggling with this exact same issue.

    I set a border of 1px on a 9-sliced sprite that had a 1px border and a transparent fill. When the sprite is scaled in the canvas, the borders become blurry...
    Also having the problem with text being blurry unless it is set to Hinted Raster, which doesn't work well with some fonts.

    Are you suggesting that I disable AA in my game in order to get the fonts to show clearly, or can I disable AA just for fonts somehow? (I have DX11 enabled)
     
  46. Panzerhandschuh

    Panzerhandschuh

    Joined:
    Dec 4, 2012
    Posts:
    15
    I was just showing the differences with various AA/Pixel alignment settings. The problem no longer affects me in the most recent Unity version (DX9 and 11 both work with AA enabled). Are you using the latest version of Unity?
     
  47. crushhh

    crushhh

    Joined:
    Mar 22, 2015
    Posts:
    12
    I've found that Hinted Smooth works well, but Smooth setting is absolutely terrible.
     
  48. ninjared4

    ninjared4

    Joined:
    Nov 14, 2014
    Posts:
    16
    Very easy way to do this, in the Canvas Scaler up the Dynamic Pixels Per Unit
     
    d3garcia, twobob and Valerius666 like this.
  49. shkar-noori

    shkar-noori

    Joined:
    Jun 10, 2013
    Posts:
    833
    UI hasn't received fixes and improvements for quite some updates, I'm beginning to worry :confused:
     
  50. tosiabunio

    tosiabunio

    Joined:
    Jun 29, 2010
    Posts:
    110
    I'm working on a pixel art game and GUI font problem gives me a lot of headache. Needless to say, the fonts displayed on overalay canvas are not pixel perfect despite such setting turned on. Or rather they are pixel perfect for some combinations of font size and canvas scaling.

    I have a set of test fonts and here are the results of my test for 1280x720 resolution (with canvas scale set to 2.0 to match the scale of my background art):





    Only sizes 4, 8, 16 and 32 are usable, other sizes are blurry.

    There's a bigger problem when I switch to popular 1366x768 resolution (still with scale set to 2.0 to match the background):





    Most of the sizes become blurry. But there's a fix for that - the canvas scale needs be set to 2.009 and everything becomes somewhat consistent with previous samples:





    This may help others who struggle with the problem.
     
    Last edited: Apr 14, 2015
unityunity