1. Home
  2. S-Inventory
  3. Item Groups
  4. Item Group UI

Item Group UI

The Item Group UI component handles the UI side for the item groups.

  • UI Canavs: Drag and drop the canvas object that contains the item group panel.
  • Panel: Drag and drop the item group’s panel here. The item group panel object should include an Image component with the backdrop sprite on it. It must also have the Graphics Raycaster component.
  • Item group slots are the UI buttons that appear when the player opens the item group. Each button corresponds to an item that is stored in the item group. All UI Buttons must be children of the same object that is the “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 as many times as the value of the Max Amount field. Create a new UI Button object and make it a child of the “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 Image object to this base slot object with an Image component and call it “Icon”. Then add the “SlotUI.cs” script to the “Icon” object with only the “Group Item” bool set to true. Then add an Event Trigger to the base slot with the current events:
  1. Pointer Enter event: Drag and drop the “Icon” object and select: “SlotUI -> HoverON()”.
  2. Pointer Exit event: Drag and drop the “Icon” object and select: “SlotUI -> HoverOFF()”.
  3. Pointer Click event: Drag and drop the “Icon” object and select: “SlotUI -> SendItemGroupClick()”.
  4. To display the item’s name in the item group UI panel, create a UI Text object and make a child object of the “Icon”.

GroupItemEvents

  • Toggle Info: To enable the toggle info set “Enable Toggle Info” to true. then drag and drop the toggle info Text UI object. This object will be activated when the player is in range of the item group object and will show the instructions to interact with it.
  • Default Position: The item group’s starting position, you have five options: Top-Right corner, Lower-Right corner, Top-Left corner, Lower-Left corner and screen center
  • Is Movable: If set to true, then the player will be able to drag the item group panel around the screen.

Additional components of the item group UI panel:

  • “Take” Button: Create a UI button and make it child of the ItemGroupUI panel object and add this event to the button on click: Drag and drop the object that holds the ItemGroupUI script and pick “ItemGroupUI -> TakeSelectedItem()”. This button will add the selected item to the inventory.
  • “TakeAll” Button: Create a UI button and make it child of the ItemGroupUI panel object and add this event to the button on click: Drag and drop the object that holds the ItemGroupUI script and pick “ItemGroupUI-> TakeAll()”. This button will add the items listed to the inventory.
  • “Close” Button: Create a UI button and make it child of the ItemGroupUI panel object and add this event to the button on click: Drag and drop the object that holds the ItemGroupUI script and pick “ItemGroupUI-> DesactivatePanel()”. This button will close the item group menu.
Was this article helpful to you? Yes No

How can we help?