FRACKED : UI
The UI in Fracked can mainly be found in the frontend and used sparingly throughout the game, preferring a more contextualised approach whenever we could to make interactions feel tactile and dynamic. Our Frontend menus are the face of our game and therefore very important in helping set the tone and style, ensuring the game feels like a polished product. We wanted to apply the same art direction cues from the main game to the UI elements, maintaining consistency and allude to some of the themes present in the story and visuals.
After a long pre-vis cycle of reference gathering and trying out style possibilities, we settled on a shattered feel that reflected the crystalline themes, whilst also lending a certain anarchic feel to the buttons that felt appropriate to the bombastic style of the in-game art direction. We used Unreal's UMG, as well as some bespoke tech of our own, to create the interactive panels and had an interesting time getting non-uniform masked buttons to work, but the efforts were worth it!
The styling continues into the interactive panels that you see in-game in various popups and title sequences.
Early UI experiments in 2D. We started out with a much punkier, cut and paste look. Some of that styling remained in the final look of the UI, but with a layer of theming appropriate to the game.
The style continues to evolve over subsequent iterations. Here we're setting up the screens in UMG using placeholder textures with representative shapes that we can simply replace with the correct styling later.
Early experiments with a 3D background behind the UI. This is actually a single environment skybox - a sphere encircling the player feeling like a 3D space.
This shows the look of the final UI elements. We liked the neutral idle states of the buttons to be contrasted with the vivid orange of its active (rollover) state which feels positive and satisfying to use.
More screen development with live scalable text, animated rollovers and screen to screen animations bringing it all to life and feeling tactile.
Logo designs created during production.
More logo work depicting how to shatter the title elements as a guide for the VFX team.