Week 4 - Button Design

Unit 8 Week 4

Attack

Defend

Break

This week I began to design some assets that I will need to create my game. I decided to begin with some simple buttons to allow the player to select the action they wish to take in combat.

To begin with I created a 64 x 64 pixel art board within illustrator. This would not only to keep the buttons the same size but by adding a single pixel grid overlay, I was able to give each button a pixelated appearance that I want the rest of the game to have.

When coming up with the design of the icons, I wanted to keep them simple but recognizable. This would keep them inline with the simple aesthetic I want to have, but would also allow the player to easily understand what each option will do. To do this I chose a single colour for each button that I felt best represents the actions, Red is an aggressive colour so I used that for Attack and Blue is a passive colour so I used it for Defend. Finding a colour for the Break option was more difficult as while the action is a type of attack, I could not have two options using the same colour as it would look strange. In the end I narrowed it down to two options, green or yellow, both of these colours are actually quite neutral colours and it looked ok with both, but I chose yellow as I felt green would be too neutral while yellow has an energetic feel to it.

Next I began to work on the icons that are inside the button. I was going to just have the words Attack, Defend and Break inside, But I felt that that would make the player slow down in order to read the text. It also would mean that I would have to find or create a typeface that would fit with the aesthetic of the game and I don't have time to waste on something like that. After looking at the game Fate/Extra I decided to use their style where the actions are represented by small symbols. This helps the player picture what each action would do and would also let me keep the buttons small and square, which would have been difficult with text.

When coming up with the designs for the icons I wanted to use icons that would easily associate with the action that they are supposed to represent. I chose a fist for attack as it is a very aggressive gesture and would not be mistaken for another action. I also thought about using a sword, but unless my main character uses a sword this would not be as effective as a clenched fist. For guard I chose a shield as it is a symbol of defense. Finally for the Break action I chose to use a broken shield. This makes it obvious that this action is supposed to be used against a defending action.


While the above are not final designs, they are a good base for the designs that I am looking to make. In the final versions I hope to add more detail and perhaps change the designs a little to accommodate the setting of the game i.e: time period, colour schemes, etc..