Personal Project

Emota - Game Jam UI in Unreal Engine

RoleUnreal Engine UI Implementer

IndustryGaming

Date2024

OutcomeBuilt and shipped UI directly in-engine

At a glance

Full jam length, engine unfamiliar going in

Person team, sole UI owner

Screens shipped: menu, credits, end

The 30-Second Version

A quick note before you keep scrolling

In a 48-hour game jam, I taught myself Unreal Engine's UI framework and built Emota's main menu directly inside the engine. No static mockups, no developer handoff: the UI I designed was the UI that shipped.

I Owned

UMG construction for the menu, How to Play, and Credits panels
Blueprint logic for navigation, Play, and Exit
Blueprint logic for UI states and transitions
Syncing menu logic to backend game state

Built Alongside

Programmers on the gameplay systems and game flow
Artists on the visual direction

The challenge

Emota is an atmospheric Global Game Jam 2024 entry exploring emotional restoration and identity. As the team's only UI person, I needed a main menu that read as calm and emotionally weighted on sight, built inside Unreal's UMG and Blueprint system, which I had never used before. I spent the opening hours studying documentation and consulting technical artists on widget optimization before building anything. With 48 hours for the entire game and no time for a traditional mockup to handoff pipeline, every screen I designed had to be the shipping screen.

Key decisions

Build directly in engine from hour one

Problem: No prior experience with Unreal's UI framework, 48 hours total.
Decision: Built every screen directly in UMG and Blueprints from the start, rather than prototyping elsewhere first.
Trade-off: Slower first hours learning the framework, no early visual polish to show the team.
Result: No design to dev handoff at any point; every layout choice was already a working, scripted screen.

Build directly in engine from hour one

Problem: No prior experience with Unreal's UI framework, 48 hours total.
Decision: Built every screen directly in UMG and Blueprints from the start, rather than prototyping elsewhere first.
Trade-off: Slower first hours learning the framework, no early visual polish to show the team.
Result: No design to dev handoff at any point; every layout choice was already a working, scripted screen.

Build directly in engine from hour one

Problem: No prior experience with Unreal's UI framework, 48 hours total.
Decision: Built every screen directly in UMG and Blueprints from the start, rather than prototyping elsewhere first.
Trade-off: Slower first hours learning the framework, no early visual polish to show the team.
Result: No design to dev handoff at any point; every layout choice was already a working, scripted screen.

Build directly in engine from hour one

Problem: No prior experience with Unreal's UI framework, 48 hours total.
Decision: Built every screen directly in UMG and Blueprints from the start, rather than prototyping elsewhere first.
Trade-off: Slower first hours learning the framework, no early visual polish to show the team.
Result: No design to dev handoff at any point; every layout choice was already a working, scripted screen.

Build directly in engine from hour one

Problem: No prior experience with Unreal's UI framework, 48 hours total.
Decision: Built every screen directly in UMG and Blueprints from the start, rather than prototyping elsewhere first.
Trade-off: Slower first hours learning the framework, no early visual polish to show the team.
Result: No design to dev handoff at any point; every layout choice was already a working, scripted screen.

Prioritize hierarchy over decoration

Problem: Limited time for iteration meant little room to test or revise secondary visual elements.
Decision: Kept the menu focused on the title and primary navigation rather than adding secondary visual elements that would compete with the game's atmosphere.
Result: A readable, uncluttered menu that stayed legible under a tight public showcase deadline.

Prioritize hierarchy over decoration

Problem: Limited time for iteration meant little room to test or revise secondary visual elements.
Decision: Kept the menu focused on the title and primary navigation rather than adding secondary visual elements that would compete with the game's atmosphere.
Result: A readable, uncluttered menu that stayed legible under a tight public showcase deadline.

Prioritize hierarchy over decoration

Problem: Limited time for iteration meant little room to test or revise secondary visual elements.
Decision: Kept the menu focused on the title and primary navigation rather than adding secondary visual elements that would compete with the game's atmosphere.
Result: A readable, uncluttered menu that stayed legible under a tight public showcase deadline.

Prioritize hierarchy over decoration

Problem: Limited time for iteration meant little room to test or revise secondary visual elements.
Decision: Kept the menu focused on the title and primary navigation rather than adding secondary visual elements that would compete with the game's atmosphere.
Result: A readable, uncluttered menu that stayed legible under a tight public showcase deadline.

Prioritize hierarchy over decoration

Problem: Limited time for iteration meant little room to test or revise secondary visual elements.
Decision: Kept the menu focused on the title and primary navigation rather than adding secondary visual elements that would compete with the game's atmosphere.
Result: A readable, uncluttered menu that stayed legible under a tight public showcase deadline.

Fade to black before opening the level

Problem: Play needed to hand off from a UI heavy menu screen into gameplay without a jarring cut.
Evidence: the Play button's logic sets input mode to game only, hides the mouse cursor, starts a one second camera fade to black, waits 1.5 seconds, then opens the gameplay level.
Decision: Fade the camera out and hold before loading the level, instead of cutting straight from menu to gameplay.
Trade-off: Costs roughly 2.5 seconds of load adjacent wait time the player can't skip.
Result: A controlled handoff from menu to game that reads as intentional rather than abrupt.

Designing the menu

Recreated from the widget blueprint screenshots, not exported game assets.

Three screens, one tone: the main menu sets it against the stone archway backdrop shared with the game world, How to Play states the control scheme, and Credits carries the team credit and a thanks line, both returning to the menu the same way.

Building the UI

One Widget Blueprint, not a stack of separate screens: a canvas panel holds the background and title, a Widget Switcher holds three panels, and three small Blueprint stories make it interactive.

How to Play and Credits each set the Widget Switcher's active index (1 and 2); each panel's own Back button returns it to the main menu at index 0. One switcher, no separate widgets to show or hide.

Sets input mode to game only, hides the mouse cursor, fades the camera to black over 1 second, holds for 1.5 seconds, then opens the gameplay level.

Calls Quit Game directly on the owning player controller.

Sole UI owner across design and implementation, from the main menu through credits.

Collaboration

Worked alongside programmers and artists, with no separate UI handoff step.

Reflection

Building UI directly in Blueprints meant there was no fallback to a static mockup when something didn't work. Every layout decision also had to be a working state.