UI of the Bocardo: Attack & End Turn Button

Towards the end of our development, we decided to switch the Attack & End Turn buttons to add a bit more polish. The old buttons were a prototype and didn’t match our color pallet, so we decided to change it up at the end to add some more polish. Here is a look at the old buttons in the early prototype stages of our game:

Now that some of the art assets have been updated, the buttons felt a bit out of place. I started my process by first searching the unity asset store to see if there were buttons available to use that matched our theme and color pallet. I luckily came across one that matched our stone aesthetics for the damage output tab. Here is a link to the asset, and a look of what it looked like before editing: https://assetstore.unity.com/packages/2d/gui/icons/fantasy-buttons-pack-18322.

After purchasing the asset pack, mostly only for the stone button, I went into photoshop with the asset and I made some quick edits to add text and variations for hovering and clicking the button. I could have made the button myself in photoshop, but with our time constraints I did not mind spending 10$ to save myself some time. Something to always consider is if it is worth the time to make something that already exists, and since we were in the polishing stages of our game we did not want to spend the time creating new assets from scratch. Adding text and quick variations of the button for the Attack and End Turn still took a bit of time in itself, so any time saved is worth the 10$ even if it only saved a couple of hours. The font that I used for the text was Matura MT Script Capitals, and the color of the font matches the color of the font for our logo. For the pressed and hover versions, I added an extra border around the edges, and duplicated this border and changed the opacity for the selected version to make it appear darker. For the Hover versions I change the color of the opaque layer to be lighter so it would look highlighted. After making my edits in photoshop, these were the final products: 

Attack Button Idle:

Attack Button Hover:

Attack Button Selected:

End Turn Button Idle:

End Turn Button Hover:

End Turn Button Select: