UI Mechanics Document
This document provides a comprehensive overview of the User Interface (UI) mechanics implemented in the game. It explains how various UI components are structured, managed, and animated to ensure a cohesive player experience.
Overview
The UI system supports interactive elements such as popups, animations, and task-specific displays. Key features include:
- Popup dialogs for confirmation and informational messages.
- Animated transitions for enhanced visual appeal.
- Task-specific UIs such as dress-up nodes and quest objectives.
- Dynamic state handling for interactive components.
Core Components
1. UI Manager
The UIManager
handles the lifecycle of UI components, including opening, closing, and animating.
Key Features
- State Management: Tracks the open or closed state of UIs.
- Event Handling: Fires events on UI state changes.
- Prefab Management: Instantiates and destroys UI prefabs dynamically.
Key Functions
OpenPopup
: Opens a popup UI with animation.CloseUI
: Closes a UI and cleans up resources.GetUI
: Retrieves the component of an open UI by its ID.DoAnimation
: Applies specified animations to UI components.
2. Popup UIs
Generic Popup
Used for displaying simple messages with optional confirmation callbacks.
Key Functions
Init
: Initializes the popup with a message and OK callback.InitPurchase
: Extends functionality for purchase confirmation with custom callbacks.
Welcome Popup
Provides an introduction or tutorial to new players.
Outfit Choice Popup
Allows players to select from multiple clothing options for tasks or customization.
3. Dress-Up UIs
Dress-Up Node UI
Handles individual dress-up nodes, displaying clothing options and animations.
Key Functions
Init
: Initializes the node with parent data and world anchor.SetChosen
: Updates the visual state to indicate selection.PlayScaleUpAnim
: Plays a scale-up animation when the node is selected.PlayPulsingAnim
: Animates the node with a pulsing effect.
Dress-Up Closet UI
Manages the overall interface for selecting and modifying outfits.
Key Functions
Init
: Initializes the closet with the parent controller.Refresh
: Updates the state based on current dress-up choices.Show
: Toggles visibility of the UI and its nodes.
4. UI Animations
Popup Animation Helper
Provides reusable animations for scaling and sliding UI elements.
Key Functions
PlayOpenAnim
: Scales a UI element from 0 to full size.PlaySlideUpAnim
: Slides a UI element up from an offset position.
5. Task-Specific UIs
Node UI
Handles task nodes, such as dress-up or quest objectives.
Key Functions
SetChosen
: Marks a node as selected or unselected.HideNodeForScaleUp
: Prepares a node for a scaling animation.ClientUpdate
: Updates the node's position relative to the screen.
Quest HUD
Displays objectives and progress for ongoing quests.
Workflow
-
Opening a UI
- Use
UIManager.OpenPopup
with a prefab and ID. - The
DoAnimation
function applies a transition effect.
- Use
-
Interacting with a Popup
- Call
Init
to configure message and callback behavior. - Buttons trigger callbacks and close the UI using
CloseUI
.
- Call
-
Refreshing Task UIs
- Nodes update their state dynamically with
RefreshNodes
. - Animations like
PlayScaleUpAnim
enhance interactivity.
- Nodes update their state dynamically with
Example Implementation
Opening a Popup
local popup = UIManager.OpenPopup(_genericPopupPrefab, "GenericPopup")
popup.Init("Are you sure?", function() print("Confirmed!") end)
Scaling Up a Node
local node = UIManager.OpenNodeUI()
node.Init(parent, nodeData, worldAnchor)
node.PlayScaleUpAnim()