Help spacing out UI evenly?

Hi! First time caller, long time listener. I hope I wrote this question in the right category - apologies if not.

I am, as a lot of other people around here, a true beginner at unity and c#. I’m working on a super rough prototype of a game, and am having some difficulty on the Unity interface side of things, namely with UI.
On my turn-based combat screen, I have a series of buttons and sliders that I would love to space out evenly, horizontally and vertically (image below).


I’m eyeballing it and it gets to the point where it’s annoyingly close but not there yet. I’ve gone through the discussion boards and googled a solution, but for some reason I’m not getting anything useful. Can someone with more experience guide me through this?

Thank you!

Are you using uGUI or UI Toolkit? I’m going to assume the former, though.

There are layout group components that can be used to arrange and evenly space ui objects. In this case, you probably want use a horizontal layout group on the common parent of these objects: Horizontal Layout Group | Unity UI | 3.0.0-exp.4

1 Like

Thank you! This worked!
To answer your question, I’m using uGUI. I don’t think I’ve ever used the toolkit - do you think it’s better to go with that?
I’ll just explain what was happening here - I’m not really sure why, when I duplicated the buttons, they came out looking the same but their dimensions were all over the place for some reason. It became clear when I applied the Horizontal Layout Group, and suddenly things were all over the place.
I just had to copy paste all over again, and now they look fine.

I learned something useful today.
Thank you again!

1 Like

If you’re new, I’d stick with uGUI, as its rooted in the more familiar game object/component workflow.

But worth exploring UI Toolkit when you feel more comfortable; it does work completely different to uGUI though.

1 Like

I’ll add some confusion by suggesting the opposite: by all means at least explore UI Toolkit. There’s a LOT to be had by being able to visually design your UI in UI Builder interactively, and easily style every aspect of it.

Using UI Toolkit at runtime is also pretty easy and straightforward, particularly for a turn-based game. Not having to use the Unity Events in the Inspector is also going to make setup and reuse a lot easier in my experience. In UGUI there’s always some event that won’t fire simply because you renamed a method or moved a component. That’s a constant struggle.

What UI Toolkit can’t do however is “overlay” UI like a healthbar that follows the character around and integrates with the 3d world.

I’ll definitely give it a go! Do you know if there’s a comprehensive guide for those of us still getting the lay of the land? Do you think it’s useful to use both UGUI and UI-Toolkit in the same project or is it one or the other?

This should not be a problem right now, since my ambition with this first prototype is to mimic super old-school turn-based action, which has very little integration.

thanks for the input!

Pretty sure there are some if you look around. Definitely read the manual first. :wink:

They are not mutually exclusive. It makes sense to use UGUI for the worldspace canvas, or perhaps some HUD elements that need custom shader effects not possible with UITK.