Tuesday 19 April 2016

UI Development - Combat Menu

Every good turn based game needs a battle menu; where the player can make decisions on their actions. The group had a strong design style they wanted to go down at this stage, as we had started incorporating dice into the game world for deciding power, and our combat had switched to something based on the outcome of dice rolls for whether to deal damage or not.
As such they wanted the menu to reflect this, having a dice as a central element with the combat options coming off of it. this gave me a nice focus for development but still room to experiment design wise.



The first few were mainly to test the waters of what my team wanted, with each of them i tried a different dice as a focus to see what i could get out of it, the D6 made a very neat design, the D8 also made for neat design, the idea there being that there would be broad menu's that when clicked would bring more buttons for specific actions out, but this was dismissed (they wanted all the options clearly present from the start)
The D20 design felt like a bigger breakthrough to something good, the angular and multifaced aspect of it was visually interesting as a center piece (something which the D6 was not) and the options for combat all could be positioned around it in a professional manner.


Moving onto development of the D20 design i refined the dice by adding some tones to the design and making the dice more visually striking, alongside some orange tones to bring it into line with the life bar for the player. However, when i tried to orientate the text boxes to be more dynamically placed i quickly ran into the problem of legibility and professionality, the angles required to position some of the text here was not good looking, and so i quickly scrapped these text boxes in favour of the more earlier designed boxes.


The final design ended up being the best of most of my designs, the D20 dice, with a extra version of it scaled out for more impact on the shape. and the menu's from the D6 design, as these have the least complications with text placement and positioning on screen. In reflection i wish i could have done more to improve the legibility of the text, but i did make sure to add a stroke and some light tonal painting to make the text feel distinguished in the design, so it would look visually interesting.


No comments:

Post a Comment