• Made for using with Game Creator 2
• Soulslike-style Item Hotbar

SoulsLike Hotbar System

A Souls-like hotbar system for Game Creator 2 that allows players to cycle through equipment slots using Q/E (or gamepad equivalents) and use items with a dedicated "Use" button, in a Dark Souls–style single-slot UI.

Overview

This system replaces the standard BagEquipUI workflow with a more flexible equipment hotbar where:

• Items are stored in equipment slots but not automatically equipped
• Players cycle through hotbar slots with next/previous keys (default: Q/E)
• Players use the active slot with a "Use" button (default: F)
• Multiple hotbars can be managed (one per equipment slot: Right Hand, Left Hand, etc.)
• Items are equipped/unequipped only through the hotbar, not directly from the bag

Quick Start

Step 1: Set up EquipmentSlotUI (storage slots)

In your equipment panel / paperdoll UI:

1. Add an EquipmentSlotUI component to each visual equipment slot (Right Hand, Left Hand, etc.).
2. Configure on each EquipmentSlotUI:
   • Bag: Player bag reference
   • Hotbar Manager: Reference to the EquipmentHotbarManager
   • Equipment Index: Which equipment slot this represents (Right Hand, Left Hand, etc.)
   • Hotbar Index: Which hotbar in the manager this slot connects to (0 = first hotbar)
   • Hotbar Slot Index: Position inside that hotbar (0 = first slot, 1 = second, etc.)
3. (Optional) Configure:
   • On Click: OpenBag → clicking the slot opens the bag and selects this equipment slot.
   • m_BagPanelToOpen: bag panel GameObject that should be opened when the slot is clicked.

The EquipmentSlotUI:

• Stores a single RuntimeItem (the item assigned to that equip slot in the hotbar).
• Keeps the hotbar in sync (adds/removes the item from the corresponding EquipmentHotbar).
• Exposes helpers like GetStoredItem(), HasStoredItem() and IsStoredItemActive().

Step 2: Connect the Bag to the selected EquipmentSlotUI

In your bag/inventory UI:

1. On the equipment slot side, clicking an EquipmentSlotUI with OpenBag:

   • Sets EquipmentSlotUI.CurrentSelectedSlot to that slot.
   • Opens the configured bag panel.

2. On each bag cell (BagCellUI) that you want to be able to send items to the selected slot:

   • Add BagCellEquipToSelectedEquipmentSlot in the same GameObject.

BagCellEquipToSelectedEquipmentSlot:

• Intercepts click and Submit (keyboard/gamepad) on the bag cell.
• If there is a CurrentSelectedSlot:
  • If that slot already stores** this same RuntimeItem → unequips (removes from slot/hotbar).
  • Otherwise → equips the item into that equipment slot/hotbar position.
• Calls eventData.Use() to stop the default BagCellUI behavior when it handles the click.

Result: Click/Submit on a bag item toggles equip/desequip in the currently selected equipment slot.

Step 3: Set up EquipmentHotbarManager

1. Add an EquipmentHotbarManager component to your player or a central UI manager GameObject.
2. Configure:
   • Bag: Player bag reference
   • Hotbars list: one EquipmentHotbar per equipment index you want (Right Hand, Left Hand, etc.).

The manager:

• Holds and indexes multiple EquipmentHotbar instances.
• Is used by EquipmentSlotUI to locate the right hotbar using the Hotbar Index.

Step 4: Configure each EquipmentHotbar

For each equipment slot type (ex: Right Hand, Left Hand):

1. Add an EquipmentHotbar component.
2. Configure:
   • Bag: Player bag reference
   • Equipment Index: Equipment slot this hotbar controls (must match EquipmentSlotUI).
   • Max Hotbar Slots: Maximum number of logical slots (default: 4).
3. Configure input buttons:
   • Input Next Slot: Cycle forward (default: E)
   • Input Prev Slot: Cycle backward (default: Q)
   • Input Use Active: Use the active slot (default: F)

The hotbar:

• Shows what EquipmentSlotUI assigns.
• Maintains which logical slot is active and which RuntimeItem is currently equipped.

Step 5: Create the Active Slot UI (single visual slot)

The system uses a single UI slot that always shows the currently active item (Dark Souls–style).

1. In your UI, create one slot object:

   • Background Image (slot frame)
   • Icon Image (item icon)
   • Selection Indicator (optional highlight)
   • (Optional) Quantity Text
   • (Optional) CellContentUI child for cooldown overlay

2. In the EquipmentHotbar component, configure the Active Slot UI:

   • Slot Object: GameObject for the slot.
   • Icon Image: Image for the item icon.
   • Background Image: Slot background (used for simple highlighting).
   • Selection Indicator: Image to indicate active state.
   • Quantity Text: Text to show stack count (optional).
   • CellContentUI: Component used to drive cooldown overlay and extra info (optional).

Important: You only need one visual slot. The hotbar switches which internal slot is active and updates this single object accordingly.

Example UI Structure:

HotbarPanel
└── ActiveSlot (object)
    ├── Background (Image)
    ├── Icon (Image)
    ├── QuantityText (Text - optional)
    ├── SelectionIndicator (Image - optional)
    └── CellContentUI_Root (GameObject with CellContentUI - optional)

