logo
THE LONG DARK REVERSE ENGINEERED UI SYSTEM This project offers menus and modular assets (widgets) designed for creating main menus. Initially replicating The Long Dark's UI as a reverse engineering project, the assets are versatile and can be easily reused for personal projects.
Team Size: Solo Solo
Duration: 7 Weeks 7 Weeks
Role: Game User Interface Designer UI Designer
Developed In Unreal Engine Unreal Engine
itch.io
PROJECT OVERVIEW
About Project
image image
In this project, I was tasked with creating a feature for a hypothetic game while in the pre-production phase. The goal of this was to analyze a reference game and create a benchmark demo in engine. I needed to create a game and engine research documents before I could start working on my feature. At the end, I created a How-To document and video tutorial explaining how to use my feature in a game project.
Challenges
image image
Modular Assets
In the early phase of the project, I caught myself copying and pasting some elements I had created, such as buttons in the main menu. To improve my productivity and to make it easier for the future, I decided to create modular assets for reoccurring elements in my projects. This would also make it easier for people who are unfamiliar with the implementation part to use my feature.

Scope Adjustment
Initially, I planned implementing not only the main menus, but also the HUD and the actions wheel. However, the research and engine experimentation took longer than expected, so I adjusted my plan and cut down the initial scope. I was able to achieve my new goal in roughly 3 weeks.
MY CONTRIBUTIONS
Reference Game Research
image image
I researched The Long Dark's UI to determine how its menuflow and juiciness is created. This included creating a research document where I analyze all of the UI elements I could find in the game, creating a menuflow flowchart, and creating some wireframes that helped me understand how the elements are laid out on the screen.
Menuflow Flowchart Menuflow Flowchart
Wireframes
Research Document
Implemented The Long Dark's UI
image image
Menus Into Unreal Engine 5
image image
I made use of Unreal Motion Graphics (UMG) for the UI implementation, having horizontal and vertical boxes to organize the menus seamlessly. Using animations, I made the axe on the left side of a button fade in and out upon hovering it. The Unreal hover events were useful in implementing different descriptions for the buttons. Furthermore, I incorporated sliders for options such as audio and buttons to go between multiple options throughout the settings menus to streamline the process of making selections.
These are the following menus I developed:
•  Templates (For people who would want to use this for their own project): Main Menu, Options Menu
•  Main Menu : Wintermute (New Save, Load Save), Survival Mode (New Save, Load Save), Feats, Challenges (New Challenge, Badges), Extras, Options (Accessibility, Audio, Brightness, Controls, Display, Key Bindings, Privacy, Quality)
Menuflow Showcase
Create Modular UI Assets
image image
The creation of modular assets was easier than I thought and extremely useful, as I could use these to build the menus without cramming too many elements on one screen. I mainly used text boxes and buttzons, and their functionality was created with the help of event dispatchers. I added variables that could be set in the editor and change the widget's information in game. 
Here you can see the buttons for all the kinds of different experiences that once clicked on, they change the picture, description, and text on the right side.
"Choose Your Experience" Menu "Choose Your Experience" Menu
Created Implementation
image image
Guidelines Documentation
image image
How To Document: This document explains all of the project's assets and how to use them for your own. You would of course need to change the visual assets to not be the same as in the game. It has a changelog that helped me create a paper trail for my work, step-by-step tutorials, and even a section for potential bugs.

Video Tutorial: I created this to showcase some implementation of my system. It goes over what I discuss in the How To Document, but it is easier to follow along for anyone who would be interested in my project.
Video Tutorial
Achievements
image image
Throughout this project, I was able to work with an engine and a coding language that were completely new to me. However, having experience with Unity and C#, I quickly adapted to the challenge, implementing the key elements of my game within the first 3 weeks. This gave me enough time to figure out how to efficiently implement my stretch goal, the power-up system. My work was recognized when I playtested my game at the end of the 7 weeks and had people tell me it is fun and someone even said they were impressed and it was the best year 2 game they played.