building alliances - week 9 & 10

Stylised In Game UIs  

This blog includes:

- Ui in Game Final Art Development

- Ui Inventory Concept Art

- Examples of in-game content

Pixel Art In-Game UI

A few weeks ago, i began creating some concepts for the in game UI for our game. The tasks of UI were organised between me and Lydia, i would create the in game concepts while Lydia worked on things such as the pause menu and title screen UIs. I gathered feedback from my original sketches I Made a few weeks previous and tried to create something in a style that fit our game. 

I took inspiration from certain pixel games such as ____ and also took inspiration for my colour choices from artwork already created by people in my group. I wanted to keep with the underwater theme, and i didnt want everything to be too distracting from the main game so i kept my colour palette muted, while also being able to stand out well against the backgrounds of gameplay. To do this, i added thick outlines around each asset and also added a smaller white outline around them that could appear at certain times in the game to help them stand out against a dark background for example.

The assets i created are: 

the Player icon, health and oxygen bars - the design of these is based of my original concept sheet, design 6. This is the design that got the best feedback and felt the least distracting and most fitting.

A text box - our game has limited dialogue, as the only human main character that is seen is the mc diver. Despite this, we planned for our game to have moments where the MC will talk to himself to point players in the right direction and help to keep progressing the story/levels. for this we needed a simple textbox's design. This won't be present a lot, but it's important to create the asset either way.

- Menu and Inventory buttons - these buttons will be displayed in the bottom corner and can be pressed by players to access these menus. In some games, these menus can be accessed by things like keybinds instead but t felt more fitting for our game ot have actual menus that needed to be pressed to access as well as possible keybinds.

- a Sonar map - we discussed multiple ways our game could possibly include some sort of map/tracker feature. since our game revolves around a diver exploring caves and trying to get to the bottom, it made sense to have some sort of mapping system. we decided an underwater sonar map would be the best and most fitting way to include this.

These two images contain all the assets, but i created a version where the oxygen and health bar is lower/higher to try and show an example of what it would look like inside our game.

Feedback and Revisions

I sent these designs to my group to get some feedback and see if they thought it looked alright and would fit our game aesthetic, and this was the feedback i got! Sam suggested I add a feature where the health bar could change colours depending on how low/full it was, which i though was a great idea. as well as this, we discussed in class that possibly the Divers icon could become more damaged and cracked as the health got lower. 

I took this feedback into consideration and created 2 more variants showcasing different coloured health bars indicating different health levels. as well as this, i also created a version of the divers screen that was cracked too. I had the idea to create a gif showcasing the health bar going down, which I tasked myself to work on during the following weeks.

Heres a version of the finalised UI with a background from the game, compiled together to get an idea of what the gameplay could actually look like. Background drawn and designed by Sam (taken from our group discord.)

Inventory UI Concept Art

After completing the in game UI, I was also tasked with making the inventory UI too. We decided to incorporate a Inventory into our game as the player explores and finds new items. One of the main mechanics of our game is that players must gather things to upgrade their suit/fill their oxygen tanks to deep them protected and their health up the deeper they go into the caves. as the environment gets more dangerous, the players must collect better gear to keep themselves alive. As a way for players to manage items they found, we decided an inventory would be a good idea. I created 3 concepts of different Inventory UIs and asked for feedback from our group once again.

I was told that the 1st and 3rd one looked the best and most cohesive which i agreed with. I decided that i would create another sketch concept combining features of both and then created a finalised version of it over the following week.