First Inventory UI

Export

Generate a project-owned UIS interface and display the Health Potion from the first Bag. Keep this tutorial limited to one grid; add equipment, descriptions, actions, shops, and crafting afterward.

Before you begin

  • Complete Your First Inventory.
  • Confirm that Health Potion has an Icon and Description suitable for the selected Item View.
  • Keep Player and its Bag active in the scene.

Create the UI foundation

  1. Open Tools > Opsive > Ultimate Inventory System > UI Designer.
  2. In Setup, select Setup under Create Canvas Managers.
  3. Select the Classic UI Designer schema and choose Duplicate.
  4. Save the duplicate in the project-owned inventory/UI folder.
  5. Select Spawn In Scene.
  6. Confirm that the generated canvas contains Display Panel Manager and the schema’s starting menu objects.

Never customize the package schema directly. The duplicated schema and generated project hierarchy are the editable starting point.

Create the Bag grid

  1. Open UI Designer > Inventory Grid.
  2. Choose the generated Main Menu content as Parent Transform.
  3. Set Panel Option to Main Menu.
  4. Name both the panel and Inventory Grid Bag.
  5. Assign Player’s Inventory.
  6. Choose a small Grid layout and create the panel.
  7. In Edit, select the generated Bag grid and add an Item Collection filter for Bag when the schema does not already provide one.

The Inventory Grid Inspector exposes its Inventory, navigation, and Item View Drawer configuration.

Verify the binding

Confirm that the Inventory Grid resolves Player’s Inventory, its Item View Drawer uses the generated slot-content transform, and its Category Item View Set can resolve Consumable Items.

Do not add Item Actions or Item Description until the Health Potion icon appears. This isolates Inventory ownership from selection and action bindings.

Verify in Play Mode

  1. Enter Play Mode and open the generated Main Menu.
  2. Open Bag.
  3. Confirm that one Health Potion appears with its expected Icon.
  4. Change the starting amount to 3, restart Play Mode, and confirm that the displayed quantity or stack reflects the Inventory.
  5. Close and reopen the menu and confirm that the UI reads the same Bag rather than creating Item data of its own.

The runtime inventory grid displays Item icons in a fixed set of reusable slots.

Add one description after display works

Use UI Designer > Item Description to create a description panel and add an Item View Slots Container Description Binding from Bag. Select Health Potion and confirm that its Description updates. Stop here before adding Item Actions.

The runtime Item Description presents the selected Item's icon, text, and attributes.

Troubleshooting

Symptom Check Fix
UI Designer feature tabs are disabled. Database, Canvas Managers, duplicated schema, and Spawn In Scene. Complete the foundation in order.
Bag opens but is empty. Player Inventory binding, Bag runtime contents, and collection filter. Verify the Item in Inventory first, then bind/filter the same collection.
Slots appear without Item visuals. Item View Drawer Content and Category Item View Set. Use the generated slot content and add a Consumable mapping.
Health Potion uses the wrong appearance. Category Item View Set specificity. Map Consumable to the intended Item View prefab.
Description never updates. Description binding source and target. Bind the Bag Item View Slots Container to the intended Item Description.

Use Getting Started Troubleshooting before adding more panels.

Next step

Read UI Customization for equipment, actions, descriptions, drag and drop, and other generated UI. Choose the next system from Choose a Workflow.