Why does this look so terrible?

In an otherwise empty project which contains only a simple UMXL file and an empty USS file and a default scene to show it in, the UI rendering looks absolutely terrible. The font rendering is especially atrocious, and I cannot believe this is what was intended.

What have I missed, here?

Why does this look like absolute garbage “out of the box”?

image-7

10 Answers

10

I agree, the text looks terrible in these screenshots!

When you say “out of the box” do you mean you’re using the default font ?

Thanks for sharing the artifacts in the documentation images. We’ll have a look.

What I mean by "out of the box" was that I started up Unity for the first time in three years, installed the requisite packages, and followed a "how to" from the Unity docs because I had pretty much forgotten everything by now. I didn't change any project settings, Unity preferences, or camera parameters, I just went step by step creating a new UI document, font asset, etc. and accepted the default values for everything. I've gotten the text rendering to look somewhat better now (not great, but better) but am still encountering a whole host of irritating issues with text (see new post)

–

As it turns out, it’s a universal problem with UI Toolkit that is just more easily apparent with text than most other controls, and happens at what I believe is the vertical center of the screen.

For instance, see how the text is missing a line of pixels on the left where it says “Ability Score Increase”? You can follow that all the way across the screen, in every other piece of text that intersects that line…

This happens with every kind of control: there is a missing line of pixels right in the center of the screen :rage:

For whatever it’s worth, I’ve published a Gist of the control that I use to create glow and shadow effects which can be found here: Custom VisualElement for Unity's UI Toolkit which is useful for creating an "outer glow" effect for buttons, or a "drop shadow" effect for popups, windows, and dialogs. · GitHub

Simple example of glow effect around a button and a shadow effect around a window:

I just noticed that the example image in the official Unity docs also looks terrible :nauseated_face:

I am blown away by the decision to use an example of such obviously trash rendering quality in official documentation.

get-started-with-text_1

Somebody please tell me that this is not as good as it gets, and there is a solution.

In what universe is this considered acceptable font rendering quality?

And it’s not consistent. The first line of text in this Label control is vertically squished and looks terrible, and this is an extremely common occurrence. Quite frankly none of the text looks good, but some definitely looks worse lol.

image

Or this:
image

How are people getting around this?

What I mean by “out of the box” was that I started up Unity for the first time in three years, installed the requisite packages, and followed a “how to” from the Unity docs because I had pretty much forgotten everything by now.

I didn’t change any project settings, Unity preferences, or camera parameters, I just went step by step creating a new UI document, font asset (I did try using the default first, then tried Roboto) etc. and accepted the default values for everything.

I’ve gotten the text rendering to look somewhat better now (not great, but better) but am still encountering a whole host of irritating issues with text.

For example, I can 100% reliably reproduce one issue which happens with Label controls in a scrollable MultiColumnListview (using fixed item height fwiw), as shown below.

EDITED TO ADD - Actually, this problem happens in any case where labels are moved, such as in a regular ScrollView as well.

The problem is actually worse than it appears in the video, but I’m short on time for capturing it and I think that’s representative enough to show that there’s a problem.

The problem shows up in simple ScrollView containers as well: https://youtu.be/Rsp4BWeQfdU

–

The problem I described in my last post shows up in simple ScrollView containers as well :rage:

Are you using a ListView ? Could be an issue with the dynamic height items of ListViews. The best way to address the issue would be to log a ticket using the Unity Bug Reported.

From the video you shared, the Text rendering seems fine, did you fix it ?

The text rendering is “fine” in the sense that it is significantly improved, but still quite lacking in clarity imo. By scouring the web for days looking for discussion of issues with TextMeshPro (because I couldn’t find much about TextCore specifically) blurriness I was able to fiddle with the Font Asset settings enough to get it looking as good as Unity seems capable of at small font sizes.

As for whether I’m using a ListView, this issue happens in a ListView, a MultiColumnListView, a ScrollView, or even sometimes just randomly when a Label has word-wrap enabled.

For instance in the following screenshot, the line that is highlighted is vertically compressed, resulting in parts of the leading character being nearly invisible.

image

The above snapshot is of a simple Label in a Scrollview, and this vertical compression happens 100% reliably at certain scroll offsets (that seem unique to each Label and how it wraps to fit the container). Every single time I have a Label in a scrollable container, this will happen to at least one line in at least one scroll position. The effect can be much more pronounced than what is seen in the screenshot above, but that’s the example I had on hand at the time of responding.

Actually, I just verified that the problem isn’t unique to ListView or any scrollable container, as this is just a plain Label which also exhibits the problem (note the first line of text).

So I guess at this point it’s time to re-evaluate my choices before I put much more time and energy into this project :cry: