MY MENU SYSTEM
For this unit, we are creating our own menu systems that will be able to be linked to games that we make at a later date.
MINDMAP AND FLOWCHART
MOODBOARDS
These are my moodboards to help me explore different styles and layouts I could use on my menus UI and HUD. My 2D game is a pixel game, and my 3D one is an obsticle course, so I've tried to get as big a range as possible to ensure I'm never stuck for ideas.
bLOCK-OUTS
These are two blockout ideas for my 2D game menu called Yuno. Within both of the images I explain why I've put certain buttons down and what will be on the pages they lead to. I have tried to lay them both out to look as appealing and easy to read as possible, by not over complicating things, but at the same time, not making them too basic.
I'm actually going to use both of them together. I'm going to use the first layout style for the main screens, where you are choosing what game you want to play, but once you click on "Yuno", it will take you to that games own menu, where the layout will be similar to the one below.
CONCEPTS
Below are my concepts for my pages of the "Yuno" menu.
DEMONSTRATION OF MENU
This here is a quick demonstration of my menu and how it's come along. As you can see, I've stuck quite closely to my concept, only making some minor changes so far, like the colour and font.
Breakdown of menu and feedback it gives
Page 1 - Start screen
When you start up the game, this screen appears first. The buttons fade in quite quickly and the "START" button pulsates as well which I think encourages the user to press it. Also, on the screen there are little pink spore-like objects floating around, I think makes the menu feel more "alive" and gives the user some nice visuals. The buttons on the menu give the user feedback, as they look different when they're untouched, hovered over, and then pressed. This I think makes the menu feel more interactive, as it makes the user really feel like they are making contact with the button, and pressing it. Page 2 - Game Select
Once you press "START", it takes you to the "GAME SELECT" menu. On this page you can choose which game you'd like to be taken to the menu of, because at the moment we've only created a menu for one of our games, only the "YUNO" button will take you to another menu. For my menu, I've also created my own cursor on photshop and imported it. I think it works well, because it makes the user feel like they're actually in a game and imersed before it's even started, and not just on any old program. The menu is just black and white at this point so it's as neutral as possible, because both games are very different styles, but they need a middle-ground on the first and second page so it isn't all mish-mash. Page 3 - YUNO Menu
Once you've clicked the "YUNO" button, you're then taken to the main menu screen of the game. The title YUNO pulses to draw in attention by giving the user more visual feedback, and making the menu seem more interesting. The colours of the buttons and background also change to suit the game, rather than being just neutral. On this page I originally wanted Yuno to be running on the spot, but I couldn't figure out how to put the animation actually within the menu, I managed to get it on the game by creating a flipbook, and even tried creating a gif on photoshop, but I still couldn't figure out a way to import either into the menu itself. Page 4 - YUNO Options
This is the page it takes you to when you can click "Options". On this page the title also pulses to exaggerate it, but as well as that, there are sliders you can interact with to alter the volume of different things within the game. In addition to that, I made graphics buttons, that when you click on them, it does actually change the resolution size of the screen. The language button don't work yet, but the buttons can be clicked, and therefore give feedback to the user. I'm really happy with the fact I got the buttons for the resolution to work, my next step is to try and get the volume sliders to work once I've input music into my game. Page 5 - YUNO Extras
This page is quite far from finished, but you can still navigate to it, and back out like all of the other pages. The idea is that, once I've created more concept work for the game Yuno, I will place them in the game as little "secrets" throughout, and if you find them, you will unlock them in this section and be able to flick through them all with the little buttons underneath. |
Quick overview of ui
Overall, I think my menu is to quite a good standard, and only needs minor tweeks to get it to where I want it to be. Aspects like style, on the Options and Extras pages need sorting out a bit, as I think they look quite dull and empty. I could sort this out easily by either changing the background colour, or adding more little animations on the left hand side of the page, not ones that are too distracting though, as it would take away the main focus of the pages, which situate on the right.
HUD IDEA
The first image is my block-out idea for my HUD for YUNO. I went for a simple layout, as the game is going to be pretty simple itself.
When I designed what the HUD was going to look like, I wanted to make sure it suited the colours and style of my game, so instead of just drawing the HUD alone, I drew a part of a level behind it too, to see what it'd look like all together.
When I designed what the HUD was going to look like, I wanted to make sure it suited the colours and style of my game, so instead of just drawing the HUD alone, I drew a part of a level behind it too, to see what it'd look like all together.