VITAL TRANSMISSIONS – DESIGNING NO LOVE LOST’S HUD

As a new Raider on a strange planet, there is much to learn and discover about the Nectar Raiding trade. However, a lot could get lost in transmission if the games UI fails to properly explain what you need to do to be a successful Raider! Here to guide us this month is our very own UI artist, Keiana, as she explains how she went about designing NO LOVE LOST’s HUD!

STAND BY – DEFINING THE HUDS STYLE

The HUD is the in-game screen containing all the player's important information such as Health, Score, Items, Objectives, Compass, mini-map, etc. This was the first screen to redesign because it’s what the player will be relying on the most during gameplay. It needs to represent the theme while carrying all the necessary information for the player to have a comfortable gaming experience. So the first task was to replace the placeholder items with new and improved ones! Below, you can see before and after pictures.

GROUND CONTROL TO MOTHERSHIP – DRAFTING THE HUDS LAYOUT

• To start the redesign, we first need to know what layout and style the game will have.

• Wireframes are created to view different layouts. Does it look better if the health bar is on the left or right? Should we have a mini map? Where should we place our leaderboard?

  These are all questions that are answered by creating and discussing mockups.

• Once that's decided, a moodboard is created with screenshots and images of different games, movies and shows that can help build the style.

Using the moodboard as reference, many Mockups of the HUD are then created in Photoshop and narrowed down by the team.

OVER & OUT – ACHEIVING CLARITY WITH THE HUD

Once the mockup is approved, we can move onto the integration stage. The integration stage is when the individual HUD elements are brought into Unreal Engine to be implemented and tested. By testing in the engine, we get to see what the icons will look like in the game. Animations, effects, adjustments by the very pixel are then made to provide the player with clear and intuitive navigation while playing.

Some examples of changes we’ve made are how the Healthbar was originally centered. Through brainstorming, we decided that the Healthbar fit best at the bottom left corner and the items bar on the right so that the player has a clear view of the center landscape while playing. Vision is important! We don't want to obstruct vision, so we made sure to place all the elements along the edges of the HUD screen. This way, the eye naturally looks around the edges for information, center for gaming.

Once the assets are good to go, they get pushed into the game ready for gameplay!

And there you have it – our deep dive into the UI process and how Keiana applied it to ensure you Raiders don’t get lost down there on Drosera! What did you think? Let us know in the comments or over on our Discord!

To stay up to date on all things NO LOVE LOST, be sure to check out our STEAM page and follow us on Twitter, Instagram, Facebook, Reddit and YouTube!