Fix Blurry UI text?

Question

When I was building this UI, I didn’t realize that resizing by pressing T and dragging the windows, I would totally screw up the resolution of any image I was resizing, and only later did I realize I should have been using the scale instead to preserve the resolution. That said, now I have a nearing completion UI that’s starting to look bad, but my problem is that this UI is for a crafting menu. That said, because of the simplicity of the inventory system, I made the text contained in the UI and actual UI is a game mechanic just for ease of construction (i.e. if a light turns on as a result of the item existing in your inventory, then the condition for the craft button OnClick function is met and you can craft it). So I really don’t want to destroy the UI and start over from scratch overlaying all the images and such, because that would mean a lot of backtracking on the game mechanics themselves as well. Is there some way I can set the UI elements all back to their respective default resolutions without getting rid of them, resizing them using the scale tool this time instead of changing the aspect ratio (i think that’s what it is I was using?) to avoid destroying it and starting back from the beginning? Here’s a screen shot to show the resolution deterioration I’m referring to as I created more panels on top of panels. This isn’t the whole UI, but the other screenshot exceeded the limit, but there is another behind this one also. The text in the bottom left of this was created second (after the panel that’s behind this one) and then the text on the right in that selection box was created third, and even between these it’s pretty easy to see and by the time I got to the text in that menu on the right, It became near illegible. Thanks in advance for any help you guys might have

48572-ui-window-3.png705×296 126 KB

Leitao

What kind of objects are you using for the text? Is it just an image or is it a textMesh or something?

– Fidgety

the text objects are just the standard text that comes parented to the button when you create a UI button from the create menu. I just swapped out the sprites and the text font

– Leitao

I am not sure this is the problem or if it will help - but maybe the scale of the text objects are scaling with the parent objects - so maybe try dragging them out so they arent children of those buttons, reset their sizes (scale) to be correct aspect, then drag them back into the buttons as their children. Perhaps this will help?

– Keever

Here's a video how to do it in 1 min https://www.youtube.com/watch?v=vARzcwlA2qI

– Unpile

Just Increase the Size and decrease the scale as per your requirement

– Haematothermal

Answer 1

I had post few solutions for this problem here:

answers.unity.com

[SOlUTIONS] UI Text / TextMesh is blurred [Unity 4.6-5.3.5f] - Unity Answers

Unity is the ultimate game development platform. Use Unity to build high-quality 3D and 2D games, deploy them across mobile, desktop, VR/AR, consoles or the Web, and connect with loyal and enthusiastic players and customers.

Oxbridge

Answer 2

Try this:

Corelli

Answer 3

In the canvas (Canvas Scaler component), set the “Dynamic Pixels Per Unit” value to something higher.

Odum

This seems to work on sprites, but for some reason it doesn't apply to the text inside the UI elements, which was the main issue. See example below. [112684-2018-03-09-20-28-18.gif|112684]

– Aciculum

This answer is correct. In your gif, you are changing reference pixels per unit, whereas the answer is stating that you should change dynamic pixels per unit, which I can confirm to be the correct solution.

– Pianissimo

I think Dynamic pixels per unit doesnt exists anymore in Unity 2019, any new solutions?

– Gay

Answer 4

The best way I’ve found is to:

1. Increase font size massively (size 150 or something).

2. Set both horizontal and vertical overflow to ‘overflow’ in the inspector for the text box.

3. Scale the textbox down using the scaler tool.

The text should now be sharper.

Snuggle

Thanks a lot

– Herbivore

This is correct.

– Phasis

I want to note this. When you play with scale, ideally X and Y should be equal. Lol, I've spent almost 15 minutes wondering why my text looks stretched horizontally.

– Shane

Please do yourself a favor and don't do this. Every part of this answer is screaming "future headache" when you want to change anything. Follow the "Dynamic Pixels Per Unit" answer instead.

– Pianissimo

This helped me so much, thank you!

– Sahib

Answer 5

My solution:

1. Wrap TextField by empty GameObject,
2. Make TextField stretch all with zero borders,
3. Attach to text field TextSharpener.cs
4. Change scale of text field to 0.5 , resolution of text now twice better
   drawback: control position of textfield now only through parent wrapper

TextSharpener.cs

[ExecuteInEditMode]
public class TextSharpener : MonoBehaviour
{
    void rtValidate()
    {
        RectTransform rt = GetComponent<RectTransform>();
        Rect parent_rect = ((RectTransform)rt.parent).rect;
        rt.sizeDelta = new Vector2(parent_rect.width / rt.localScale.x - parent_rect.width, parent_rect.height / rt.localScale.y - parent_rect.height);
    }
  
#if UNITY_EDITOR
    void OnValidate()
    {
        rtValidate();
    }
#endif
    void OnRectTransformDimensionsChange()
    {
        rtValidate();
    }
}

Hoshi

Answer 6

PC build

Here’s a video how to do it in 1 min

mobile build:

Make it best fit and max 300 and It will work fine on mobile however it might look blury on Unity.

Unpile

Although this works as a hack, I don't think messing with component scales are a good idea. It can be problematic if you intend to use different components from different sources, or can be problematic with procedural ways. Also doesn't help with working on existing content. I cannot imagine rescaling and refitting every text object in a large project.

– Gris

Answer 7

Enabling Pixel Perfect in the UI Canvas was the solution to my blurry text issue.

Kowtko

Answer 8

In my case,

The scale of my text’s container object was not (1,1,1) but somehow shifted to ( 6.473743 , 1 , 1 ) while I was positioning and scaling it manually.

When I corrected the scale to (1,1,1) and adjusted width & height again; problem is solved.

Jardena

Answer 9

I know that this is a good few years old, but it comes up first in the Google search, so…

For me, the issue was that I was using the scale tool (shortcut: ‘r’) on the textbox. This leaves you with a weird, artificially-magnified textbox. Instead, to get the textbox the size you want, use the shortcut ‘t’ tool (dunno what its official name is) to drag out the sides etc., and then from there you can set the font size to whatever you need and everything will behave okay.

So, basically: don’t use the scale tool thing on textboxes because it doesn’t really make it bigger, it just kind of blows it up.,I know that this is a few years old, but it comes up first in the Google search, so…

For me, the issue was that I was using the scale tool (shortcut: ‘r’) on the textbox. This leaves you with a weird, artificially-magnified textbox. Instead, to get the textbox the size you want, use the shortcut ‘t’ tool (dunno what its official name is) to drag out the sides etc., and then from there you can set the font size to whatever you need and everything will behave okay.

So, basically: don’t use the scale tool thing on textboxes because it doesn’t really make it bigger, it just kind of blows it up.

Ginny

Answer 10

I watched a couple of unnecessary YT videos and read through hacky fixes. In the end the answer was simple. Put scale to (1,1,1) and increase font size.

Anemia

Answer 11

Sorry for Up but in Unity 2021.1.9f1, we have a simple solution now ! TextMeshPro makes good looking text and it’s now free:

• Remove your normal text and make a TMP Pro text

• Import your font in TMP :

• Open the Font Asset creator : /Window/TMP/Font Asset Creator

• Select your font in “Source Font File”

• Generate Font Alias

• Save your Font

You can now use it and have a clean text with custom font !

Tiphanie

Answer 12

For anyone who still has problem with this. This video solved everything for me!

Carri