GUI Demo◎

1. Skill Tree System

1.1 Node Architecture

• Each skill is a self-contained Widget Blueprint.
• Nodes are manually placed for layout control, but all behavior is data-driven.
• Every node stores:
  
  • NodeName
  • SkillState (Locked, Available, Purchased)
  • An array of node connections, allowing multiple outgoing links per node.
• Visual state (color, interactivity, animation) is derived entirely from SkillState.

1.2 Per-Node Material Instances

• Each node owns its own Material Instance Dynamic for the UnlockFill child.
• MID creation happens in OnConstruct of the node widget.
• This avoids shared state issues where adjusting one node would affect all others.
• Scalar parameters on the MID are driven at runtime for unlock progress and feedback.

1.3 Unlock Interaction Flow

• Input is handled in the Player Controller.
• The Skill Tree widget exposes a CurrentSkillNode reference.
• Holding the input key:
  
  • Starts a timer-driven fill on the active node.
  • Progresses from 0 → 1 over a fixed duration.
• Releasing early:
  
  • Reverses the fill back to a negative baseline.
• Successful completion:
  
  • Triggers a short delay.
  • Resets the fill.
  • Updates node state and visuals.
• No Event Tick is used. All time-based behavior is timer-driven for predictability and performance.

2. Line Drawer for Skill Tree Connections

2.1 Motivation

• Early attempts tied line rendering directly to node widgets.
• This caused scope, geometry, and repaint issues.
• The final solution separates rendering responsibility into a dedicated widget.

2.2 Final Approach

• A dedicated Line Drawer Widget sits above the node canvas.
• It overrides OnPaint to render all connections in one pass.
• The Skill Tree widget:
  
  • Collects all nodes.
  • Resolves their connection data.
  • Supplies start and end positions to the Line Drawer.

2.3 Technical Details

• Absolute positions are derived from widget geometry at paint time.
• Lines are colored based on node state.
• The system supports:
  
  • Multiple outgoing connections per node.
  • Directional clarity without duplicating lines.
• This approach avoids per-node draw calls and keeps layout logic centralized.

3. Radial Menu System

3.1 Data-Driven Design

• The radial menu is fully backed by a Data Table.
• Each row represents a weapon and includes:
  
  • Icon
  • Display name
  • Index / slot metadata
• The UI does not assume a fixed number of weapons.
• Adding or removing weapons only requires editing data, not Blueprint logic.
• All weapon stats are also stored in a data table, that way if weapons are upgraded in the future, data management won’t be tricky
  

3.2 Runtime Behavior

• The menu dynamically spawns segments based on table size.
• Selection logic resolves directly to data rows.

4. HUD Elements

4.1 Health Bar with Pulse Logic

• Health is visualized using a heart-based bar.
• A pulse animation is driven by health percentage:
  
  • Faster pulse at low health.
  • Slower pulse at high health.
• The effect is parameterized rather than hard-coded, allowing easy tuning.

4.2 Mini-Map and Compass

• Mini-map and compass are implemented as independent widgets.
• Orientation updates are driven by player rotation.
• Visual assets were authored externally and animated inside Unreal.

5. UI Transitions and Glitch Shader

5.1 Glitch Entry Effect

• The skill tree is introduced using a custom glitch material.
• The shader uses:
  
  • UV distortion
  • Time-based noise
  • Masked blending for controlled transitions
• Exposed parameters allow the effect to be reused across UI elements.

5.2 Usage

• The skill tree remains invisible until the glitch transition completes.
• The same material can be reused for exits or other UI reveals.

6. Text De-Scrambler (Typewriter Effect)

6.1 System Overview

• Text is revealed progressively using a timer-driven approach.
• Characters are temporarily replaced with randomized glyphs.
• Locked characters stabilize over time until the final string is fully revealed.

6.2 Technical Notes

• No per-frame ticking.
• Timers control:
  
  • Character reveal rate.
  • Scramble duration.
• The system supports:
  
  • Variable speeds.
  • Interrupts and resets.

7. Visual Assets and Animation Workflow

• All UI assets were designed in Adobe Illustrator.
• Widgets are animated directly in Unreal’s UI animation system.