Space UI and UX

The design of the UI in The New Earth Conflict was that it should remain intrusive and clean from the gameplay.

Pause Menu

The pause menu for this project was imported from my old project, Sci-Fi UI. I cleaned up the user interface and applied optimizations that I have learnt over the years since this project, as well as optimizations that didn’t exist before.

One noticeable change was the changes to Unity’s VerticalLayoutGroup and the HorizontalLayoutGroup. These were used on the creating of the procedural layout of the menu elements, such as the Quests, button on the bottom-left, and the menu path in the top-right.

screenshot 27

The quest log I created came in handy when delivering the objectives of this project to the player. Allowing everything in the user interface to be intractable in some way gets the player used to clicking to find out more information, and sets a standard for a user friendly experience.

screenshot 29

Side Lines

In the future, if I was to redo this UI I would implement custom shaders to gentle animate some of the UI elements. The lines to the left of the screen are just a static image. A shader would allow me to save on file size by creating a procedural instead, which will allow for sharp and clear lines at any resolution.

I could also animate the lines in the shader to make them appear to rotate, which would be a clean and low profile animation to add to the UI. It would be very important to make sure that the animation remains low profile as not to distract from the important UI elements.

HUD

I created a custom and optimised system for Unity to create modular target markers. These markers can be given additional modules to describe how they behave. For example, the ship markers show health and shield on a bar below the name of the ship.

The New Earth Conflict 7

In the final version, the markers also had configurable fade ranges, which allowed more important information to be more visible.

The New Earth Conflict 2

Once a ship has been destroyed, the marker changes colour from either green or red to white, so it blends in with the other markers in the scene. It’s pretty important for the marker still to be visible for salvaging the ship and using the ships debris as cover. Ship debris make excellent cover from enemy missiles which have an erratic path.

The New Earth Conflict 5