Friday 21 November 2014

UI Design

Within my game the protagonist has a number of powers that he must earn and collect to help him in his Quest. I have been looking at the UI from games for some power/ ability menu's, Here are a few that I like the look of and think could work within my game, if changed to my games style.
The one I Love the most Is below from Bioshock Infinite. 
The use of the system is easy to use, you rotate around the wheel to which power you wish to equip and then select. The selected power will show in the middle, and can also be seen whilst in game.
I love the style of these Icons as well I imagine there based on early american culture e.g tattoos.
My style to go with the rest of the game will be more tribal symbol style.
Here is another example of stylised power symbols, these are the elemental symbols from the Soul Reaver Saga. I really loved these designs, and they are incorporated within the game such as in the architecture and art, sometime to giving you hints to use certain elemental powers on specific objects in order to complete a puzzle or open a door, in that way my game will be similar to Soul Reaver. The actual UI for the selection of what element you use is actually not great in my opinion, its is basic and easy to use but there doesn't seem to been any effort put into its design. See below, its just a simple ring with the power selected at the for front. The symbols are different here as it is another game, the first I think. 
Below is my iteration of concept designs for the UI that would show the powers you have obtained and which you can select. I wanted to go for a very symbolic themed UI system, I settled on the idea of having hand shapes instead of circles. So I looked into the classic hand symbol e.g. push here symbol. I then found a more stylised version of it. I went on to experiment with that, by adding a finger as my character has five fingers and a thumb. I made six versions using this hand and experimented with the look but ended not liking it to much. I went back to my sign design which is the blue hands, the fingers are splayed out and I feel that gives it a more interesting look, especially when all 8 face outwards. I choose 8 as thats how many dots aboriginals have around they're symbol for the sun (believed to represent the planets)
Here is the final outcome for my UI power menu design (below is another iteration). This radial menu would come up when holding down a button e.g. the left bumper. The hands rotate around the radius, and the highlighted purple icons show the power that is currently selected. At the beginnig of the game only one hand would be shown in the radial menu, however you gain a new power each stage and they will be able to be equipped from this menu.
Above is the final concept of my health bar design. Green = Health, Red Health taken and Orange = Damage. Damage means it can still come back if you get to safety or defeat the enemy. The large circle above holds the lighting power symbol, this means the player has the lightning power equipped. Powers are strongest when the circle is full, the circle becomes less full the more you use your power, it re-fills over a short time period. The blue orb represents the blue orbs/ Lucidity found in the game, the numbers indicate how many have been collected in which ever section you are in, out of how many there are.

No comments:

Post a Comment