Visual Prototyping

Now comes the fun part, making stuff look nice. The first thing I need to do, however, is decide and create a prototype piece for the visual style I'd like to achieve. I need to keep in mind that this is a dystopian Sci-Fi game, and that because of the lack of humans, you would effectively be looking through the eyes of an AI. So, I decided to gather some visual references to help decide on what I'd like things to look like.

Nier: Automata, a game where you play as Androids, which are effectively AI.

Star Citizen, an upcoming Sci-Fi game with clear and realistic/practical looking UI design

Armored Core V - the biggest inspiration for this game.

With these designs in mind, I can start prototyping my own UI. I will be focusing on the stamina/energy widget for the purposes of this prototyping, and will (hopefully) create multiple designs.

After much designing and work (a lot more than I planned to do before writing here), I managed to create this - which is functioning in-game.

Now, this may not seem like much, but what took so long is that I was trying to add a real-time scan-line effect in game to enhance it. Unfortunately, this didn't work out. What I got can be shown below, but it wasn't the effect I was going for and frankly I don't have the time to create it. While it looks nice in the GIF, in-game it looks rather lackluster, so I decided to not spend any more time on it and move on.

As I said, this effect looks a lot worse in-game. This is something I have to keep in mind with my UI, as the resolution on my headset isn't as dense as a monitor - making pixels very noticeable if you look carefully. That's also why I had to go with thicker lines, even though I would prefer thin ones, they're simply not visible enough. Perhaps, in the future, when we have better resolution headsets, I'll be able to achieve the effect I want.

With so much time put into this, I frankly don't have the time to try other designs. What I can do, however, is add on to and expand the visual elements by updating the other designs and creating various visual effects to compliment it all and bring it all together. That's what I'll be doing next.