Ive recently started making UI’s for my game. I am trying to make a UI using a scrolling frame for a list of items. The problem i’m running into is that the children inside of the scrolling frame get either cut-off or have too much space on the right side. All children use Scale instead of Offset. Listed below are screenshots of the UI on multiple screens via studio.
[EDIT] This is the only thing that is keeping my game from being released, i’ve tried basically everything.
Studio Screen : Perfect, How I want it to look on every device.
Hello, the main problem is that you didn’t scale things correctly. I would recommend you making your GUI from scratch but following these steps:
First of all I will highly suggest you using AutoScale plugin that does all calculations for you. All you have to do is set offset size of objects and convert them to scale size/position with AutoScale [Plugin] AutoScale Lite for GUIs - Scale your UI. This has to be done to every single object in your GUI!
UIScale and UISizeConstraint are not needed, add “UIAspectRatio” by selecting main frame and clicking “Add Constraint” AutoScale plugin button (Do this after your UI is completely scaled and done)
Scale ScrollingFrame {1, 0, 1, 0} (Full size of your main frame), inside of the ScrollingFrame keep UIListLayout but scale other frames (can’t be done with AutoScale plugin so you have to do it manually). Set size to {1, 0, 0.04, 0}. 1 - scales your frame on the full length of the scrollingframe. 0.04 is width of the frame (if you want it to be bigger do 0.05, smaller 0.03 etc. etc.)
Text inside of the frame should be sized to {1, 0, 1, 0} if you want to change size of the text simply insert “UITextSizeConstraint” in and play around with value of it (100 is the max size)
Padding between the edge of the frame and scrollingframe bar will always be different on different devices because the scrollingbar is not scaled by default in roblox and I dont think it can be fixed.
