The still existing DPI Scale issue, "Blurry alike FXAA UI Text" on Studio and Client

Description

The creation of this Bug Report, is to mention things that remained forgotten from this old thread

https://devforum.roblox.com/t/having-to-modify-override-high-dpi-scaling-behavior-just-so-studio-doesnt-appear-blurry-and-poorly-scaled/103542

 

It contains two sections, and I want to focus on the Roblox one and not Qt. I mentioned Qt, to showcase that you can alter the DPI of your Studio.

 

What you need to know

  • This issue didn’t exist before
  • This issue rolled out on the Roblox Client FIRST. Before it did on Roblox Studio.
  • There were Fast Flags to flee from these changes that caused these issues.
    • Which were removed later…
  • It’s not just Text, but also UIStroke and various of other UI Components.

As once mentioned in a thread. The Luau over C++ case. Maybe not an issue.

It is becoming an unavoidable issue, because the Explorer and Properties Window is going to be replaced by a Roblox UI Luau based Plugin, and they come with Blurred Text. If Blurred Text doesn’t get fixed, these Plugins will be a downgrade.


 

Qt DPI Issues

This one is not so important. Therefore I put it in a spoiler. If you want to alter your Qt DPI for Studio though, you will find useful things.

We may can also blame Qt itself. But Qt does offer some utilities to alter some things.

Summary

But it’s part of the previous issue, but I want to focus on the Roblox App.

Eitherways. Qt DPI Scale Issues are minor. Qt doesn’t cause blurry text. However, since some experienced some issues with Roblox Studio, here is what you can do

This Documentation High DPI Displays | Qt 5.15 contains information regarding Global Environment Variables, YOU CAN INDEED change them.

  • QT_SCALE_FACTOR
  • QT_SCALE_FACTOR_ROUNDING_POLICY, this one is actually set to PassThrough in Roblox Studio. If you change it, you’ll be able to fix pixelated stuff, at cost of some things resizing.

https://devforum.roblox.com/t/explorer-window-in-studio-renders-weird-lines-making-it-very-irritating-not-navigate/2506283

This bug report for instance, is actually also a DPI issue.

I made crazy changes to the Environment Variables, that I created more rendering issues.

image

Just a note. DPI seems to rely on accurate values, if they’re not accurate, you’ll end up like this:

 

Roblox DPI Issues

Roblox Studio

Take a look at this

This is how Text appears in HTML. Perfect and no issues. The font I used was the same file from Roblox Studio, which was Source Sans Pro Regular.
image

 

With the wrong DPI

image

  • This is the same Font Size as the one at the top
  • Notice how certain individual letters are individually sized.

The next thing is that non-blurry text can appear blurred if you go in Fullscreen as well.

With an attempted simulation of the right DPI

The text doesn’t appear blurred.

The thing is these are the same Font Size, and you can’t tell the difference…
image

Not a great screenshot of mine

 

Due to DPI issues, all Stroke issues also inherit from the DPI issues

image

For instance there’s more stroke at the top of the text, than on the bottom.

 

And here there’s more Stroke at the bottom than on the top, and the stroke was Thickness 1

image

 

Roblox Client

Same issues happen on the Client. Except that I can’t override the entire DPI, nor do I believe that overriding Qt DPI will bring the right changes to the Roblox Viewport either.

With DPI Issues:

Without DPI Issues I think:

 

Questionable things

There’s a Fast Flag to override the DPI Scale of the MicroProfiler for instance. And one thing I notice is that the shadow is actually blurry. Is this supposed to be happening?

And what happened to FFlagClientEnableHiDpi2 and the rest of the flags 08/19/2022 11:25:05 · MaximumADHD/Roblox-FFlag-Tracker@4f5e873 · GitHub ?

 

Frames don’t have any blur issues, the corners are sharp, it’s only various 2D Rendering Implementations that can have Blur

image

 

 

The real Description of this issue

https://devforum.roblox.com/t/having-to-modify-override-high-dpi-scaling-behavior-just-so-studio-doesnt-appear-blurry-and-poorly-scaled/103542/81

The intended behavior of the DPI Scale update apparently is:

 

The issue is that the intended behavior is currently not met.

 

Paradox of DPI Scaling

There are various Screen Sizes in inches. Using math you can calculate PPI.

How is an application supposed to know whether it should scale things UP or scale things DOWN?

The Roblox Application certainly doesn’t know, and there’s no way to override this behavior on the Viewport of Roblox Studio, and the Roblox Client anymore.

 

Did you know that 125% DPI Scale in the Windows Settings, means 120 DPI. And that 100% actually means 96 DPI?

This is an important detail.

It’s either 1.2 or 0.8, AND NOT 1.25 or 0.75 Because the 100% refers to 96 DPI and not 100.

