Ui Setup Modular Components

UI Setup and Modular Components

User Interface Project Setup

Before creating modular components, we need to establish the foundation system for our UI.

HUD and Root Widget Setup

World Settings Configuration:

1. Create HUD folder in Coursera project folder
2. Create new Blueprint Class, search for HUD
3. Name it HUD_Coursera
4. Select and apply to World Settings

Root Widget Creation:

1. Create UI folder, then Root Widget subfolder
2. Right-click → User Interface → Widget Blueprint
3. Name it W_Root

Root Widget Configuration

The root widget serves as the container for all modular windows:

Size Box Setup:

• Add Size Box component, rename to Sizebox_Root
• Set Width Override: 1920, Height Override: 1080 (common widescreen resolution)
• This locks the widget at specific ratios

Canvas Panel:

• Add Canvas Panel, rename to CanvasPanel_Body
• This panel stores all completed widgets

HUD Initialization: On HUD Event Graph:

• Use Create Widget node → Select Root Widget → Add to Viewport

Note

Testing Setup: Add temporary text to verify UI initialization works properly during development.

Size Map Optimization

Understanding memory and disk usage is crucial for UI optimization.

Asset Size Analysis

Size Map Tool:

• Right-click any asset → Size Map
• Shows disc space and memory usage
• Compare blank character vs. complex UI widget

Circular Reference Prevention

Critical

Problem: Creating root widget within character blueprint causes circular references, dramatically increasing memory usage.

Solution: Use interfaces and object references:

• Object Variables: Highest level class, stores minimal information
• Interface Communication: Clean communication without hard references
• HUD as Central Hub: HUD stores hard reference to root widget, becomes communication center

Communication Architecture

Proper UI communication flow:

1. HUD holds hard reference to Root Widget
2. Character/Controllers use Object variables for UI references
3. Interface calls handle communication between systems
4. This keeps individual blueprint size maps low while maintaining functionality

Template Button Component

Creating reusable button templates for common UI interactions.

Required Files Setup

Enumeration Creation: Create Enumeration_Button_Template with entries:

• Confirm
• Cancel
• Close

Struct Creation: Create Struct_Button_Template with variables:

• Button_Style (Button Style type)
• Button_Color_Opacity (Linear Color)
• Button_Color_Background (Linear Color)
• Font_Style (Slate Font Info)

Widget Structure

Component Hierarchy:

1. CanvasPanel_Body (main container)
2. Button (renamed from default)
3. Button_Text (text display)

Styling Configuration:

• Copy existing button style/color/font to struct default values
• Button size: 150 width, text size: 18
• Default text: “Label”

Button Template Variables

Core Variables:

• Button_Template (Enumeration_Button_Template, Instance Editable)
• Button_Template_Confirm/Cancel/Close (Struct_Button_Template)
• Widget_Parent (Widget reference for close functionality)

Button Behavior Implementation

Template Switching: Use Switch node off Button_Template variable to:

• Set appropriate text (“Confirm”, “Cancel”, “X”)
• Apply corresponding struct styling
• Set button sizes (150x30 for Confirm/Cancel, 30x30 for Close)
• Configure colors (Green for Confirm, Yellow for Cancel, Red for Close)

Close Button Functionality: On Button Released event:

• Check if Widget_Parent is valid
• If valid: Set parent widget visibility to Hidden
• If invalid: Display error message for designer

Function Structure: Create FSet_Button_Template function:

• Input: Struct_Button_Template
• Break struct and apply to button style, colors, and font
• Use Slot as Canvas Slot → Set Size for button dimensions

This template system allows easy creation of consistent confirm, cancel, and close buttons throughout the UI with centralized styling control.