How It Works

Item Flow

1. Adding Items to Equipment Slots*

   • Player opens the bag via an EquipmentSlotUI (OpenBagForThisSlot).
   • Click/Submit on a BagCellUI with BagCellEquipToSelectedEquipmentSlot:
     • If slot is empty → item is stored in that EquipmentSlotUI and added to the linked EquipmentHotbar at the configured Hotbar Slot Index.
     • If slot already has the same RuntimeItem → item is removed from that slot/hotbar.

2. Cycling Slots

   • Press Q/E (or mapped input) to cycle hotbar slots:
     • Skips empty slots automatically.
     • Updates the active index.
     • Triggers visual animation and calls internal equip/unequip logic.

3. Equipping / Unequipping

   • The active slot’s item is equipped using custom logic in EquipmentHotbar:
     • Runs OnUnequip on the previously equipped item.
     • Runs OnEquip on the new item.
     • Uses reflection to call internal EquipmentRuntimeSlot methods (visual props, etc.).

4. Using Items / Cooldown

   • Press "Use" (default F) or equivalent gamepad button:
     • The active item’s RuntimeItem is located in the bag and Bag.Content.Use(position) is called.
   • The EquipmentHotbar then:
     • Refreshes the visual Active Slot UI.
     • Calls CellContentUI.RefreshCooldown for the active item (if CellContentUI is assigned), so the standard Game Creator cooldown overlay is used.

Quantity Text & Cooldown Overlay

• Quantity Text

  • EquipmentHotbar inspects RuntimeItem via reflection (Count or Quantity property).
  • If quantity > 1, the number is shown on the active slot; otherwise the text is hidden.

• Cooldown Overlay

  • If you assign a CellContentUI in the Active Slot UI:
    • The system finds the RuntimeItem position in the bag.
    • Calls RefreshUI and RefreshCooldown on CellContentUI.
    • You get the same cooldown visuals as the default Bag UI, but driven by the hotbar.

Key Components

• EquipmentSlotUI

  • Storage slot for a single RuntimeItem linked to a specific EquipmentHotbar slot.
  • Optionally opens the bag and defines CurrentSelectedSlot.
  • Updates visuals to reflect if the item is in the hotbar and/or active.

• BagCellEquipToSelectedEquipmentSlot

  • Helper attached to BagCellUI.
  • Sends the clicked/Submit item to the currently selected EquipmentSlotUI:
    • If same item already stored → desequips (removes from slot/hotbar).
    • Otherwise → equips to that slot/hotbar index.

• EquipmentHotbarManager

  • Holds the list of EquipmentHotbar instances.
  • Provides lookup by hotbar index for EquipmentSlotUI.

• EquipmentHotbar

  • Manages logical hotbar slots for a specific equipment index (Right Hand, etc.).
  • Handles cycling, equip/unequip, use, quantity and cooldown UI for the active slot.

Slot Indexing

Each EquipmentSlotUI must know:

• Equipment Index: Which equipment type it represents.
• Hotbar Index: Which EquipmentHotbar in the manager it maps to (0, 1, 2, 3…).
• Hotbar Slot Index: Which position in that hotbar (0, 1, 2, 3…).

This creates a mapping:
EquipmentSlotUI → EquipmentHotbar[HotbarIndex].Slots[HotbarSlotIndex]

Features

- ✅ Multiple Hotbars: One hotbar per equipment slot type (Right Hand, Left Hand, etc.) - ✅ Slot Cycling: Q/E (or any mapped input) to cycle through slots - ✅ Visual Feedback: Active slot highlighting and activation animation - ✅ Skip Empty Slots: Automatically skips empty slots when cycling - ✅ Save/Load Support: Hotbar configuration is save-friendly (depends on your GC2 save setup) - ✅ Drag & Drop + Click-to-Equip: Drag to EquipmentSlotUI or click from bag via the helper - ✅ Gamepad Friendly: Uses OnSubmit on bag cells and a single focusable Active Slot UI - ✅ Quantity Display: Shows stack count on the active slot (if > 1) - ✅ Cooldown Overlay: Integrates with CellContentUI for item cooldown visuals

Input Configuration

Default inputs (configurable in EquipmentHotbar):

• Q: Previous slot
• E: Next slot
• F: Use active slot

You can map these to keyboard, mouse, or gamepad using Game Creator’s input system.

Tips

1. Empty Slot Skipping: Cycling automatically avoids empty hotbar slots.
2. Visual Consistency: Keep your Active Slot UI clean and readable; it’s the single source of truth for the player.
3. Multiple Equipment Types: Add one EquipmentHotbar per equipment index you want to control.
4. Gamepad UX: Make sure the Active Slot UI and bag cells are focusable (Selectable) so Submit works smoothly.

Compatibility

This system works on top of Game Creator 2’s inventory system:

• It does not replace the core inventory logic.
• It controls equipment visually and logically through hotbars, using reflection only where necessary to call internal methods and events.

📞 Support

• E-mail: [email protected]

🔄 Changelog

Version 1.0.0

• Initial release
• Equipment Hotbar Manager
• Equipment Hotbar
• Equipment Slot UI
• BagCellEquipToSelectedEquipmentSlot
• Save/Load compatibility