Interesting situation, but unfortunately there is currently no way to add CanvasSize padding. You could fix this problem by having a container frame with a ScrollingFrame inside, but I could see how that is inconvenient and doesn’t have the exact same behavior. I’m actually planning on revamping the library and approaching it from a whole new angle which should solve issues such as this one.
3 Likes
Am I doing something wrong here?
https://i.gyazo.com/c2dcdb4700aba78bfe4fa5dc2f81ee25.mp4
Left side is the intended size of each layout item (scroll bar omitted), right side is with LayoutUtil.
The problem seemed to fix itself when I moved the UI code to a LocalScript (only had it in a server script because I was using a surface GUI).
However, I’ve stumbled upon another problem albeit more minor. The scroll bar inset doesn’t seem to work when it appears in the scrolling frame:
https://i.gyazo.com/295b37697851de7ec4d317ffffa3868d.mp4
You can see the word ‘wipeouts’ gets cut off in the last second of the gif.
ScrollingFrame properties:
1 Like
It seems that ScrollBarInset doesn’t work with Offset and LayoutUtil doesn’t automatically account for that. I’ve been busy lately, but I’m still planning on revamping this library which will definitely fix bugs like this.
1 Like
Something that would be useful for the plugin is if it was just one single button in the toolbar that popped out as another window, as to not clog up the toolbar.
1 Like
I’m actually planning on releasing the next version within a few days. This is something I’ve taken into account, as I don’t like my buttons being cluttered as well.
1 Like
LayoutUtil v2.0.0 
In version 2.0.0, LayoutUtil has been completely rewritten… yet again. This time, it’s much much better >:). No more of the useless and bloated API. LayoutUtil has been completely cleaned up and is composed of only a single function that can be simply called to apply changes. Along with this, I highly suggest ONLY using the plugin, where no scripting at all is involved (as described below). Circumstance will determine whether you need the library during run-time, but it’s always something to keep in mind. The new version of LayoutUtil, no longer allows you to specify the ScrollingFrame directly. This was done to be more explicit and to make the code more readable. With that, this feature was removed due to it being unnecessary and only contributing to the bloat.
To get into the specifics, LayoutUtil no longer has any connections, any run-time manipulation, it simply utilizes and pre-calculates UIAspectRatioConstraints. With the new release of the AutomaticCanvasSize property of a ScrollingFrame, you simply don’t need to worry about any prerequisites. This means, no more having to rely on converting your UI to scale (although I strongly suggest doing so). Setting your CanvasSize to (0, 0, 0, 0) is optional, but while using the AutomaticCanvasSize property, it will act as canvas size padding. Unfortunately with this property being so new, there are specific problems as described in this thread, but they should be quickly resolved over time.
One thing to note is LayoutUtil doesn’t assign the AutomaticCanvasSize property, this should be done by the user. As a side note, some people will say “then what’s the point of LayoutUtil?” Its primary goal was to maintain the aspect ratio of each child element within a ScrollingFrame, while utilizing these layouts. This is what it currently does and what it will be doing over updates to come.
Typescript Users
Typescript is still supported under roblox-ts and version 2.0.0 has been published to npm.
Roact Users
Unfortunately with how Roact works, a LayoutUtil component just simply isn’t feasible. I’ve tried a variety of solutions, all leading to dead-ends. Although you could fork the code and create a component to automatically calculate a UIAspectRatioConstraint’s aspect ratio. A friend recommended this open-sourced component, created by @sayhisam1, which utilizes UIScales uniquely and successfully. You can read more about it within the code, but it seems to really help overall with designing UI, especially for keeping a consistent size across all resolutions.
LayoutUtil-Plugin v2.0.0
Yes, even the plugin had a complete remake. LayoutUtilPlugin gets straight to the point, none of the extra fancy buttons to help with designing your UI, you could simply press the single button while selecting your UILayout/ScrollingFrame(s) to automatically insert and calculate the UIAspectRatioConstraints. LayoutUtilPlugin uses the LayoutUtil library internally… obviously, but I highly recommend it if possible as it would save unnecessary coding.
LayoutUtil-Plugin v1.0.0 did have a few handy extra UI tools, I plan to release a separate plugin which is specifically for this. I know most converter plugins aren’t as in-depth with converting and aren’t as supportive, which is why this could be useful. Not only that, but automatically calculating aspect ratios is a gift from heaven. There is no guarantee when this will be released, which is why I say it will be some time in the future - stay tuned.
Where are the docs?
Documentation isn’t needed, there is not much of an API and it’s fairly basic - straight to the point. The README.md suffices and should be enough to get a complete understanding of how to use it. Although if there are any questions or concerns, feel free to DM me.
Examples
Obviously, in this example, you’d need to define LayoutUtil and myUIGridLayout.
LayoutUtil(myUIGridLayout)
LayoutUtil also provides a second parameter if the parent of your UILayout hasn’t been set. This should normally be defined as your ScrollingFrame, although it also accepts a Vector2 since it just needs the AbsoluteSize. If a non-GuiObject is passed it will assume the parent size is the screens resolution. If a GuiObject is passed, it will use its AbsoluteSize.
LayoutUtil(myUIGridLayout, ScrollingFrame)
Contact
Roblox: iiNemo
Discord: nickk#9163 - Try to DM me directly rather than adding (for a quicker response).
Repository | Release | Roblox Catalog | Plugin
9 Likes
This is amazing, I’ve been struggling with this issue for a very long time.
1 Like
how do i use this???
I have been trying to use this for the past 30 minutes and still have no idea why it won’t work.
The grid layout is written in scale and the canvas size is {0,0} {0,0}
This is a local script I put inside of the grid layout:
local LayoutUtil = require(game:GetService('ReplicatedStorage').moduleScripts.LayoutUtil)
LayoutUtil(script.Parent)
I also tried the “LayoutUtil.new(script.Parent)” that you told someone else to do, but that didn’t work either.
Any help is appreciated!
3 Likes
It doesn’t let me scroll… When I use the AutomaticCanvasSize it lets me scroll, but moves all the frames in the scrolling frame down and cutting half of the last frame off (image below for reference).
(No it doesn’t let me scroll any further)
1 Like
Hey I’m a little confused about how to use the LayoutUtil v2 module.
Using the old LayoutUtil module like this:
require(script:WaitForChild("LayoutUtil")).new(ShopScrollingFrame:WaitForChild("UIGridLayout"))
gets me the result that I’ve been wanting, here:
I’ll probably end up just sticking with this. However if there’s some performance improvement or other optimization with the new one, I’d prefer to use that one. The problem is that it doesn’t do anything though.
Code: require(script:WaitForChild("LayoutUtil2"))(ShopScrollingFrame:WaitForChild("UIGridLayout"))
Result:
You must set the AutomaticCanvasSize property of the ScrollingFrame.
This works yeah.
You want to set the CanvasSize to 0,0,0,0 and set an AutomaticCanvasSize – and works just like this module without using any scripts.
If you use offset then the size of each element in the ScrollingFrame will not change, no matter the user’s resolution. So let’s say they play on a 16k monitor and the size in offset of each element is 10x10, it would be practically invisible for them.
Now let’s say you use scale. If you have AutomaticCanvasSize enabled then each element will stretch with the ScrollingFrame. This is where LayoutUtil comes in, it allows you to have dynamically sized elements (via scale) without the stretch (maintains aspect ratio).
2 Likes
What if you just inserted UIAspectRatios into your UIObjects?
That’s exactly what this module does. Using the plugin (or module), you could calculate and insert it automatically for UIGridLayouts. UIListLayouts, on the other hand, require a UIAspectRatioConstraint per element, so you will need some code at runtime (considering you are inserting elements at runtime).
That’s interesting - but I’ve been playing around with just the AutomaticCanvasSize, and I don’t notice any sort of stretch on bigger or smaller screens, it actually scales quite nicely already
This is an example using scale without LayoutUtil, note that AutomaticCanvasSize does not ensure elements maintain their aspect ratio.
This is amazing! thanks. it is great for handling things. and has helped me loads!
1 Like
Im so confused how do i scale the ui inside of the scrolling frame (theres alot)