Evenly dispersing imagelabels across frame

Hola! I’m making a custom name tag, which will display certain ‘badge’ icons above their name provided they have attained them.

I would know how to make them appear if the person has it, however I am not sure how I would make the icons evenly spread out automatically. For example, let’s say there is 7 tags in total - someone has earned 3/7, so the 3 should all be centered in the badge frame above their head rather than just being manually placed in a position and turned visible.

Here is a visual representation as well, I am quite the artist as you can see! :nail_care:

Are you doing this through code? Do you have existing code that you can share or?

I love solving problems the stupid way, so here is my stupid solution (keep in mind, I almost never work with UI elements, so this may not work):
I believe elements (aka the circles in your picture) should auto centralize, so my solution would be to parent the invisible/unearned “tags” to something else, that’s also invisible. Once they’re earned, you can parent them to the right thing, and make them visible.

I haven’t started the code for it yet since I had no idea where to begin in making them centered; at least to what I know image labels have to be manually positioned on a frame, I don’t think there is a way to auto center them unless through a script

1 Like

Use UiListLayout, you can have this inside a frame with the badge icons and it will automatically adjust their position based on the settings.

This will also auto-adjust depending on the elements visibility.

3 Likes