1. Home
  2. S-Inventory
  3. Inventory
  4. Inventory UI

Inventory UI

This script manages the Inventory UI Panel.


  • UI Canavs: Drag and drop the canvas object that contains the inventory panel.
  • Panel: Drag and drop the inventory’s panel here. The inventory panel object should include an Image component with the inventory’s backdrop sprite on it. It must also have the Graphics Raycaster component and an Event Trigger. The Event Trigger must include two types of events:
  1. Begin Drag event: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> DragStarted()”.
  2. End Drag event: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> DragEnded()”.

InventoryPanelEvents

  • Key: This is the key used to hide or show the inventory panel (It’s “I” by default).
  • Destroy On Drag To World: When true then when the item is dragged and dropped out of the Inventory Panel to the game’s world then it will be dropped from the inventory. If false then nothing will happen and the item will be back to the inventory.
  • Default Position: The inventory’s starting position, you have five options: Top-Right corner, Lower-Right corner, Top-Left corner, Lower-Left corner and screen center.
  • Is Movable: Tick this option if you want the player to drag and drop the inventory UI panel in-game and be able to change its position (The position chosen by the player during game play will not be saved, the inventory will always be created in the default position).
  • Drag Panel Slot: To drag the inventory’s panel smoothly, you need to create an empty UI element (contains a Rect Transform only) and make it very small and place it as a child object of the UI canvas then put it in this field.
  • Bag Slots: Bag slots are the UI buttons that appear when the player opens the Bag part of the inventory panel. Each button corresponds to an item that is stored in the inventory. All UI Buttons must be children of the same object that is the “Bag Slots Parent”. The parent object should have a “Grid Layout Group” component. Using your desired settings for that component, all the slots will be arranged inside the grid layout. You only need to pre-create one slot button that will be cloned. Create a new UI Button object and make it a child of the “Bag Slots Parent” object and drag and drop it to the “Base Slot”. Add a UI Image component to it with the empty slot sprite. Next, create a child UI object to this Empty Slot object with a Text component and call it “Text”. Then add the “SlotUI.cs” script to this object with only the “Inventory Item” bool set to true. Then add an Event Trigger to this base slot with the current events:
  1. Begin Drag event: Drag and drop the Base Slot object and select: “SlotUI -> DragItem()”.
  2. End Drag event: Drag and drop the Base Slot object and select: “SlotUI -> DisableItemDrag()”.
  3. Pointer Click event: Drag and drop the Base Slot object and select: “SlotUI -> ActionMenu()”.
  4. Pointer Enter event: Drag and drop the Base Slot object and select: “SlotUI -> HoverON()” and “SlotUI -> SetDragDestination()”.
  5. Pointer Exit event: Drag and drop the Base Slot object and select: “SlotUI -> HoverOFF()” and “SlotUI -> RemoveDragDestination()”.

EmptySlotEvents

  • Drag Slot: Create a child UI object of the inventory UI panel and add an Image component to it. Preferably, the size of this object should match the empty slot size.
  • Slots Per Row: The number of slots in each row in the inventory UI panel.
  • Slots Space: The space between each UI slot.
  • Action Menu: Create a UI object with a Graphic Raycaster component, call it “Action Menu” and make it as a child object of the UI canvas. Then create three UI buttons and make them child objects of the “Action Menu” object, You are free to place the UI buttons however you want.:
  1. Equip/Use button: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> SetActionType(1)”
  2. Drop button: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> SetActionType(2)”
  3. Close button: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> CloseActionMenu()”
  • Drop Menu/Input: Create an InputField UI object and make it a child object of the UI canvas object. Then create a child button UI for this object and add this event to the button on click: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> SendItem()”
  • Riches In Bag: S-Inventory allows you to display one of the riches/currencies in the bag menu of the inventory, this could be the main currency of your game. To display the currency, create a new UI Image and make it child of the inventory UI panel and drag it to the “Riches In Bag” field, create a UI Text as a child of this object then set the ID of the currency to display in the “Riches In Bag ID”.
  • Weight Text: UI Text object, child of the inventory UI panel and used to display the current weight/maximum weight of the inventory.
  • Close All Panels Key: Key used to hide all the displayed inventory panels at once.
  • Inventory Tabs: S-Inventory allows the use of multiple tabs for a single inventory UI panel. Each tab has a certain amount of slots that the player can store items at. To use this feature, set “Use Tabs” to true then set the amount of tabs to create in “Tabs” then the amount of slots in each tab in “Slots Per Tab”. To navigate between tabs, it’s required to have buttons that allow you to do so. Therefore create a button for each tab, make it child of the inventory UI panel. In the “On Click” event of each button, pick “InventoryUI -> LoadTab(TabID)”.
  • Open Bag: An audio clip played when you open the inventory UI panel.
  • Close Bag: An audio clip played when you close the inventory UI panel.

Other inventory UI panel components:

  • “Close” Button: Create a UI button and make it child of the inventory UI panel object and add this event to the button on click: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> ToggleInventory()”
  • “Bag” Button: Create a UI button and make it child of the inventory UI panel object and add this event to the button on click: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> MoveToBag()”
  • “Riches” Button: Create a UI button and make it child of the inventory UI panel object and add this event to the button on click: Drag and drop the object that holds the Inventory UI script and pick “InventoryUI -> MoveToRiches()”
  • Item Info On Hover: In order to display a description of the item when the mouse hovers over the it in the inventory UI panel. You need to have the “HoverItem.cs” component in the scene. Then create a new UI object, make it child of the inventory UI panel and drag this object to the “Item Info” field of the “HoverItem.cs” inspector. The Item Info object must have a UI text object as its child object, this UI text will be used to displayed the description of the item. Drag and drop the UI text object to “Textfield” field. The “Info On Mouse Hover” bool is used to enable/disable this feature.
Was this article helpful to you? Yes No

How can we help?