Skip to content

UI Components Overview

Modular Inventory System provides a UI system where visuals are updated based on item data, and components do not directly depend on each other. UI components do not contain game logic; instead, they listen to signals from the Inventory resource and update their visuals accordingly.

InventoryUI Base Class

All major UI panels (like the Inventory Panel and Hotbar) extend the InventoryUI base class. This class manages the connections between your UI and the underlying data:

  • Auto-Binding: Automatically finds and attaches to an InventoryComponent in the scene tree.
  • Signal Management: Connects to inventory_changed and slot_changed to automatically refresh the UI when items are added, removed, or moved.
  • Methods to Override: Provides methods like _on_inventory_attached(), _refresh_all(), and _refresh_slot() that child classes can fill with their own code to update their specific visuals.

Component Types

UI system has four component types:

  1. ModularInventoryPanel: A window that shows all inventory slots in a grid for viewing and moving items.
  2. ModularHotbar: A horizontal row of slots for quick access, supporting selection with the mouse wheel.
  3. SlotUI: A single slot showing the item's picture, stack count, and durability bar.
  4. ItemTooltip: A popup window that appears when hovering over an item, showing formatted text information about that item.

Layout Coordination

When interacting with the world (e.g., opening a chest), you often need to display two inventories side-by-side. UICoordinator (a global node) provides static methods that calculate and set the anchor positions so the player inventory sits on the right side of the screen and the container inventory sits on the left side.

Integration with Other Systems

  • DragDropSystem: UI components send signals when clicked. DragDropSystem receives these signals to start dragging items. UI also acts as a location where items can be dropped by being added to the inventory_drop_targets group.
  • InputMode: UI checks the global mouse state to determine whether scrolling the hotbar or dragging items should be allowed, based on whether the game is in camera-control mode or UI-clicking mode.