Widget Prototyping

The first thing I need to handle with the UI is the standard positioning of all the Widgets. To go with this, I mocked up a rough design on where the HUD elements can be displayed in photoshop.

Now, there are specific choices I made for this design - the first being symmetry. Looking at the various UI designs (Specifically Armored Core 5), the HUD features a semi-symmetrical design. I decided to emulate that, and also continue my design of the HUD with my little 'prototype' - case in point, the Stamina bar and the Ammo bar matching it.

However, there is a specific reason why I placed the minimap and Ability cooldowns below them - that reason being various space sim games, such as Elite Dangerous. Within Elite Dangerous, the player has access to a similar minimap I have in mind, which is available at all times at the bottom of their vision.

Elite Dangerous and Armored Core 5 UI

I feel like I will proceed with this design - for now, at least. I believe I will most likely make changes that fit the plan of the 'UI space' I mentioned in an earlier post. So, I suppose, from now on, it's to make the designs in the engine, and see how they end up.

The first thing I've done is created a basis - a blank slate. Specifically, a container for the UI to stay in. Along with that, I've also made this container quickly 'follow' the camera instead of being snapped to it. This gives the UI a lose feel, which I feel is rather appropriate.

I consider this part of the UI the most important parts - hence they need to be the most visual parts of the UI. The rest, which I will go to work on, will be a lot more loose, and only visible when the player looks at a certain portion. Now, I just need to add the basis for the other sections of the UI, the targeting system, and things like that.

To create the other elements of the UI, I created the 3 pieces (using temporary visuals for now, to get a feel for how the UI is) on a separate 'box' containing the UI. This allows me to have a different kind of movement for the latter. To create the correct effect, I copied over the system I used for the curved bar UI and modified it slightly, such as slowing it down to roughly 10% of the speed and also making it so it doesn't rotate on the X or Y axis (roll and pitch), to keep it flat and visible at all times just by looking down. 

This is the basic idea for my UI. I should note, however, that this is not the final 'system' I intend to create at one point. What matters, however, is if it's usable - if it's at a 'minimum viable product' state. From here onwards, however, there's a few things I need to change. For example, you may notice that the minimap does not rotate - the thin cross in the center is made for orientation, facing north. Currently, however, the minimap doesn't do that. This is my next thing to fix (You will see it fixed in the next one I show).

With this all done, we now have a basis to work off of! Since this is all about visuals, I can now focus on making things look pretty. The thing is, what kind of style should I go with? That's what I'll be exploring next.