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!
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
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
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
BlockBar: AbsoluteSize = (434.25, 17.37) px
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.
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:
If possible, could you create a separate bug report for this UIStroke bug please? That way we can track it. Thanks!
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)
Should look something like this at around 1335 x 802 pixels studio window size (mesured at paint.net)
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
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.
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
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:
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?
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.