Outside the Box Project Alpha Work - Main Menu Development

The governing concept for the majority of our games aesthetic was that a child had built the game board in their spare time and that the act of playing our game was seeing this kids imagination come to life as they saw it when they played.

So to reinforce this concept we decided that in the main menu the player would be able to see the game board the kid had made and that the player would have a sense of where they were when they chose "New Game". To that effect the main menu design was based off the living room in my student house where Chess and I initially made the concept of this game prior to the start of term.

Figure 1.

The tea mug in Figure 1. was later removed as it came across as too grown up for the desired design for the main menu.

Figure 2.1.

Figure 2.2.

Figure 2.3.

Figure's 2.1, 2 and 3. each represent how we wanted to make the main menu somewhat diagetic, that the player was seeing through the eyes of the child at the table ready to play. This also involved things like the "Credits" button activating an animation, created by me, where the camera rotates up and to the right to look at the pin board, where our credits would be pinned up like paper.

However, with the fridge in the referenced image and scene of my living room, the pin board was replaced with a fridge scene with magnets on, and the pin board was repurposed as the magnets themselves. These magnets would then contain pictures of us, the developers, holding paper to the fridge door with our credits visible, as if someone had left a note.

The animation only required 3 key frames; the first being the starting position seen in Figure 1. the second had it's Rotation variable of the Transform component set to 0, to portray the camera looking up, and finally the third key frame was a Rotation on the Y axis to look to the right toward the fridge (Figure 2.2.).

To return to the main menu proper seen in Figure 1. I simply made a second animation that played in reverse. These animations were controlled to start in a Main Menu Controller script and the appropriate buttons would then play the contextual animation by calling the appropriate function in the Main Menu Controller.

Figure 3.1.

Figure 3.2.

Figure's 3.1. and 2. show how I added a fade in with the menu by controlling the Canvas Group Alpha, having set to 0 at the start of scene loading in and then playing a Coroutine in the Main Menu Controller to bring the Alpha back up to 1 over a period of time, whilst also activating a new animation as seen in Figure's 4.1 and 2.

Figure 4.1.

Figure 4.2

Figure 4.3.

The newly created animation mentioned previously was that of the camera looking out of the window in Figure 4.1. and then panning down toward the table and being pulled back to rest in the seat the camera is positioned above as seen in Figure 4.2.

Figure 5.1.

Figure 5.2.

Figure 5.3.

Figure's 5.1, 2 and 3. show that we re-shuffled the main menu UI placement a little after I rebuilt the project to tidy up the folders and code a little. I also had re make the animations after the rebuild.

The reason for this was because I didn't want the UI covering the game board, as it appeared at the time, as that was the focal point of the main menu.

Also following our feedback from the milestone presentation presented to our class, tutor's and Steve Goss and following on from creating the other level variants as explained in the Game Scene Development blog. I added new buttons so as to allow the player, for the Christmas/Project Alpha hand-in, to access these other level variants I produced.