UI Design Deep Dive

Hey everyone, Taj here and this week we will be doing a deep dive on how I have been creating the UI elements for the game!

Lets start with the HUD elements, I wanted to bring the decimated low poly look of the game into the UI, so from the start I planned to create each element as a 3D decimated model which would be rendered with an orthographic camera to use as a 2D element without any camera perspective. The first part I created was our numbering system which would be created to look like old school vacuum tube displays which gives a sort of esentric sci fi feel to the system without being generic digital numbers. These number systems can be used for tracking the players speed, ammo and also their time. The speed system would be displayed to the player as a sectioned neon circle that fills the faster they move with their speeded recorded in exact numbers on top of this display using the vacuum tubes.

The players boost system I pictured as a sort of energy fluid of some form. Yellow being what is associated with speed and energy, the bright vibrance of the colour really pushes that idea forward so quickly our boost bar became a tube filled with a slowly draining energy fluid. This was originally intended to glow with energy but after large amounts of trial and error, I couldn't find a way to successfully achieve this look so it had to be pushed to the side with its return hopefully in the future.

The next major step in our UI creation was a needed overhaul to our main menu system with some more polished buttons and a cleaner layout. I played around with a few different designs before settling on our final design, being clear glass buttons almost like the space bar on a keyboard, held to a metal base block with clean metal bolts in the corners. Each of these buttons would have the text for the button suspended in the glass which would light up with a neon blue glow when moused over. This system worked really well with group feedback so this system will be used for most if not all of the buttons throughout the game going forward.

Going forward I need to rework the games crosshair to fit with the new updated HUD system and I want to create a short looping background for the main menu showing the portal in the lab, sparking with lightning. 

Thats all from me this week, thanks for coming on this little journey into the UI development for Mobility. Hopefully it won't be too much longer before a build of the game can be released here for anyone to play! I'll see you all in next weeks blog post!