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

[HealthyKarl]

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.

 

Image

 

@HealthyKarl

These are THE SAME squares.

The difference is that one of the Container has an anchor of 1, 1 and the good looking one has an anchor of 0.5, 0.5

while the white square always has an anchor of 0.5, 0.5

 

Pay attention on how the white square moves its locations, it is supposed to remain in the center, but it doesn’t always do that.

---

 

Qt DPI Issues

This one is not so important. Therefore I put it in a [details] forum formatting. If you want to alter your Qt DPI for Studio though, you will find useful things in the “Summary” below.

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.

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.

 

With the wrong DPI

• 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…

_{Not a great screenshot of mine}

 

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

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.

Unevenness

Zoomed inspection

Old Images

 

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.

Did Roblox change something with the entire game UI?

I don’t know what the cause is, but in any experience I go, all the game UI is scaled and I don’t know why this all of a sudden happend. Like, I don’t understand. I deleted all the Roblox settings, but that was not the cause? Did Roblox add a new feature or is it something on my end? How did this happen? I don’t notice this issue in Roblox Studio. But all the UI, custom from experiences and the default Roblox one, is scaled.

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

 

 

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:

@Tiffblocks

What screen resolution and what DPI scale factor do you have set in your OS? These heavily downscaled screenshots say very little.

The intended behavior is that the Roblox client will scale based on the DPI setting in your OS, just like the OS itself as well as other apps on your PC. The default DPI scale is generally set to match what it would look like on a low-DPI screen (e.g. a 4k screen will be set to 200%, so that UI will be the same physical size as it would be at 1080p at 100%), but you can change this easily.

It’s not clear to me whether you’re experiencing something other than the intended behavior, or if you’re unhappy with the intended behavior. If you want the UI to be smaller than normal, then I’d suggest changing the scale setting in Windows.

 

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”.
https://learn.microsoft.com/en-us/windows-hardware/manufacture/desktop/dpi-related-apis-and-registry-settings
 

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.

Microsoft Paint doesn’t have this issue. There’s also some different colors to it compared to when you’d generate text through Canvas in HTML.

This is known as ClearType and Roblox doesn’t seem to have that. While it not using ClearType isn’t the issue, it would aid with making text appear better. But the actual issue is that other UI Elements and etc. just appear wrong.

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.

 

---

Additional Info

• The still existing DPI Scale issue, "Blurry alike FXAA UI Text" on Studio and Client - #4 by HealthyKarl
• The still existing DPI Scale issue, "Blurry alike FXAA UI Text" on Studio and Client - #5 by HealthyKarl

[tnavarts]

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.

[weakroblox35]

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

[HealthyKarl]

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:

Zoomed inspection:

Unevenness

Zoomed inspection

Ditto:

 

---

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

 

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

The text appears like so though:

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.

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…

[HealthyKarl]

This is the file:

dpi_test_1.rbxmx (14.1 KB)

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

@HealthyKarl

May will appear different, so not sure.

[ItzAidfoplays390]

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

Compared to:-

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.

[ChasingSpace (Chasing)]

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

[HealthyKarl]

This is a 22x22 black square and the green square is 16x16

all sides have 3 pixel of space

But not on Roblox

That Radio Button has catched my attention since the first time I’ve seen it. It was not centered at all. But that’s probably also related to the DPI issue. So, here we see the black square in that image being 22x22 and the grey square is 16x16 with an anchor of 0.5, 0.5

Nothing can help to center this thing. I think the DPI issue is too strong to fix this issue on a DPI affected environment.

Not even position 0, 11, 0, 11 can help it.

It’s actually so bad that I don’t even know if size 22x22 is 22 pixels or not. Because if I change it to 23x23, I feel like it added 2 more pixels of thickness instead of just 1 pixel.

 

23x23 and 17x17 visually does work on this DPI affected environment, but now let’s take a look at circles

Circles are not supposed to get CUT.

 

 

For reference, this is Photoshop

You could make a UnitTest on a DPI affected device. Aslong a Roblox UI 22x22 and 16x16 doesn’t nicely fit in the center, we can assume that this issue hasn’t made progress on being fixed.

[HealthyKarl]

@tnavarts

I have found some other interesting issue.

These are THE SAME squares.

The difference is that one of the Container has an anchor of 1, 1 and the good looking one has an anchor of 0.5, 0.5

while the white square always has an anchor of 0.5, 0.5

DPI_issue_square_test1.rbxmx (11.7 KB)

