Using UI Designer to Create Scrollable List with Subcategories

[bryan_l]

Hello, I am trying to create a scrollable list with subcategories for character customization on mobile (layout example below). As this type of layout is currently not included in the UI Designer schemas, is there a straightforward implementation using Ultimate Inventory System?

Also can the UI for the grid items be customized to be rectangular instead of square? Thanks!

 

[Sangemdoko]

Interesting...
Currently you wouldn't be able do do something like this very easily. My suggestion would be to create your very own custom "Item View Slot Container". You can do so by inheriting the "Item View Slot Container Base" class. It could be a bit challenging if you are not a programmer...

As for the Item Views, they do not have to be square. We use the Unity Grid Layout component which allows you to define the width, height, padding, spacing, etc...

The challenges are:
1) spawning the Item View Slots dynamically (we spawn the view slots once at the very beginning to match the grid size)
2) Connect those Item View Slots to navigate to one another using keyboard/controller
3) Have each category draw one under the other

It's not exactly what you are looking for but it is close work around that you can use until you come up with a better solution. You could create one 1x3 InventoryGrid for each category with each having a horizontal scrollbar. Then you could have everything inside a default vertical Unity Scroll View.

Now if the slots are not dynamic then it's a lot easier. You'll also need to create a custom Item View Slot Container, but you could simply match an index for each item.

If you do decide to create your own custom Item View Slot Container, I would recommend you have a look at InventoryGrid, ItemSlotCollectionView and Item View Slot Container (Base). If you have any questions I'll answer the best I can.

Note that if you find it too complicated you do not have to use the Item View Slot Container, you can create your own UI from scratch as the Item system is not dependent on the UI being a certain way.

 

[bryan_l]

Thanks for the quick response!
I have existing UI for displaying the layout, but was wondering whether I should migrate to use the UI Designer as it integrates with other inventory system features out of the box.

In my UI I have a custom prefab for each grid item that is an image with a button component. When clicked the item is equipped to the character (or an animation is played if it's a consumable).

What are the UIS components and methods I should be using for this behavior? I want the item action to happen immediately when clicked without the action menu pop up from the demo (Equip, Move, Assign...etc) appearing first.

In terms of static vs dynamic slots, new items can be downloaded from the server, but the entire list can refresh whenever there is an update so just need to be able to add the newly downloaded items to the inventory system and database through code.

 

[bryan_l]

Interesting...
Currently you wouldn't be able do do something like this very easily. My suggestion would be to create your very own custom "Item View Slot Container". You can do so by inheriting the "Item View Slot Container Base" class. It could be a bit challenging if you are not a programmer...

As for the Item Views, they do not have to be square. We use the Unity Grid Layout component which allows you to define the width, height, padding, spacing, etc...

The challenges are:
1) spawning the Item View Slots dynamically (we spawn the view slots once at the very beginning to match the grid size)
2) Connect those Item View Slots to navigate to one another using keyboard/controller
3) Have each category draw one under the other

It's not exactly what you are looking for but it is close work around that you can use until you come up with a better solution. You could create one 1x3 InventoryGrid for each category with each having a horizontal scrollbar. Then you could have everything inside a default vertical Unity Scroll View.

Now if the slots are not dynamic then it's a lot easier. You'll also need to create a custom Item View Slot Container, but you could simply match an index for each item.

If you do decide to create your own custom Item View Slot Container, I would recommend you have a look at InventoryGrid, ItemSlotCollectionView and Item View Slot Container (Base). If you have any questions I'll answer the best I can.

Note that if you find it too complicated you do not have to use the Item View Slot Container, you can create your own UI from scratch as the Item system is not dependent on the UI being a certain way.

Forgot to post my response as a reply so just correcting it here, thanks.

 

[Sangemdoko]

Equip, Consume, etc... are Item Actions which we set up using two scriptable objects: "Item Action Set" and "Category Item Action Set".

We then use a ItemViewSlotsContainerItemActionBinding or a ItemViewSlotsContainerCategoryItemActionSetBinding component to trigger actions (usually by clicking, but not necessarily ) on the selected Item View Slot within an Item View Slot Container. It only opens a item action option panel, if you reference one. If not you can choose which action it calls by index. If the index is -1 it will call all the item actions sequentially.

You could have a look at those components and their base class to see how the scriptable objects for Item Actions are used.

If you already have your UI implemented, I would recommend creating a custom Item View Slot Container which can sit next to your UI component and have them talk to each other, taking a composite approach instead of an inheritance one.

Since you use a prefab for each of the Item Slot, you may replace them to use Item View Slot with an Item View inside (No need to use a Category Item View Set, and change the Item View each time an item is set in a slot, if you want all your items to have similar layouts)

I would recommend reading these sections in detail:

Item View Slots Container - Opsive

The base class “Item View Slots Container Base” is used by the Inventory Grid, Item Hotbar, Item Slot Collection View and more. Some options in . . .

opsive.com

Item View Slot - Opsive

The Item View Slot is an Action Button which is used to detect clicks, selection, or drag & drop for an Item View. It is . . .

opsive.com

Item View - Opsive

Item Views are used to display an Item in the UI. Item Views can easily be setup using UI Designer Item View tab Item Views . . .

opsive.com

Item Info Filter & Sorters - Opsive

You can filter and sort the ItemInfoGrid, Inventory Grid, etc… in different ways. Whether it is through code //Sort the item once // Sort the . . .

opsive.com

Item Actions - Opsive

Item Actions are used to perform actions on an item from the Inventory. It should not be confused with item object behaviors which are meant . . .

opsive.com

I hope that helps you make the decision

 

[bryan_l]

Thank you very much! The UI is already implemented so I will look into using the item view slots for the prefabs.