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

Container UI

  • UI Canavs: Drag and drop the canvas object that contains the container UI panel.
  • Panel: Drag and drop the container UI panel here. The container panel object should include an Image component with the container’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 Container UI script and pick “ContainerUI -> DragStarted()”.
  2. End Drag event: Drag and drop the object that holds the Container UI script and pick “ContainerUI -> DragEnded()”.
  • 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 container object and will show the instructions to interact with it.
  • Default Position: The container panel starting position, you have five options: Top-Right corner, Lower-Right corner, Top-Left corner, Lower-Left corner and screen center.
  • Container Slots: container 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 container. 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 the base slot object with only the “Container 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()”.
  • Drag Slot: Create a child UI object of the container UI panel and add an Image component to it. Preferably, the size of this object should match the empty slot size.
  • Max Container Slots: The maximum amount of slots allowed in all containers.
  • Slots Per Row: The number of slots in each row in the container UI panel.
  • Slots Space: The space between each UI slot.
  • Is Movable: Tick this option if you want the player to drag and drop the container 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).

Other components of the container UI panel:

Close Button: Create a UI button and make it child of the container UI panel object and add this event to the button on click: Drag and drop the object that holds the ContainerUI script and pick “ContainerUI -> DesactivatePanel()”. This button hides the container window.

Was this article helpful to you? Yes No

How can we help?