UI frames do not stay in place

Help and Feedback Art Design Support
#1

Hello!

I am currently designing a menu UI for my game. For each of my frames within the UI, I am using another frame to provide a different-colored border appearance. It looks fine in the Studio editor but whenever I play-test my game, the frames somehow shift a bit towards a certain direction. I tried using different methods such as implementing the UIAspectRatioConstraint but the result is almost the same. Any solutions? I have attached images below for more details. Thank you.

What I want:

Image1.PNG
Image1.PNG1553Ă—906 100 KB

What I’m getting:

Image2
Image21546Ă—897 173 KB

#3

Did you scale the second frame that you used for the border color?

#4

Yes, this is what I did

Capture
Capture734Ă—913 105 KB

#5

And you scaled all of these too?
image

#6

Yes, everything is scaled. Nothing uses offset.

#7

Are you using ZIndex? Have you tried changing the AnchorPoint?

I would also like to recommend my UI plugin: RoAutoScale - Roblox

#8

I’m currently doing that right now. I am changing the anchor point of the inner frame from 0,0 to 0.5,0.5. I will let you know the result.

#9

Unfortunately, I get the same result.

res1
res1658Ă—853 89.9 KB
res2
res2330Ă—659 61.2 KB

#10

Try making the “Map” frame ZIndex = 2, and “Background” frame ZIndex = 1

#11

https://gyazo.com/d9108ac1739b97e87c59169e534bd1c3

I did and unfortunately, I get the same result.

#12

Could you send a copy of that UI? I’d like to try it and see the issue.

#13

I’ve sent you a portion of the frame which should be enough.

#14

I changed the “Background” frame Size:
image

Then converted it back to Scale using my plugin:
image

The border is now 2px, since the Offset was -4, it’s -2 for each side.
image

The problem here was just size values! :slight_smile:

In addition, Borders or anything else that is not divisible by 2 generally does not line up well in Roblox! - or any other “pixel based” software.

EDIT: Found out that the “Background” frame was not the single problem.
I’ve selected everything in the UI (all descendants) and converted them to Offset, then back to Scale, it finally fixed everything. Did all this using the 1920x1080 device emulator.

For texts, I first set the AnchorPoint to the center (with “Set Position” disabled) then I used the Text Bounding function, deselected “X Axis” and clicked “Text Bounds” button, then in the Properties panel I turned TextScaled = true - after that converted everyhting back to position/size scale!

UI now fits natively in any device: (example below is iPad Pro)
image

You can try the steps above using my plugin! https://www.roblox.com/library/5365121757/RoAutoScale

1 Like
#15

Awesome! I’ll try it out when I get back home!

1 Like