- Kara Laumann
2D Game Menus
For my team project, I am in charge of the UI. This meant it was my job to create, animate, and implement all of the UI in both the Menus and HUD. The game is set to be in a storybook with the main gameplay revolving around the player's umbrella and protecting your flame from the rain. With this in mind, I started to brainstorm ideas for the two menus.
With the storybook theme, I felt it was necessary to have the main menu include a book opening and flipping through pages. By having it as a storybook it sets the location and world while also providing a cute aesthetic. The one thing I wasn't certain about was the hover feedback. I wanted it to keep with the theme while still highlighting the selected option. My first thought was to have a circle around the option like it was drawn with a pencil. The issue with that was it didn't scale properly. It also was quite thin and hard to read. My next idea was to do a line underneath the word, still written with a pencil but a bit thicker. This can scale easily, but it does have the current issue of potentially being too thin. There is the additional feedback right now of the text increasing in size as well. Together the player easily knows what their selection is. When the player switches between screens in the main menu there is a flip animation that plays. The page flip animation makes the storybook feel more realistic. A polish goal is to have the canvas on each page so you could watch it move with the page flip. The options menu uses the raindrops as the volume indicators. Each one plays a small animation when it shows up, and disappears, this adds more movement to the menu. The raindrops also vary in color, slowly getting darker with each one. This is to be an extra signifier showing how high the volume is. The last big thing on the menu is starting the game. There is a looping animation of the pages flipping that activates a fade panel to start the game. It is different than the other animations to make it clear to the player that they are starting the game. A polish goal for this is to have it zoom into the book to show that the game takes place within the book.
The pause menu I chose to not do as a book. I had thought about panning to the side and having the storybook be there with the pause menu on it, but I decided against that. I felt that it would be too repetitive, and it would break the immersion slightly. Instead, I chose to use the umbrella as the pause menu. The umbrella floats into the scene, with a panel darkening the background slightly. The hover feedback is then tiny raindrops that lightly animate indicating the selected option. With the umbrella being black I couldn't use black text. This led me to choose the page color for the non-highlighted text and have the highlighted option be white. I wanted the chosen option to pop out more against everything else while also being easy to read. The text also increases in size, like the main menu, to emphasize the chosen option more. When the pause menu leaves it has a different animation, almost blowing the umbrella away. I had initially just played the first animation backward, but I felt that there wasn't enough character to it. It also doesn't make sense for the animation to go back the way it came when it looked like the wind was blowing it to the left.