Because if you do set the wrong value, you’ll encounter your UI being cut off, same way as the screenshot I put at the “Qt DPI Issues” section.

See the RegEdit value LogPixels as for “Logical Pixels”.

 

Then, should something render first and then scale up?

There’s different scaling algorithms, some make things cool and some make things blurred. But something strange is happening to Text, that I feel like it’s being rendered first and then scaled up.

 

Re-production Steps

Find special screensizes, e.g. 4k or something else.

Or small laptops like 1920x1080 15.6"

The 17.3" should appear fine.

For instance 1920x1080 15.6" can be too small, but not for everything, a measure is to change the DPI Scale, e.g. to 125%. However, Roblox is also scaling up, even though it may not be intended to do so.

What really is High DPI, the screen’s DPI or your Windows Settings?

 

HD screens shouldn’t run into issues. But FHD may do. I don’t really know what is considered HD and FHD. But if a screen with 1920x1080 is only marked for FHD and not HD, then it’s probably a screen that will make things too small to display when on 1920x1080, compared to the resolution it promises for “HD”.

 

Expected Result

That we can force DPI Awareness to not apply, like it used to be possible once. Until all blurred text and icons are fixed.

Some games outside of Roblox fit things as built-in without the help of DPI.

Minecraft for instance has a GUI Scale Option.

Actual Result

Blurred 2D Rendering Implementations.

Affects various things, Text, various UI Strokes, Images, UI Border Rounding, 2D3D Text, e.g. BillboardGui Sizing along with cutoff text.

9 Likes

Could you include images at full resolution? This is a great post describing the issues but is made mostly useless by all the images being downscaled so you can’t visually see the actual state of what you’re talking about.

1 Like

Unrelated but OP (@HealthyKarl) can upload on catbox if they want it as it has no compression.

I guess the images got like that because I took them from somewhere else at where I posted them, which seemed to have gotten demolished. Never really saved a Test Place for it or anything.

From the Browser:

No, issues. (Note I put 50% styling modifier on it so that the images don’t fill the entire post) So, open in new tab. I hope that the preview I am looking at doesn’t change its URL after I click on “Post”.

I can’t really make up what unit TextSize is supposed to be in, I came to that conclusion that it doesn’t seem related to Pixels, so I can’t do this accurate comparison.

So here are just images.

From Studio:

image

Zoomed inspection:

Unevenness

Zoomed inspection

Ditto:
image
image

image

 


I would upload screenshots where I modify the Qt Flags, but I am not sure if it will change anything about how the Roblox Engine wants to render Text to me.

These Qt Flags may not really change how Roblox renders things, only Qt, not sure. It does affect how big these Windows appear though.

Not sure if these values can me altered in order to try to get blurry text, maybe it actually matters on the current set LogPixels

set QT_SCALE_FACTOR=0.8
set QT_SCALE_FACTOR_ROUNDING_POLICY=RoundPreferFloor

image

 

I thought that the best flag is

set QT_SCALE_FACTOR_ROUNDING_POLICY=RoundPreferFloor

path_to_Roblox_Studio

And this is the result… okay well, maybe it’s not the best option

I heard that this shouldn’t be like that

image

The text appears like so though:
image

I can’t… really say if it’s better, EVEN if it appears better. I see similarities if I zoom in. It does appear sharper, but if I look at the zoom I feel like it’s still present in some ways.

But while I have that on, it is definitely harder for me to somehow reproduce this uneven text being chopped into different segments.

image

image

The UI Stroke would also appear normal.

1 red Pixel on all sides, unlike the other thing. That green line is just there to compare the pixels, to see it better, put it in like Photoshop.

The Qt Environment Variable I apply on Studio isn’t a great one, but it sort of gets me to somewhere else… It still deforms the Qt stuff. Plus the Roblox Client doesn’t have that so…

1 Like

This is the file:

dpi_test_1.rbxmx (14.1 KB)

Simply put into StarterGui, it’s the same as:

May will appear different, so not sure.

I don’t know if this is related, but QT UI definitely looks sharper and way more clear compared to blurry Luau UI.

image

Compared to:-

image

I not sure if the difference is visible through the screenshots but Luau UI is blurry and not as sharp and clear as QT UI and this applies to both text and icons, setting the Windows scaling setting to 100% from 125% doesn’t solve it either. I am not really a fan of this, I thought of creating a bug report about how the Next Gen Studio Beta Luau UI looks blurry and way worse compared to the old QT UI.

2 Likes

Dropping some images of my own personal experience with this issue. Roblox built-in plugins appear very blurred at 4K but user plugins and Qt elements appear sharp. At 1080p, everything visually appears sharp and clear (albeit not as sharp as 4K should!)

4K

1080p

1 Like