Hello, I was recently making a simple settings GUI with a horizontal scrolling frame at the top with buttons representing different categories. The scroll bar looks totally fine in Studio, but it breaks and looks divided into three parts when I launch the game.
Here are some screenshots:
UI inside studio
UI in game
I tried resizing all the frames and the scroll bar, making all the frames transparent to see if there is a possible scaling issue, but nothing works. I also restarted Studio, but since it happens on a normal client as well the chances of that fixing anything are low. The issue happens every time I play my game. Did I do anything wrong? All replies are appreciated!
Thanks! I’ll have a closer look at the Top and Bottom images as soon as I can. I haven’t changed them, but I will try resizing my frames once again as well as testing it on more devices.
So I tested this again and it seems to be an issue with sizing of the UI. I played my game in Studio and it started working all of the sudden, but it’s still broken on certain devices. It’s unpredictable, with some sizes working and others not. I’m starting to think it’s some sort of bug.
You can use UIAspectRatioConstraints to solve it not working on other devices.
I recommend a plugin called AutoScale (Lite / Plus) which basically converts a UI element’s size/position to Scale or Offset, and the auto scaling feature.
TLDR: It makes your UI retain it’s size on all screen sizes.
This has been a bug for a long time and still is. Whenever you have the scrollbar horizontal you get it looking weird not really a thing you can fix (from what I know of).