Simply drag into StarterGui

 

Just note that, this square thing is not the only issue. The text, and other components e.g. UI Stroke and how UICorner rounds up and all that. Those cut circles, I am mostly certain that these are all connected somehow.

 

 

Here is also a video of a the same square but it’s on a Frame

Pay attention to how the white square moves its locations, it is supposed to remain in the center, but it doesn’t always do that.

DPI_issue_square_test2.rbxmx (8.2 KB)

 

If I run Studio in this mode

Summary

@echo off
setlocal
for /f "usebackq tokens=2*" %%a in (`reg query "HKEY_CLASSES_ROOT\roblox-studio\DefaultIcon" /ve 2^>nul`) do set iconPath=%%b
if "%iconPath%"=="" (
    echo Path not found
    goto :eof
)
set iconPath=%iconPath:"=%
set QT_SCALE_FACTOR_ROUNDING_POLICY=RoundPreferFloor
:: Run
start "" "%iconPath%"
:end:

I don’t get this issue, but now everything is a bit smaller, right?

I think the issue here is that… the way on how DPI scaling currently works, is just wrong.

Video

[Gutipaiva10 (GustaGamerMTW)]

How has this issue gone unnoticed so far? I have noticed this so many times already where UI Strokes & Circles look just horrible.

Please fix this.

[athar_adv (athar_adventure)]

Hello, can still reproduce the same issue after a few months.

side by side comparison of a custom explorer plugin vs the Qt-based default one, default has much sharper text even though both use source sans regular

Please fix Roblox, this is a very big visual issue.

[Dogekidd2012]

Hello, thank you for the very detailed bug report. We understand that this issue is becoming more pressing with the impending releases of Next Gen Studio and Explorer, and our general movement towards replacing Qt UI with Luau UI.

We are not entirely sure what specifically the underlying issue is, although the team have investigated this in the past. Our text rendering stack does apply font hinting, which is supposed to give crisper results, but there is either something off about it, or we need to do more in order to get better sub-pixel rendering. There’s no simple fix or setting we can flip, this is all pretty in the guts of Roblox’s core text rendering system.

Unfortunately, we do not have plans to fix this soon, and certainly not before the general releases of these beta features. This is not because we do not think this is important, but because the fix is very nuanced and the team responsible has more pressing things to work on.

[HealthyKarl]

Oh.

Where is “Roblox’s core text rendering system” ?

[ItzAidfoplays390]

I don’t know if the root cause in Studio is related to the one in client, but in the client enabling the flag DFFlagDisableDPIScale seems to fix the issue there for GUIs and text too.

[Dogekidd2012]

You’d have to tell me–unfortunately my resolution is too high to see this bug myself.

[ItzAidfoplays390]

I believe it happens when the scaling rate is above 100% independent of resolution but I am not sure.

[deIuxor]

This sounds about as bad as it gets. Let’s take something that currently is in perfect condition, downgrade it to something that is blurry for 99% of users, knowing that the fix is complicated, so that when it does release, and everyone is complaining about it, they will have no time to get to work on the complicated fix without making the company itself look like dead meat in comparison to other companies and platforms who are competing with Roblox. Maybe I’m missing something?

[athar_adv (athar_adventure)]

Why are you releasing it before fixing the blurry text??? This seems like you guys have your priorities completely messed up

[IdontPlayz343 (FPS Enjoyer)]

From screenshots I’ve seen, it very much seems like subpixel rendering just doesn’t happen, but that could be the anti-aliasing. The screenshots I’ve seen show that QT ui has the colorful borders on text, whereas the luaU ui has grayscale text borders.

[Tiffblocks]

After the previous post, we had a bunch of discussion and investigation, and found the root cause of at least one of the DPI scaling bugs. I enabled a fix for Studio which resolves the blurry text / “FXAA text” issue. I will enable it for Client soon as well.

The issue was caused by all UI being rendered slightly (<1 pixel) misaligned from the pixel grid. It only happens when the window’s content area is not evenly divisible by the DPI scale ratio. (E.g. 1001 pixels / 2x dpi scale = 500.5 pixels, not a round number.)

There are other issues mentioned in this thread that are different from the “FXAA text” issue, which aren’t fixed by this change.

• The lopsided squares is a distinct bug, related to pixel grid snapping.
• Lack of subpixel AA is a different issue, and unlikely to be implemented. (I also think there are other things wrong with how engine text is rendered, that have a larger impact than subpixel AA.)