UI System

Spark's UI system manages game panels (inventory, quest log, character sheet, etc.) and provides a drag-and-drop framework for moving items and abilities between UI elements.

UI Panels Overview

Every in-game window in Spark is a UI Panel. The inventory screen, quest log, character sheet, settings menu, and crafting window are all panels managed by Spark's panel system.

Panels can be:

  • Shown and hidden through keybinds, buttons, or triggers

  • Toggled with a single key press

  • Stacked with priority ordering (higher priority panels appear on top)

  • Modal to block interaction with panels behind them (like confirmation popups)

The system tracks which panels are open and publishes events when panels open or close. This is useful for pausing gameplay, switching input modes, or updating the cursor.

Confirmation Popups

The ConfirmationPopup component provides a modal dialog with customizable text and confirm/cancel buttons. Use it for:

  • "Are you sure you want to delete this item?"

  • "Abandon this quest?"

  • "Purchase this item for 500 Gold?"

Event Messages

The EventMessagePopup displays temporary messages in response to events. For example:

  • "Quest Accepted: The Missing Merchant"

  • "New Item: Iron Sword"

  • "Achievement Unlocked!"

It subscribes to ShowEventMessageEvent and displays whatever message is published.

Drag & Drop System

Spark's drag-and-drop system lets players move data between UI slots. Common uses:

  • Dragging items between inventory slots

  • Dragging an item from inventory to an equipment slot

  • Dragging an ability from the spellbook to the action bar

  • Dragging items between the inventory and a storage container

The system is built from:

  • Drop Sources: UI elements you can drag from.

  • Drop Targets: UI elements you can drop onto.

  • Handlers: Logic that defines what happens for each source/target combination.

As an editor user, drag and drop is pre-configured in the templates. The Items, Equipment, ItemBar, and Spellbooks plugins all include drag-and-drop handlers that work together automatically.

Panel Management

You can control panels through:

  • Keybinds: Press "I" to toggle inventory, "Q" to toggle quest log, etc.

  • Buttons: Click a UI button to show a panel.

  • Escape key: The EscapeKeyPressedEvent can be used to close the topmost panel or open a pause menu.

  • Triggers: "Open the crafting window" as a trigger action.

The panel manager ensures that when all panels close, gameplay resumes normally.

Last updated

Was this helpful?