Sorting UI Grid Layout

I am working on a game that has many different characters hidden around the map. There is a little button on the menu GUI that when pressed, opens an inventory to view all the characters currently in the game. I have each character sorted into categories of how difficult they are to find. For example: easy, medium, hard, etc. There is a scrolling frame that has “image labels” in it with a picture of the character and a couple of “text labels” inside that for more details. (All of this is sorted using a grid layout). The problem I am having is, whenever you open the menu it is just a scattered mess of characters. I want them to show up as a group with the others in that difficulty category. So all the easy characters first, then the list of medium characters, and so on. I am kinda confused about how I would do something like this and when I looked on different websites for an answer I failed to find one. Please help if you know what I could do. If anything is unclear feel free to ask and I will send images or try and explain the best I can. I am pretty new to scripting and this is my first dev forum post!

Thanks, Crispy

Did you try changing the properties of the UIGridLayout?

Yeah I did, but it only gave me two options and neither of them would work for what I am trying to do. It lets me pick either alphabetical by name or layout order.

UIGridLayout – Developer Hub

As developers are only able to sort by an element’s name or its LayoutOrder, it is your responsibility to transform your sorting principle (e.g. the rarity grouping you described) into something compatible with either of these SortOrders.

My personal recommendation is always transforming a sorting rule to LayoutOrder: sort the items as necessary, then make the items numerically contiguous so they fit under LayoutOrder SortOrder. This is also easier when you want to dynamically modify any elements rather than using the name.

2 Likes

Can you upload a picture of what is so I can help further?

Image2

You should just be able to change the CellPadding and CellSize. That’s how I usually do it.Try it again if you have already.

When I do that it just changes the distance between the characters, not the order they are in.

If you want only certain ones to show up at different times, you need different scrolling frames. Create a scrolling frame for each category then add the UIGridLayout into each of them. After that, in your GUI, make buttons so they can select which category they want then only show THAT category.

1 Like

Wow, that’s a really good idea. Thanks so much!

Anytime. Good luck on your game.

1 Like