Let’s discuss and make mockups of the UI in the game!
Conceptualize, and create mockups for the different UI screens in the game:
Do we need more?
No graphics for now, only wireframes, button labels, what animations they have, and their function.
For the Main Menu Screen I think it would be lovely to have a scripted animation on the background, showing our main character trying to decide what ingredient on a table to choose for his next recipe, so when the player selects one destination choice (Start Game, Credits or Options) there is a little zoom to the ingredient and the main character does something with it like cutting an onion in half.
The actual buttons would be hovering over the table, close to the ingredients to relate them to the ingredients…
Examples of what I refer as “scripted animation”"dunno what’s the term used for this.
Yookay Layle’s Main menu
Rainbow Six Siege
@RurouniKen
that would be a great Idea but if you add stuff like player walking towards/Into the buttons to select it.
Or…Or rotating the character sideways on mouse movement.x axis where the buttons will be all around him, on the ground/table or whatever the place
then you can detect which button the player is rotating/hovering the character’s head/eyes towards with the help of Ray-Casts, and with the raycast Info we can check the button which the character is facing to and select it
if you didn’t understand what I just said look at this image
Yeah that’s a nice explanation on how that should work on the technical side which I did not think about. Should we go ahead and do some quick wireframing or wait for more replies on ideas about this?
Share the wireframes in this thread, that’s how the other official threads are working. That way people can see the ideas and come to consensus.
I’m not an artist or UI designer, but maybe its something to start with.
I tried to somewhat combine the 2 layouts above, with the general layout of the second and details of the first.
The buttons have an item or character icon in front of them and can be animated.
I didn’t include anything to show the credits, maybe they can be placed inside the options menu, or even integrated in the main scene.
I think we should wait and see what others will come-up with, they can have some real good ideas.
Till then let’s share the wireframes in the thread like @shuttle127 said and see what happens
@piraente it’s a good idea to add the Last-Saved Time and Date to the Main-Menu, I don’t know why I didn’t thought about that
What about a diegetic user interface? Something that would blend in with the universe could be more immersive and bring more character to the game overall.
This is an interesting idea, would it take that much more effort than a non-diegetic UI?
The thing that comes to mind to me first for something like this is the cooking interface. When Hamlet reaches a place to cook, he pulls out a piece of paper that has his current inventory on it in one hand, as he’s meticulous about keeping notes of what he has “in stock.” Then, once the player selects an item, it appears in his other hand to be dropped onto the cooking mechanism. When it’s time to use a utensil, he can choose that from his inventory as well and it’ll pop up in the other hand, which then maybe for some gameplay we could do a button press to activate the animation?
EDIT: Here’s a link to an article about diegetic vs non-diegetic UI.
Since I’ve picked up BotW again for the first time in ages, I’ve had to remember how the in-game pause menu works. There’s definitely a lot going on, but it’s pretty straightforward once you fiddle around a bit.
Figured we might want to consider something like that, just need to lay out what different tabs/screens exist. For starters, I was thinking we can get away with just map, inventory, and save/load. Maybe add another for cooking that has known recipes and keeps track of how many ingredients are “in stock” (i.e. in inventory) for each recipe.
The challenge I see from a pause menu like this is we might have to add more keys than currently exist to the control scheme to switch between the tabs/screens (can always move between things in the same tab/screen using arrows). For a keyboard that’s no problem, we might even want to make it like an MMO where there are hotkeys for each part of the menu (i.e. M for map, I for inventory, L for save/load). For a gamepad, there’s still buttons left, and we can also map button combinations if we need to, as long as they are properly explained on-screen.
I have so many ideas for the wireframes of this, but unfortunately won’t have time until later in the weekend to share them, so please let me know what you think to help inform my thoughts.
EDIT: Here’s a link (wow, punny…) to one person’s suggestions for how to improve the BotW pause screen.
This is how I imagine the start screen and the main menu.
When the player presses any key there is a camera transition zooming in our character and the cooking table with 3 ingredients that represent our 3 buttons: New Game/Continue, Credits and Options.
When the selects one, the main character does something with the ingredient and a screen transition occurs that takes to the player to the selected destination (Settings Screen, Credits Screen or Game Screen).
I really like the idea of the pig chef preparing food with his mise en place as the animated background, but definitely think traditional UI button controls should be used. So kind of a mix between what @piraente and @RurouniKen mocked up.
EDIT: Just saw RurouniKen already mentioned animations for the menu choice transitions. I’m on board!
Oh sorry I think I didn’t explain myself that good but yeah the chef pig deciding what ingredient to choose for his next recipe (running animation on the background) would be lovely to make it to the final build. 
Ah, gotcha. I thought those were world-space buttons in your drawing (like click the carrot to go to credits), which may be hard to control using the schemes being talked about. You’re saying that each of the buttons corresponds to an animation involving that ingredient. Sounds like a cool idea!
Sorry, I didn’t quite understood that…
So the Dark-Gray_Circles are the Ingredients and when the User/Player clicks one of them, the Animation plays? or the Animation plays when the game starts?
The actual buttons are above the ingredients (text buttons) and the running animation shows the Chef thinking about what ingredient to choose from the table for his next recipe, so when the player clicks on a button, an animation is triggered making the pig to do something with the ingredient related to the button.
Oh, that’s how it is huh
that’s a great Idea, waiting for new ideas helped us after all
So when are we gonna start makin it? or should we wait more?
The way it’s worked in other threads is to do the work you want to do and make a PR for review for the community to judge. Due to the short time-table, it’s best to start development as soon as there’s a solid plan for it, which it sounds like we have here. Just my two cents.
When I get some time later today, I’ll be making some wireframes for the pause menu I described the other day to see what people think.
Ugh… meh. Maybe BotW’s menu isn’t perfect but the one described here isn’t great either (imo obv). If the objects are listed vertically it can take ages to reach a certain item stored far down in the inventory, while having them as a grid allows me to quickly see everything that I have with a few trigger presses. Let’s say I reached the end of the list to grab an item and now I want to go back? Another 30 seconds of scrolling to get to the first items again. Also, when you need to chose from a large variety of ingredients you might want to have them all displayed at once, letting your eyes bouce back and forth, without having to scroll up and down continuously if your items list is longer than the screen.
(This was the main thing I guess, so I’m not gonna bother explaining why I don’t like the others for now… )
The Witcher 3, although more complex than most games, solves the navigation problem in an interesting way. The right analog stick navigates through groups of items on the menus. It is a quick way to scan everything on the inventory.
![6416082--716895--Prototype For OP-U [Mail-Menu].png](https://europe1.discourse-cdn.com/unity/original/3X/4/3/4379f7aa19fe65015b85b738509b084e646ee4e8.png)
