• Studio

  • Studio API

  • Bots

  • Web API

  • Designer Resources

  • Host Resources

  • CREATE

    Examples

    Full Worlds

    Dress Up NPC

    Game Mechanics

    Edit

    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

    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

    1. Opening a UI

      • Use UIManager.OpenPopup with a prefab and ID.
      • The DoAnimation function applies a transition effect.
    2. Interacting with a Popup

      • Call Init to configure message and callback behavior.
      • Buttons trigger callbacks and close the UI using CloseUI.
    3. Refreshing Task UIs

      • Nodes update their state dynamically with RefreshNodes.
      • Animations like PlayScaleUpAnim enhance interactivity.

    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()
    

    Updated about 1 month ago

    PocketWorlds Icon

    © 2025 Pocket Worlds. All rights reserved.