In this breakdown, I’ll walk you through the process of integrating UI elements into Unreal Engine for my Mononoke-inspired side project. From creating dynamic title screens and HUDs to adding custom sound design in post-production, this project showcases my ability to merge tech art with UI design, bringing everything together in a cohesive, interactive experience. Whether it’s animating game elements or composing custom music, each part was carefully crafted to enhance the overall feel and immersion.
Prototype Objective
The goal of this prototype is to highlight my skills as a UI tech artist, even in a « UI Art Mockup » oriented project.
Initially, I planned to create the title screen using only After Effects, focusing on parallax animations and custom music, while integrating the pause menu into Unreal Engine to work on the transition between gameplay and UI, keeping the game’s background visible.
However, as I progressed with the menu integration in Unreal, I realized it would be quicker and more interesting to do everything within the engine. I also decided to add the loading screen to link the two screens I had originally planned to integrate.
Scene Preparation
To prepare the scene, I used several asset packs: one for the overall environment, one for the giant wolf, and another one for the wolf that follows the player. I chose assets from the « Dark Medieval » pack as it matched the atmosphere I envisioned while I worked on the Mononoke UI Project. I had to create the scene from scratch because the provided one was too complex for my tests.
Additionally, I kept the default character in Unreal Engine to highlight the use of the engine, and for fun, I decided to add a wolf that follows the hero, as in the game I imagined, the heroine could have one or more wolves as companions.
Pause Screen
About the pause screen, to have the game screen as the background for my pause screen, I used Unreal Engine’s Render Target system. I added a SceneCapture component to the character’s blueprint, which acts as a « fake » camera. I placed it at the same position as the game’s camera, which is attached to the ThirdPersonCharacter, and set the render output to a custom material. Then, I modified the shader and added a few textures on top to achieve a « paint and ink » effect, aligning with the style I designed during my UI Art work.
The menu itself was fairly simple to code, with a selection identifier linked to the input events I added. I then included some animations for the menu opening to smooth the transition between gameplay and the pause screen, as well as hover animations to emphasize player interaction in the menu.
As a final touch, I randomized the orientation of the paint textures layered over the menu background, so the player feels like the menu changes each time they’ll pause the game.
HUD
The HUD integration was a relatively late decision in this « side project ». As a result, I implemented it quickly, leaving it mostly in a « placeholder » state. The only interactive element is the Minimap, as it would have felt odd not to see it moving when the character moved.
I also added a functional clock, in case the recorded demo lasted longer than expected, so viewers could see the time pass.
On the coding side, my previous project, Multitool, involved integrating a fully diegetic UI and a HUD. I reused the code I had developed to animate the Minimap, including the map movement and the orientation of the vision cone.
Title Screen and Loading Screen
The Title and Loading screens were relatively easy to integrate. I wanted to make the title screen more dynamic by adding animations, such as horizontal parallax movement of fog, the yokai’s eyes blinking, and screen entrance animations. I also included hover animations, similar to those used in the Pause screen.
As for the loading screen, it’s hardcoded and timed with the game’s code, while the loading icon animation was created directly in the shader using a radial UV animation.
Sound Design and Music
After the UI Integration part, I captured a short gameplay session without cuts, navigating from the Title Screen to the game, showcasing the pause menu several times. However, I still needed sound. Since I hadn’t planned for sound integration from the beginning (in engine), I decided to handle everything in post-production.
I imported the video into FL Studio to score it directly. I first composed the intro music, drawing inspiration from the theme of Princess Mononoke film, but with a more epic/orchestral twist, and I created ambient soundscapes for the gameplay segment. During pauses, the sound simply fades out, similar to what’s done in many other games.
For the sound design, I used a variety of audio libraries for footsteps, menu clicks, navigation sounds, and some environmental effects like campfire crackling and the howl of the giant wolf that acts as a boss.