> For the complete documentation index, see [llms.txt](https://morningheartgames.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://morningheartgames.gitbook.io/docs/gameplay-ability-toolkit/subsystems/runtime-ui.md). # Runtime UI > Online doc: Runtime UI components display actor state from an ASC: ability slots, active effects, input state, attributes, world status bars, floating combat text, and event logs. ![Practical runtime UI observability diagram showing ASC events feeding bars, lists, and logs.](/files/YRorjbp2Irk5TxHJ6PBV) ## What It Does | Component | Responsibility | | ----------------------------- | -------------------------------------------------------------------------------------------------- | | `AbilityItem` | Displays one ability slot. | | `MultiAbilityItem` | Creates multiple ability item instances. | | `RuntimeAbilityInputsPanel` | Shows runtime input-bound abilities. | | `EffectItem` | Displays one active effect. | | `RuntimeEffectsPanel` | Shows active runtime effects. | | `AttributeSlider` | Displays an attribute value as a slider. | | `AttributeCountableContainer` | Displays countable attributes or pips. | | `GASWorldStatusBar` | World-space status panel prefab with health/mana/stamina, damage trail, and optional status badge. | | `GASFloatingNumber` | Floating numeric text behavior. | | `GASFloatingCombatText` | Attribute change popup coordinator. | | `GASAttributeChangePopups` | Actor-scoped `IAttributeChangeHook` that spawns combat text. | | `GASEventLog` | Debug event log for selected actors. | ## When To Use It Use runtime UI helpers when you need fast observability or sample-quality UI: * Debug ability input bindings. * Show active cooldown/effect state. * Show health bars above actors. * Show damage/healing numbers. * Display tutorial event logs. For production UI, treat these components as reference implementations and adapt them to your UI system. ## Editor Setup 1. Add a Canvas or world-space UI root. 2. Add the relevant UI component. 3. Assign the actor `AbilitySystemComponent`. 4. Assign attribute definitions, attribute names, prefabs, text/slider references, or item containers as required by the component. 5. Enter Play Mode. 6. Apply effects, activate abilities, or change attributes. 7. Confirm the UI updates when ASC events fire. ## Configuration Fields ### World Status Bar | Field | Meaning | | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | | `abilitySystem` | Actor ASC to observe. | | `attributeSet` | Definition used to resolve attribute IDs. | | `healthAttribute`, `manaAttribute`, `staminaAttribute` | Attribute names. | | `viewPrefab` | Required `GASWorldStatusBarView` prefab. Missing references log an error instead of generating fallback UI. | | `healthColor`, `manaColor`, `staminaColor` | Bar colors. | | `fillSprite` | Bar fill sprite. | | `displayName` | Optional actor display name. | | `worldOffset`, `panelSize`, `worldScale` | World-space placement and size. | | `faceCamera`, `fixedEuler` | Orientation behavior. | | `statusEffect`, `statusChipFormat` | Optional active effect status display. | | `ownedTagBadge`, `badgeLabel` | Optional tag badge. | ### Floating Combat Text | Field | Meaning | | --------------------------------------- | --------------------------- | | `worldCamera` | Camera used for projection. | | `fontSize` | Text size. | | `minMagnitude` | Ignore small changes. | | Damage/heal/mana/stamina/default colors | Color mapping for changes. | ### Event Log | Field | Meaning | | -------------------- | --------------------------- | | `content` | UI container for log lines. | | `scrollRect` | Optional scroll view. | | `maxLines` | Retained line count. | | `fontSize` | Line font size. | | `autoScrollToBottom` | Scroll behavior. | | `actors` | Actor list to observe. | ## Runtime Flow ```mermaid flowchart TD ASC["AbilitySystemComponent"] --> Events["Aggregate runtime events"] Events --> AbilityUI["RuntimeAbilityInputsPanel"] Events --> EffectUI["RuntimeEffectsPanel"] Events --> AttributeUI["AttributeSlider / StatusBar"] Events --> Log["GASEventLog"] AttributeHook["IAttributeChangeHook"] --> Floating["Floating combat text"] ``` ## Debugging Checklist * If UI is blank, confirm it references the live actor ASC, not a prefab asset. * If bars do not move, confirm the `AttributeSetDefinition` and attribute names match. * If effects do not show, inspect the ASC `Effects` tab to confirm active specs exist. * If floating text does not appear, confirm `GASAttributeChangePopups` is on the same GameObject as the ASC or references the ASC explicitly. * If event logs grow too large, reduce `maxLines`. ## Common Mistakes | Mistake | Result | Fix | | ------------------------------------------------------ | ---------------------------------- | ------------------------------------------------- | | Binding UI before actor exists | Null ASC | Bind after spawn or expose a rebinding method. | | Using definition base values | UI ignores runtime state | Read `RuntimeAttributes`. | | Missing world camera | Floating text projects incorrectly | Assign camera. | | Using sample UI as final production UI without styling | Inconsistent UX | Treat sample components as functional references. | ## Extension Points * Subscribe to ASC aggregate events for custom UI. * Implement custom `IAttributeChangeHook` for specialized popups. * Reuse `AbilityItem` and `EffectItem` data flow with your own prefabs. * Use `GASEventLog` during QA and remove or hide it in production builds. ## Examples and Tests * Basic Tutorial: HUD, event log, nameplates. * Arena Demo: combat UI and status bars. * Tests: `DevelopmentTests/GameplayAbilityToolkit/UI.Tests/Editor/RuntimeUIPanelContractTests.cs`. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://morningheartgames.gitbook.io/docs/gameplay-ability-toolkit/subsystems/runtime-ui.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.