Advanced Ui Features

Advanced UI Features

Movable and Resizable Window System

Creating windows that players can move and resize during gameplay.

Window Template Setup

Base Structure:

• CanvasPanel_Body and CanvasPanel_Div (400x400)
• Image_Background (400x400, uses icon background texture)
• W_Button_Template (Close button, top-right corner)
• Button_Move (400x40, move bar at top)
• Button_Size (16x16, bottom-right corner)

Component Positioning:

• Close Button: Top-right anchor, X alignment 1, Y alignment 0, position (-5, 5)
• Size Button: Bottom-right anchor, both alignments 1
• Z-Index ordering: Background (-1000), Move Button (-100), Close/Size Buttons (1000)

Move Functionality

Timer-Based Movement System:

On Button Move Pressed:

1. Calculate MouseLocation_Start: Mouse Position - Window Position
2. Start timer: Set Timer by Event (0.001 seconds, looping)
3. Timer calls FWindow_Move function

FWindow_Move Function:

Get Mouse Position - MouseLocation_Start → Set Position (Canvas Panel Div)

On Button Move Released:

• Clear and Invalidate Timer by Handle

This creates smooth window dragging that follows mouse movement while pressed.

Resize Functionality

Dual-Axis Resize System:

On Button Size Pressed:

1. Store current mouse position: Mouse_Current_X, Mouse_Current_Y
2. Start resize timer (0.001 seconds, looping)
3. Timer calls FWindow_Size function

FWindow_Size Function Logic:

Horizontal Resize (X):

• Compare current mouse X to stored X position
• If equal: no change (prevents unnecessary processing)
• Calculate difference: Mouse_Current_X - X_Start
• Invert with multiply by -1 (correct scaling direction)
• Apply to Move Button and Background Image sizes
• Update stored position for next frame

Vertical Resize (Y):

• Same logic for Y-axis
• Only affects Background Image height
• Move Button width stays constant

Canvas Panel Div Auto-Sizing: Enable “Size to Content” so div automatically adjusts to background image size changes.

Window Designer Options

Feature Toggle Variables (Instance Editable):

• Move_Enabled, Move_Visible (Boolean)
• Size_Enabled, Size_Visible (Boolean)

Pre-Construct Implementation: For each feature:

• Enabled Check: Set Is Enabled (true/false)
• Visibility Check: Set Render Opacity (1.0 visible, 0.0 hidden but functional)
• Disabled State: Set Visibility to Hidden

This allows designers to:

• Fully disable features
• Hide buttons while keeping functionality
• Show buttons but disable interaction
• Full control over window capabilities per instance

Resource Bar Integration

Resource Widget Structure

Layout System:

• Canvas panels with 400x100 size
• Three Progress Bar Templates: Health, Mana, Stamina
• Center alignment with position offsets:
  • Health: Y position -15
  • Mana: X position -100, Y position 15
  • Stamina: X position 100, Y position 15

Progress Bar Template Updates: Add Value_Update function call to interface events:

• Interface_ProgressBar_Set_MinMax → calls Value_Update
• Interface_ProgressBar_Update_Current → calls Value_Update

This ensures progress bars update visual display when values change through interface calls.

Root Widget Integration

Resource Bar Positioning:

• Anchor: Bottom Middle
• Size to Content: Enabled
• X Alignment: 0.5, Y Alignment: 1.0
• Position Y: -100 (above bottom edge)

HUD Interface Integration: Resource widget becomes accessible through HUD interface chain: HUD → Root Widget → Resources Widget → Individual Progress Bars

Input Management System

UI Interaction Control

Development Input Mode: For UI development and testing:

Set Input Mode UI Only → Set Show Mouse Cursor (True)

This forces mouse interaction and prevents gameplay camera movement during UI development.

Production Input System: G-key toggle for switching between modes:

• Game Mode: Full gameplay controls, hidden cursor
• UI Mode: Mouse cursor visible, can interact with UI elements
• Seamless switching for players who want UI access during gameplay

Testing and Debug Features

Debug Mode Variables:

• Progress bars: Debug boolean for random value generation
• Icons: Visibility toggles for each layer component
• Buttons: Template switching for visual verification

Development Helpers:

• Print String nodes for error reporting
• Delay nodes for widget initialization timing
• Debug draw for trace visualization
• Size map monitoring for optimization verification

These debug features help developers test modular components and verify proper functionality before integration into larger UI systems.

The advanced features create a professional-quality UI foundation that can adapt to changing design requirements while maintaining clean code architecture and optimal performance.