In many games I’ve played, I noticed that a majority of them seem to disregard the CanvasSize of a ScrollingFrame and leave tons of empty space. This library was designed to aid developers in maintaining the aspect ratio of each child element within a ScrollingFrame, while automatically sizing the canvas. LayoutUtil is designated specifically towards UIGridLayouts and UIListLayouts, hence the suffix, “Layout”. It’s simple to use and all boils down to a simple function call to get everything up and running.
Consider using LayoutUtil-Plugin, it allows you to automatically calculate UIAspectRatioConstraints in studio!
SETUP
With LayoutUtil v2.0.0, it’s never been easier to use. You simply need to call the function returned directly from the library.
LayoutUtil(myUIListLayout)
EXAMPLES
Without LayoutUtil
As you can see in the gif, this game doesn’t maintain the aspect ratio of each child. This progressively gets worse over different resolutions. You could also see all of the blank, empty, and extra space left at the bottom. In this example, they keep each child element in offset, if it were in scale, it would stretch. This is a big problem LayoutUtil aims to fix for developers, it enables you to use scale without stretching, all while automatically resizing the canvas.
With LayoutUtil
Contact
Roblox: iiNemo
Discord: nickk#9163- Try to DM me directly rather than adding (for a quicker response).
Does this module account for UI elements inside the frame that use Scale as the size (eg a button inside that frame that has its size set to {0.1,0}, {0.1,0}? I want my buttons to size down for mobile and size up for bigger screens, and all of the code I’ve used to try and do this unintentionally makes the UI elements bigger/smaller than intended.
If not, an alternative would be neat because I’ve been stuck on this for a bit now.
For that you should be using UIAspectRatioConstraints, they will automatically resize a GuiObject based off the aspect ratio of your screen. If using it alters the size of the GuiObject, then keep tweaking the AspectRatio property until it seems to align with how it was before.
The config parameter is just for extra functionality, I should probably make that more clear. If you read up on the example page, all you have to do is require the module and then do .new(UILayout).
local LayoutUtil = require(PATH) -- define the path to the module
LayoutUtil.new(UILAYOUT) -- define the path to the UILayout
Above is all you need to do to get it to work automatically.
He was talking about an actual UIPadding object I believe, which really shouldn’t affect LayoutUtil. With your statement though, that brings up an idea where I shouldn’t restrict users from having to change the padding directly from my module.
This is simply a game-changer! This has become so essential in UI development. It’s simple to set up and had saved me so much time! Thank you for releasing LayoutUtil!
Am I doing something wrong here? I’m trying to use this with a UIListLayout, with all items using Scale for size and position. Testing it in the command bar first.
X scroll direction being created when I don’t want it to.
Resizing the window too much seems to create an issue where the items dont fit the ScrollingFrame, and this change seems irreversible (as seen in the gif).
Does this module convert offset values to scale, should i use scale or offset for my elements? I am currently making custom chat and im really stuck i mean literally scrolling frame is just a joke for me and its practically impossible to make responsive design with it
I’ve gone out to test it myself and I noticed that a previous fix ended up causing the problems described in your gif. I just released a new version which should fix your issue here. Also don’t forget to use a UIAspectRatioConstraint on top of everything.
The ScrollingFrame should be set to a CanvasSize of (0, 0, 0, 0). With that you should be setting all the children to scale from inside studio, there should be no offset.
