PC:
Mobile (S8+)
Why does this happen? Here’s what some of the properties look like:
Normally I’d assume it’s just resolution scaling but as of recently @zeuxcg enabled something that allows phones to run GUIs at native resolution.
Any idea what’s going on? I can re-create this uglyness in studio by setting the resolution to something super-low, making me think roblox is still scaling UI in some way or another:
Edit: On my iPad Pro 12.9 2017 it works fine. What gives?
This is really weird since close button uses pixels, and that on your iPad it works.
I would think that’s a S8+ problem? Could you try the mobile device test on studio? Check most of phones? I seriously have no idea why it does that.
iPhone 7+ & iPad 2
Do these need to be updated in studio? At 1080p (iPhone 7+ resolution) the UI does not look like that on desktop…
Pretty sure I’ve run into this problem before. I thhhhhhhink it has something to do with Roblox dpi scaling and 9slice frames not agreeing with each other… idrk
Roblox downscales resolution on mobile apps a ton (especially Android). It’s really annoying but I think its the source of your problem since your combining scale and offset. You can see the resolution on studio when you set the device.
Even though the iPhone’s screen is 1080p, the Roblox app is 736x414. I use scale 99% of the time so most of our UI works on both desktop and mobile without any scaling issues.
I’ve known about this, I just thought that on a high-spec android I would be able to run UI natively.
Unfortunately not. Roblox doesn’t tailor their Android app to the flagship Android phones like some apps do.
Edit: However, now that I’m looking closely the UI for my game looks really nice on my Pixel 2 XL (unlike my old Pixel), which makes me think it might be running in a higher resolution.
aaaand i’m sure you know by this point how bad 9slice frames look in low res 
Actually I might be wrong. It looks like Roblox does upscale with higher resolutions (instead of my thought that they offered one resolution for all Android phones). Look at my Pixel 2 XL vs my moms S7. Mine is a higher quality screen and the UI is also higher quality.
So I actually don’t know whats going on.
Wow, that’s really really crispy. Can you try playing this and show me what you see?
I mean you used a pixel scale and the absolutesize shouldn’t change at all… I don’t understand
The behavior you are seeing is correct. I think a lot of this is because you have some of your UI set to RelativeYY (this basically means the size does not change unless you resize the y axis of the window). and some of the other ui set to RelativeXY
Here is the element breakdown in two emulators:
S7 resolution (640,360)
iPad Pro resolution (1366,1024)
Basically at small enough resolution setting the x size to be larger than the parent is eventually going to break down this effect. I’d suggest splitting the two sections of white dots into two images and parenting the to the title bar, with appropriate offset.
Also as some of you noticed, we render android 2D UI at full res of the device now (we also do this on iOS, but its been this way for awhile). The actual “Roblox pixels” did not change, so the resolution reported stayed the same. This is so current ui continues to work, and also makes it easier to design ui across all the various pixel densities found on android devices (all roblox pixels on mobile devices are roughly the same physical size). When you use higher res images or use text objects, they should all now look a lot better out of the box.
In case darthskrill’s explanation didn’t come across, the idea is that: If you have a 2436x1125 iPhone X with a 5.8" display (462.63 dpi), we won’t actually set the AbsoluteSize of ScreenGui to 2436x1125, instead we’ll set it to a value of 812x375 (a 3x smaller number).
Other than bugs, and some minor information leaks, there’s no way to tell that the device is actually 3x more pixels than we say it is. When we go to render your UI, we will actually render it 3x larger, so that it looks sharp and crisp on the device. For example, if you make a 1 “pixel” line, it will be 3 native pixels wide on this device. If you render TextSize=20 text, we actually render TextSize=60 text. If you render an ImageLabel with an image in it, we upscale that image (unless it’s from the content folder and has an @2x or @3x version).
The main reason we do this is so that UIs will be readable no matter how detailed the device is. All of the other applications on your phone do this as well, including web browsers. We try to normalize for a value of around 160 dpi, which means that a TextSize of 20 is always hopefully physically at least an eighth of an inch high. Any smaller and it’s unlikely to be a good player experience.
In the Web world, these “Roblox pixels” are usually called “device independent pixels” shortened to “dp”.
If your UI looks wrong on a high DPI device because of the device being high DPI, that’s probably a bug. However, if your UI still looks wrong when you load your UI into the Studio emulator, it’s most likely a bug in your UI, not on our end.
I recommend always testing your UIs with a wide range of screen resolutions to make sure that they don’t break when scaled down to a mobile device.
