Uneven scaled objects

UI objects that are equal to each other in scale size and absolute size have different visible sizes for an unknown reason (maybe something to do with UIListLayout?)

As you can see in the pictures below the size is different!



image

Beta features enabled:

  1. Updated Roblox Controls
  2. Terrain Editor
  3. Notched Screen Support
  4. New Dragger
  5. Assistant Preview

System info:
Windows 11

CPU
Intel(R) Core™ i7-10700F CPU @ 2.90GHz

‏‏Memory

‏‏‎32.0 GB

GPU

NVIDIA GeForce RTX 3070

Expected behavior

I expect that when I have UI objects that have the same scale properties inside of the same instance would be exactly identical to each other

2 Likes

This is just an acknowledgment announcement!

We’ve filed a ticket into our internal database for this issue, and we will update you when we have further information!

Thanks for the report!

2 Likes

image

Any news? This still happens

Object’s anchor point and position is 0.5 to clarify

Should look like this:
image

On phone resolution the difference is massive and very visible:
image

It looks like the height of the green progress bar on the top is larger than 10px, so it’s overflowing it’s grey parent?
image

Would you be able to send this file as a rbxl or rbxm please? You can attach it as a private message or DM. Thanks!

No the grey parent is bigger than 10px as well when its not highlighted
UnevenScaling.rbxm (32.1 KB)

By the way this has been a problem for quite a long time glad to see y’all on it finally, keep me updated :+1:

Also a note, I sized it down so the difference is less noticeable in that file, change the center frame size to 0.25 instead of the 0.2 scaling and the issue will become more noticeable

1 Like

Thanks for the repro file! I changed the center frame size to {0.25, 0},{0.2, 0} as you mentioned.

Can you please clarify which UI objects have different visible sizes? Here are the sizes I am seeing:

LevelBar: AbsoluteSize = (434.25, 17.37) px
image

BlockBar: AbsoluteSize = (434.25, 17.37) px
image

I then opened a screenshot in Photoshop to measure the sizes in pixels, and I found the LevelBar (orange bar) has height 17, while the Blockbar (blue bar) has height 18:

So just to verify, is this 17 vs 18px difference the issue you are reporting?

We do round unrotated GuiObjects to the nearest pixel on the screen, so it looks like the top bar got rounded to a 1px different height than the bottom one.

1 Like

Random question, but is this the same case for strokes smaller than 1px? I think this logic causes visual disparities with sizing of small strokes.

I think for the UIStroke with Thickness<1 px, we are using a non-antialiased shader for rendering strokes. So it looks like some edges might not have a stroke rendered (example at Thickness=0.5) because the stroke is less than 1px in width:
image

If possible, could you create a separate bug report for this UIStroke bug please? That way we can track it. Thanks!

1 Like

Hey if it looks the same to you it might be a resolution issue that impacts the sizes, try to use different resolutions and see if it’s any different. The orange bar is supposed to be higher in size than the bar below it (ofc with this issue)

image

Should look something like this at around 1335 x 802 pixels studio window size (mesured at paint.net)

image
This picture is Xbox One resolution selected, there also seems to be a slight change in the gaps (between the orange bar and the blue bar its at its largest) which is weird considering the UIListLayout’s padding is 5 pixels so it usually is consistent (this usually is an issue with scale padding rather than offset padding)

Side note, the pictures are with the size 0.2 rather than 0.25
image
Also just noticed u kept the Y at 0.2 idk if it matters but I do both X and Y scale when I change the size

Would you be able to post a screenshot showing the 2 progress bars having heights that differ by more than 1px?
I tried different resolutions and I was only able to get 1px of difference. Also the padding between the 2 progress bars was always 5px when I measured it.

I did above but ig I’ll just send u another repro file and tell u a specific resolution to put it to

To replicate this where u can see a big size diff between the blue bar and the orange bar, take this repro file and set to HD 720 resolution like in the picture

CenterFrame.rbxm (31.1 KB)


Must have something to do with resolution imo @stadium_parkour

@stadium_parkour Any news? Also what about the uneven scaled padding?

Thanks for following up on this!

Because we round non-rotated GuiObjects to the nearest pixel, small GuiObjects or small paddings may be rounded differently based on where they are onscreen. So, I believe the screenshot you posted is the expected behavior, because the low vertical screen resolution makes the rounding more noticeable:
image

Well isn’t it possible for y’all to consider doing something different to prevent that? Because that looks very bad and discourages the use of scaled padding, the reason I didn’t go for 5 pixels for instance is the space that’ll add up on a tiny screen will make that huge and ugly. Also any news about the different bar sizes?

or just use offset??? offset better in every way btw

As I said previously offset looks bad on small screens and make the UI bigger than I want it to be, even 5 pixels count as much in tiny devices

OK thanks for the feedback! I will discuss this with the rest of the UI team and see if we can find some solutions!

Another thing to check is can you repro this on an actual mobile device screen? In Studio we render the Device Emulator devices at 1x pixel ratio, but real mobile devices use 2-4x pixel ratios. So I suspect on real devices the difference of 1 pixel will be much less noticeable because of the DPI scale.

1 Like

its not that hard to make a simple script to resize it depending on device

What are you talking about??? Script to do what exactly?