Studio:
Live Game:
Repro:
imgtest.rbxl (14.4 KB)
Happens on any game I test with these assets. Doesn’t relate to screen size.
macOS High Sierra, Intel Iris Plus Graphics 640 1536 MB
15 Likes
Are both Images viewed on the same quality level?
1 Like
The studio quality level is 10, and the client’s graphic’s quality is 10 both live & studio. It seems quality level is different from graphics quality. How do you check quality level live?
1 Like
I also have been noticing this in live servers, but for mobile. I fixed the black outlines around images due to transparency issues and they work fine and PC and Xbox but as soon as I load up my game on mobile, the black lines around images appear again.
1 Like
Was this uploaded via. the studio widget or from the website? Could also be a scaling issue.
2 Likes
The images were uploaded from the website.
Studio uses 21 quality levels instead of 10.
So client’s quality level 10 shows quality level 21 in studio. If your studio uses level 10, it means it really uses quality level 4 or 5 (as seen from client’s perspective).
You’re checking this in Studio settings, right?
(Settings>Rendering>EditQualityLevel; QualityLevel is for the Client, EditQualityLevel is for Studio)
Having the same issue here: GGGGG14's Place Number: 175 - Roblox
in-game
test server from studio
Clear difference in crispness, same blurriness in-game regardless of graphic quality.
1 Like
This really needs to be fixed.
1 Like
Bumping this post again. Would appreciate if this was looked into or a statement was made saying “we won’t/can’t fix it.”
That may just be how images are scaled. Along with the fact that your second screenshot is in general, less sharp than the first one as seen by the (…) menu in the top right. None the less, you can look at this article by Quenty that briefly talks about how to fix blurry images: Fixing images in Roblox UI. | by James Onnen (Quenty) | Roblox Development | Medium
I checked that out about a month ago, and I gave it some consideration. But the problem is that there is reduced quality not only with the images, but also with the text.
The fact that all UI elements seem to blur raises two concerns:
-
Even if there is a way to fix blurry images, that does not solve the question of why they are perfectly fine in studio, but not in-game. I suspect it’s an issue on ROBLOX’s part of using some sort of faulty UI in the actual ROBLOX player. There is no reason there should be diminished quality in-game, but not in studio (if it were vice-versa, this wouldn’t be a huge issue.).
-
I’m noting diminished image quality not only on the GUIs that I created, but also on ROBLOX’s core GUIs themselves. If you take a close look at the ROBLOX icon on the top-left, you can see that it’s clearly blurry in-game:
STUDIO
IN-GAME
Of course, the in-game one does look smaller in this image because the low size compared to the game window. Still, there is no reason it should be this blurry, even at this size. I’ll take some new screenshots right now of it in-game vs in studio.
Let’s play a game. Try to guess which one is in ROBLOX studio, and which is in-game.
If you think it’s just my computer, I’d encourage you (and anyone who reads this post) to test it yourself by comparing ROBLOX CoreGUI quality. I’ve had some friends test it and noted it on multiple different devices, but increasing sample size is never a bad thing.
This article is super useful, thanks for this.
It doesn’t surprise me that something as network-focused as Roblox would downsample images to improve network performance, even if quality is maxxed out, but you’re right @big_thonk it is strange that even the Roblox logo is a victim of this in-studio compared to in-game.
I’m okay with doubling my image resolution just to get around the way that these images (in my opinion) are being intentionally downsized to save on everbody’s bandwidth. It just sucks that this is an issue that other engines don’t face as regularly.
This is because of a feature called high DPI which is possible on devices with high resolution displays. Currently, high DPI is supported on:
- Studio for macOS
- iOS
- Android (Google Play, Kindle, ChromeOS)
It’s not yet supported in the desktop clients or on Studio for Windows, though this may change in the future.
If you’re on Windows, you can check if your device is set to high DPI by going to your system display settings and viewing this setting. Windows will set this value by default based on the resolution and diagonal size of your screen, to make text always be roughly the same physical size.
For the default values, 200% is equivalent to Retina, while 100% is low DPI or what you’d normally see for a user on a 1080p display.
I can’t find a way to view this info on macOS, but if you’re not using an external monitor, then you can use whether your device is a Retina device to tell whether it supports high DPI or not. External monitors are likely only going to be high DPI if they’re 4K resolution or higher.
As of 2021, the majority of mobile phones and tablets have high DPI displays, with the exception of the very lowest end devices, and very old devices like iPad 2. MacBooks made in the past several years are so-called Retina devices, which means they support high DPI with 200% scaling. However, the majority of Windows laptops and desktops don’t support high DPI. On desktop, high DPI is often synonymous with 4K.
The majority of Roblox players currently don’t have high DPI displays, so I recommend testing for and targeting your UI design for the lower resolution. Hopefully in the future we can also add tools to let you simulate low DPI from within Studio as well.
I hope this clears things up!
Update (March 2024)
DPI scaling is supported on Windows and macOS, in both Studio and in clients.
13 Likes
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.