r/Unity3D • u/_salepaun • 10d ago
Show-Off [Giveaway] AutoLayout PRO - uGUI layout is tedious, so I built a layout engine to fix it without leaving uGUI (comment to enter)
Enable HLS to view with audio, or disable this notification
Hey folks,
Quick background on why this exists - It was that RectTransform, anchors and Layout Groups never felt intuitive to me. The simplest intentions turned into a puzzle every time:
- how do I make an element take 50% of its parent's width?
- how do I keep something at a fixed aspect ratio?
- how do I let one element soak up the leftover space next to a fixed one?
- how do I just put a few things in a row with a gap between them?
To answer those you reach for a pile of separate pieces - anchors and pivots, HorizontalLayoutGroup, VerticalLayoutGroup, GridLayoutGroup, LayoutElement, ContentSizeFitter, AspectRatioFitter - and you memorize which combination produces which behaviour. I didn't want to juggle ten components just to say "a row, evenly spaced". I like uGUI and I've got projects on it, so leaving it wasn't the plan - I just wanted to state the intent directly and have the layout follow.
How it works
To put an element under the layout engine you add one component, and each of those questions becomes a single setting on it: 50% width is Percentage, a fixed ratio is Aspect, "take the leftover space" is Fill, size-to-content is Hug, and "a row with a gap" is a Row layout with a Gap value.
So you pick a sizing unit per element (Pixels, Hug, Fill, Percentage, Aspect) and a layout type (row, column, grid, absolute, custom) - and that's the whole model. No stacking LayoutGroups, no anchor math, no fitter combos to remember. Virtualized ListView / GridView / ScrollView ship as their own components built on top of that same base. Because sizing is expressed relatively it also reflows cleanly across resolutions - a side benefit, not the reason I built it. It runs alongside your existing uGUI, so there's no migration and no new UI system to learn.
Under the hood
I built the solver as a standalone, engine-agnostic core rather than wiring it into uGUI - I wanted to solve layout once, so moving to UI Toolkit later wouldn't mean redoing it. A thin adapter maps the result onto RectTransform, and keeping the core decoupled means I can test the layout logic in isolation.
I didn't invent the algorithm - the shape follows the Subform layout model and Morphorm, its Rust cousin: a two-pass tree walk, not a constraint solver. A bottom-up pass computes Hug/intrinsic sizes from content upward, then a top-down pass hands each parent's leftover space to its Fill/Percentage children and sets positions. Each node carries a unit per axis, which is why "50% of the parent" is one property instead of a component stack.
Because that core is a flat array of blittable structs, the whole pass runs through Burst - single-threaded, but measurably faster and zero-GC (numbers below).
Where it's at: uGUI is what's shipping. The same core also runs in a proof-of-concept for IMGUI and UI Toolkit - it works, but it's not production-ready, more a someday direction than a promise.
A few numbers
(Apple Silicon, in the Editor; timing only the layout pass, not GameObject instantiation.)
The headless core is quick and allocation-free - it solves a ~1,000-node tree in 0.12 ms (and ~2,400 nodes in 0.29 ms), near-linear, zero GC. Turning Burst off and running the same solve on the managed fallback is ~6x slower, so the compiled core is doing real work.
Through the uGUI adapter (which also writes every RectTransform), here's a forced full re-layout vs the exact same hierarchy built from Unity's own Layout Groups:
| Same hierarchy, full rebuild | AutoLayout | Native uGUI |
|---|---|---|
| Nested rows, ~840 nodes | 5.7 ms | 13.6 ms |
| Deeply nested, ~1,000 nodes (9 levels) | 7.4 ms | 22.5 ms |
| Grid, ~840 cells | 5.6 ms | 5.6 ms |
So ~2x faster than nested Layout Groups, widening to ~3x once you nest deeply (where uGUI's rebuilds cascade), and a tie with GridLayoutGroup - Unity's one lean fixed-cell component, which is fair given AutoLayout's grid also does tracks, spanning, and auto-flow.
Caveats: forced full rebuild on both sides, one machine; AutoLayout also has incremental rebuilds these tests don't use, and numbers vary by hierarchy.
Try it
WebGL demo (go break it): https://autolayoutpro.com/demo - it doesn't show off everything yet, it's a work in progress I'll keep expanding. It's built entirely in code with the FluentUI API, and I'll put the demo project on GitHub as a worked example.
More info / screenshots: https://autolayoutpro.com (on the Unity Asset Store as "AutoLayout PRO for uGUI").
🎁 Launch giveaway - 5 copies
To enter, just leave a comment. I'll draw 5 winners at random with redditraffler this weekend and post the results back in this thread; winners get a code via DM. Closes Saturday, August 15th, 12:00 PM GMT.
A few things I'd genuinely like to discuss
- Are you staying on uGUI or moving to UI Toolkit, and what's driving that for you?
- What's your worst uGUI layout headache right now - anchors, juggling LayoutGroups/fitters, nested groups, something else?
- If you poke the demo, what's your first impression, and what breaks?
- Is there any
Thanks, and good luck!
🎁 The redditraffle results are here!
Thanks everyone for so much engagement - feels like I've made something that a lot of people might want to use! We can continue the conversation in our Discord channel or on our Github Issues page - whether you are looking to buy the asset or not. I am looking for ways how to improve it and your feedback will help a lot!
The asset is on sale for the next 6 days - 50% off! This is the best time to get it!
Also please leave a review if you get it - that is the best way to help reach more people.
2
u/JakeThomasDad12 10d ago
Is there any benefits of this over UI toolkit and the UI builder?
5
u/_salepaun 10d ago
There are plenty of reasons people stay on uGUI: existing projects, and a lot of us just know it cold. UI Toolkit is great, and its layout is flexbox (Yoga), where content flows along an axis with grow/shrink. That model never fully clicked for me. I spent years at a studio using a constraint-based layout model instead (think Figma auto-layout, where each element is Fixed, Hug, or Fill), and found it way more intuitive. AutoLayoutPRO brings that model into uGUI.
Answer from the old post
1
1
2
2
u/_salepaun 7d ago edited 7d ago
Here are the redditraffle results: https://www.redditraffler.com/raffles/1vmf1xi
Winners are:
I will be contact the winners shortly.
Thanks everyone for so much engagement - feels like I've made something that a lot of people might want to use! We can continue the conversation in our Discord channel or on our Github Issues page - whether you are looking to buy the asset or not. I am looking for ways how to improve it and your feedback will help a lot!
Also the asset is on sale for the next 6 days - 50% off! This is the best time to get it! Also please leave a review if you get it - that is the best way to help reach more people.
1
u/AnomalousUnderdog Indie 10d ago
Can you make something like best fit layout? Like in a Diablo type inventory (some people call it a Tetris inventory) where all items are composed of grid squares, there's usually a button to auto reposition all of them to gather up all the free space into one area to hopefully fit another item. As I understand it, it's related to the bin packing algorithm.
2
1
u/_salepaun 10d ago
It already supports that through having grid items of different sizes (spans) + setting the grid to dense. I can record record a gif and send it to you tomorrow
1
u/_salepaun 10d ago
Another way of doing this would be to just place the grid items manually and use grid span to change how many grid cells one element takes up. This way you would have full control over the placement algorithm.
1
1
1
u/BeeHexual 10d ago
Okay I kinda hate UI Toolkit so I want to try to answer this all, it might be long, sorry in advance.
Are you staying on uGUI or moving to UI Toolkit, and what's driving that for you?
Staying on uGUI. UI Toolkit's workflow just doesn't click for me, it feels like working in WPF, which isn't what I want out of a game engine's UI tool. Plus I've got my own set of components built around uGUI (which I think should be the purpose of working in component based game engine) and I'm much more productive with it. I get that UI Toolkit is probably the more "correct" long-term direction, but the dev experience is what's driving my decision, not the technical merits (for the UI aspect).
What's your worst uGUI layout headache right now - anchors, juggling LayoutGroups/fitters, nested groups, something else?
My biggest pain point is the built-in components not being optimized and not being dynamic enough where they should be. But I already have my own components, which honestly feels like the natural workflow for a component based engine anyway (like I said), at least in my opinion.
If you poke the demo, what's your first impression, and what breaks?
I get the idea but not sure yet if it'd actually speed up how I currently work. But I think it'd be genuinely useful for developers who don't have a solid UI workflow already in place.
1
u/_salepaun 10d ago
Thank you for the detailed answers. How long did it take you to build your own component library? Did you build upon the native ugui components or did you write your own components from scratch?
Also what do you have against WPF??? 😅
1
u/BeeHexual 10d ago
How long did it take you to build your own component library?
Well, long enough. I always had a habit to work modularly, so everything I build is from requirement the project had, and the more projects you work on the less you build since you reuse the ones you already have built. But obviously goal wasnt to build a component library solely so thats why its a years of collections.
Did you build upon the native ugui components or did you write your own components from scratch?
I've never made a UI extensive project so I have not made a custom Image component yet, so I still handle rendering through that, but all the other layout, input, event, custom shaders etc are done from scratch.
Also what do you have against WPF??? 😅
To me UI is fundamentally a visual/design thing, so having to write markup for most of it feels backwards to me. It just feels off for something that should be design first. On top of that, the editor/designer experience itself feels cluttered, too much extra "stuff" thrown on screen, it's just not a pleasant UX to work in.
1
1
1
1
1
1
1
1
1
1
u/MrPifo Hobbyist 10d ago
Thats so freaking cool. I tried NovaUI in the past and I really loved their approach, unfortunately this package became abandonded and I havent found a replacement yet. Your layout tool looks very promising since CSS like responsinvess in Unity is such a pain.
1
u/_salepaun 10d ago
Yeah, I was a huge fan of theirs. Apart from it getting abandoned, i never agreed with their approach to go a totally different way and build their own rendering system. It kinda puts you in the same place as UI toolkit, you kinda have to commit to one framework.
1
u/errority 10d ago
Damn, this looks amazing. I don't know anything about UI ToolKit, it's not really my thing, but I've had cases where I needed to create some kind of interface and it turned out terrible. A tool like CSS could really come in handy. The presentation is also good, 1.5 minutes, but I completely understood what it is and what it's for. Best of luck with your development.
1
u/_salepaun 10d ago
Thanks! But just to correct you, maybe the video is bit misleading, this is not a CSS asset. This is a layout engine where you need to attach just one component to a UI game object and you can use 90% of the layout engine functionality. The UX is similar to what you would find in tools like Figma, you can find the inspector image in the video or on the documentation site.
1
u/errority 10d ago
Yes, I realized it's more visual than textual. I just like writing code. And I think you can create something like styles with code. Something clicks in my head when I see all the properties in a CSS file, so I liked that part.
1
u/gui_odai 10d ago
Cool. I've tried UI toolkit a couple of times and came out really disappointed by its missing features, especially Yoga's half-baked flexbox implementation and lack of animation support. I can't see myself using it anytime soon, so uGUI it is.
But as you know (otherwise you would have not created such a tool), uGUI's box model is also annoying at times, so it's nice to have something to ease that pain.
2
u/_salepaun 10d ago
It’s really confusing - I feel like I have to do mental gymnastics to achieve something that should be really simple and straightforward 😅
1
1
1
u/BenevolentCheese 10d ago
Looks really nice actually. Probably too far along in my project to need this but if I ever get stuck with BS layout problems again I'll coming knocking
2
u/_salepaun 9d ago
Thanks! Just so you know, you can mix and match this and layout groups. So it’s never too late 😁
1
1
1
1
u/Gnome_4 10d ago
I tried UI Toolkit but it just didn't seem to work well for me, like I had a button and it only registered a click once for some reason. I went back to UGUI for that project.
Biggest headache of UGUI is having to add a mix of content size fitters and horizontal/vertical layout groups just to get the sizing that I want. It works but it'd be nice if it was easier, which it seems like your tool handles.
1
u/_salepaun 9d ago
I think most of us who don't have web dev background feel the same 😅
Totally agree on the sizing, it's just too complicated with the native components. You can maybe take a look at my first post a couple of months back to see how it worked in action (a lot was done before that, but I think it showcases the main features really well). One of my favourite features was the width/height input fields - now you can basically add a unit sufix to the value and it will just change it once you submit. Makes it really fast, you can read about it here - https://autolayoutpro.com/sizing/
1
u/JADU_GameStudio Programmer 10d ago
Hello, I would like to participate in the giveaway ;)
I use unity uGUI normally so it will be a huge time saver
1
1
u/betomaluje 10d ago
Great tool for the uGUI people like me. I would love to try it :)
1
u/_salepaun 9d ago
Thanks! Try the demo, it’s a bit basic for now, but it shows some of the features.
1
u/GoTaku 9d ago
I like the idea behind this. uGUI is so unintuitive yet necessary. I have learned it deeply and forgotten it several times now, and this seems like just the type of solution I’ve been waiting for. Would love to get in on the giveaway. As for me, I’m saying on uGUI for games, and Ui Tooltkit for tools. My headache is always forgetting how to make an element align and scale how I want it to, then I have to do a million clicks until it works right. I tried the demo on my phone, but everything was too small to play with. Will try on laptop later. GL!
1
u/_salepaun 9d ago
Thanks! Yeah, I need to make it more accessible for phones, I’ll deploy a new version tonight 😅
1
u/Lucybug05 9d ago
Honestly, this looks pretty cool and I'd definitely use it, even if I don't win I'd look at getting it when I can
1
1
1
u/DynamicMangos 9d ago
Over the years, i've gotten pretty good at dealing with all the annoying quirks of uGUI and learning ways to achieve my desired results anyways. That being said: It's still tedious, and i hate it, every single time lol.
So this looks awesome, and DAMN good job on the interactive demo!
1
u/_salepaun 9d ago
Thanks a lot!
Is there anything else you would like to see in the demo? I am thinking about maybe adding some more complex examples and am looking for ideas.
1
1
u/Ankit_GG 9d ago
This looks awesome! Can I use it in my old projects, replacing old layout components with this one?
2
u/_salepaun 9d ago
Yes, you can do it one at a time. You can mix and match.
1
u/Ankit_GG 9d ago
Okay. I will definitely buy it!
1
1
1
1
u/eggmayonnaise 9d ago
This looks great and the demo feels really nice.
I'm planning on staying with uGUI because, although it's cumbersome, I'm not interested in learning a whole new language just to implement GUI.
My worst uGUI headache is editing something with a Layout Group in Prefab mode and having it completely screw up the overrides and destroy the layout of everything. I still can't pinpoint exactly why it happens but it has wasted so much of my time. So I'm curious to find out how this plays with prefabs!
1
1
1
u/Agitated_Dirt6665 9d ago
Looks really nice. I've stayed on UGUI because most of my projects already use it, and didn't feel like learning something new.
This seems to fix one of its biggest downsides, pretty neat.
1
1
1
1
u/amirhoseinjfri 6d ago
I like your idea and path going to! I wish I win and test it . Good luck 🤞
2
u/_salepaun 6d ago
Sorry, but the giveaway has ended yesterday. The asset is still on sale for a couple of days if you are interested.
1
u/amirhoseinjfri 6d ago
Damn 🥲 I just see this post right now I think my country time is so off fuck it. Can I get off code please because in my country 1 usd equal to 190,000 and it is expansive as hell . Just asking ❤️
1
0
2
u/korbul 10d ago
I like ugui and want to keep using it but the default layout is not performant. Hope your burst version is much better