Otherskin

Shipped

UE5 UI Programmer

Game Atelier

Dec 2023 - March 2024Indie Studio
Unreal Engine 5.3GASCommonUIUMG

Overview

On Otherskin, I was brought in specifically for UI development, taking ownership of the entire user interface from menus to in-game HUD elements. The project used CommonUI extensively, which I integrated with custom UMG widgets to create a cohesive and responsive interface. Key accomplishments include building a complete cinematic system with subtitle support, implementing a modular settings system with real-time updates, and creating an intuitive tutorial framework that guides players through game mechanics.

Key Contributions

  • Main Menu / Pause Menu with CommonUI
  • Custom cinematic and intro video system with subtitles
  • Tutorial widgets and upgrade menu systems
  • Settings options with CommonUI

Technical Systems

Cinematic & Video System

Custom system for seamless playback of game trailers and cutscenes with subtitle functionality.

  • DataTable with video name reference, MediaPlayer asset, and subtitle data
  • Skip flag for optional video skipping
  • PlayVideos Blueprint Macro for single or sequential playback
  • Event binding for chaining content on completion

System Architecture

DataTable
Video Name Ref
MediaPlayer Asset
Subtitle Data
PlayVideos Macro
Video Playback
Completion Event
data->namedata->mediadata->subsname->macro

Modular UI System

Parent Widget Classes for main menu and settings with automatic focus handling.

  • Hierarchy-based parent widget classes for consistent navigation
  • Dynamic Option Widgets with configurable input types
  • Real-time setting updates with instant save
  • Video options with 'Apply Changes' workflow and unsaved warning

System Architecture

Parent Widget Class
Menu Page Widget
Settings Widget
Option Entry Widget
Auto Focus Handler
Real-time Save
parent->menuparent->settingssettings->optionparent->focus

Dynamic Tutorial System

Interactive tutorial menu widget integrated into pause menu and in-game experience.

  • Event-driven content display with DataTable references
  • Integrated video guides for complex skills with auto-resize
  • Adaptive display: interactive stays until action, info flashes briefly
  • Smooth fade-in/fade-out animations for engagement

Videos