UI of the Bocardo: Menu

Towards the end of our development, we needed to add 3 menus into our game; Main Menu, Controls Menu, and Pause Menu. As the UI designer, it was my responsibility to create a mockup for how the menus should look. First I spent some time in Figma creating mockups to show the team my vision for the 3 menus. 

Next, we needed to create the menu assets that were needed. The Main Menu and Controls Menu needed some art decoration.. We received some help from our artist, Kyle, for creating a nice looking background that we could use for both the Main Menu and Controls Menu. I was able to make the pause menu by using unity elements, including an image for the background, text, and buttons. I set the opacity of each so it was transparent, and added a shader that makes the rest of the screen a bit darker when you open the menu. After I added the images I had to make the text into buttons so you could click on them to change scenes. I had to make the buttons appear to match the game. I also added a hover and select variation, as I did for the attack and end turn buttons in my other dev log.

The last step was to create a script for changing the scenes. I created a new empty game object called ChangeScene and attached the script to it so I could make it into a prefab. Making it into a prefab allows you to easily add it to every scene. The script is needed to attach the ChangeScene game object to the buttons so you can change scenes, and for the exit game button it quits out of the game. It took me a little to figure out that I was not supposed to use the script for the buttons, but was supposed to use the game object that I attached the script to. The pause menu required a little more scripting because it needed to be accessed by using the P key and it needed to pause the game and resume the game when deactivated. This required a little bit of research because it involved some code I was not familiar with, but after watching a couple of tutorials use the same line of code, Time.timeScale = 0f; or 1f; I figured out how to use it and implemented it into the pause menu script.