Interactive Components

Interactive Components and Templates

Icon Component System

Icons in games typically consist of three visual layers: Background, Icon, and Border.

Icon Widget Structure

Component Setup:

• CanvasPanel_Body and CanvasPanel_Div (containers)
• Image_Background, Image_Icon, Image_Border (visual layers)
• Text_Label (description text)
• Button (interaction layer)

Sizing and Alignment:

• All images: 100x100 (standard square icon size)
• Text: Enable “Size to Content”
• Button: 90x90 (slightly smaller for hover effect)
• Center alignment: Anchor to middle, X/Y alignment 0.5
• Text anchor: Bottom middle with Y position +5

Icon Texture Creation

Photopea.com Workflow:

1. Background: Create 100x100, 300 DPI project

   • Use gradient tool with chosen colors
   • Add Filter → Noise (3%) for texture
   • Convert to black/white for dynamic color control
   • Export as T_icon_Background

2. Border: Create new layer

   • Rectangle tool: 100x100, stroke size 6, white color
   • No fill, stroke only
   • Export as T_icon_Border

3. Icon: Create symbol or use font symbols

   • Center the design
   • Export as T_icon_Key (or appropriate name)

Import Settings:

• Import all three textures
• Right-click → Sprite Actions → Apply Paper 2D Texture Settings
• This ensures proper sharpness and transparency

Icon Variables and Functionality

Texture Variables (Instance Editable):

• Background_Texture, Icon_Texture, Border_Texture (Texture 2D)
• Background_Color, Icon_Color, Border_Color (Linear Color)

Visibility Controls:

• Background_Visibility, Icon_Visibility, Border_Visibility (Boolean)
• Label_Visibility (Boolean)

Interaction Controls:

• Label_Text (Text)
• Button_Enabled (Boolean)

Icon Implementation

Pre-Construct Event: Use Set Brush from Texture and Set Color and Opacity for each image layer:

• Apply textures from variables
• Apply colors from variables
• Set visibility based on boolean variables
• Update text label and button enabled state

Button Styling:

• Normal: Tint Alpha 0 (invisible)
• Hover: Tint Alpha 0.3 (subtle highlight)
• Pressed: Tint Alpha 0.15 (pressed feedback)

Z-Order Management:

• Background: Z = -100 (back)
• Icon: Z = -50 (middle)
• Border: Z = 0 (front)
• Button: Z = 50 (interaction layer)

Progress Bar Template System

Multi-purpose progress bars for health, mana, stamina, and experience.

Required Enumerations

Enumeration_ProgressBar_Template:

• Experience, Health, Mana, Stamina

Enumeration_Value_Display:

• Numbers, Percentage

Widget Components

Structure:

• CanvasPanel_Body (container)
• ProgressBar (main bar)
• Text_Value (value display)

Sizing by Type:

• Experience: 17x20 (wide, thin)
• Health: 300x30 (prominent)
• Mana/Stamina: 150x20 (medium)

Progress Bar Variables

Template System:

• Progress_Bar_Template (enumeration, Instance Editable)
• Progress_Bar_Template_Health/Mana/Stamina/Experience (Progress Bar Style)

Value Management:

• Value_Minimum, Value_Maximum, Value_Current (Float)
• Value_Display_Option (enumeration for Numbers/Percentage)
• Debug (Boolean for testing)

Progress Bar Implementation

FValue_Update Function: Switch based on Value_Display_Option:

Numbers Display:

• Format Text: “{Current} / {Maximum}”
• Use Value_Current and Value_Maximum with rounding

Percentage Display:

• Format Text: “{Percentage}%”
• Calculate: (Current ÷ Maximum) × 100, then round

Bar Update:

• Set Percent: Use (Current ÷ Maximum) ratio
• Template switching applies appropriate style and size

Color Customization: Each style variable configured with different tint colors:

• Experience: Teal
• Health: Green
• Mana: Blue
• Stamina: Yellow

Interface Integration

Blueprint Interface: Interface_ProgressBar_Template

• Interface_ProgressBar_Set_MinMax (Minimum, Maximum floats)
• Interface_ProgressBar_Update_Current (Current float)

This interface system allows external blueprints to update progress bars without direct references, maintaining clean architecture.

Editable Text Box Templates

Flexible text input system for various game needs.

Template Types

Enumeration_EditableTextBox_Template:

• Basic (standard text input)
• Password (obscured text)
• Number (numerical input only)

Component Structure

• CanvasPanel_Body (container)
• EditableTextBox (input field)
• Text_Label (field description)

Variable System

Template Variables:

• EditableTextBox_Template (enumeration, Instance Editable)
• EditableTextBox_Template_Basic/Password/Number (Editable Text Box Style)

Content Variables:

• Label_Visibility (Boolean)
• Label_Text (Text for field name)
• Label_Text_Hint (Text for placeholder)

Implementation Features

FSet_Label Function:

• Control label visibility
• Set label text from variable
• Position label above input field

Template Switching:

• Basic/Password: 225x40 size, hint text from variable
• Number: 50x40 size, ”#” hint text
• Password: Set Is Password to true for text obscuring

Styling:

• Black text color for all templates
• Consistent sizing based on use case
• Hint text provides user guidance

This modular approach creates reusable text input components suitable for usernames, passwords, chat systems, and numerical inputs throughout the game interface.