Search Unity

  1. Click here to see what's on sale for the "Best of Super Sale" on the Asset Store
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Official UI wireframing

Discussion in 'Open Projects' started by cirocontinisio, Oct 13, 2020.

  1. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    445
    Let's discuss and make mockups of the UI in the game!

    Conceptualize, and create mockups for the different UI screens in the game:
    - Game title
    - Main menu
    - Settings (also within Pause menu)
    - Credits
    - In-game pause
    - Inventory (and cooking?)

    Do we need more?

    No graphics for now, only wireframes, button labels, what animations they have, and their function.

    Card on roadmap
     
    Neonage likes this.
  2. RurouniKen

    RurouniKen

    Joined:
    Apr 5, 2019
    Posts:
    15
    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

     
    davejrodriguez and Ilumav like this.
  3. Ilumav

    Ilumav

    Joined:
    Aug 5, 2020
    Posts:
    12
    @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 Prototype For OP-U [Mail-Menu].png
     
    Last edited: Oct 14, 2020
    RurouniKen likes this.
  4. RurouniKen

    RurouniKen

    Joined:
    Apr 5, 2019
    Posts:
    15
    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?
     
  5. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    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.
     
  6. piraente

    piraente

    Joined:
    Oct 19, 2019
    Posts:
    10
    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.

    mainMenu.png
     
  7. Ilumav

    Ilumav

    Joined:
    Aug 5, 2020
    Posts:
    12
    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
     
    Last edited: Oct 14, 2020
  8. pexSky

    pexSky

    Joined:
    Oct 4, 2020
    Posts:
    4
    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.
     
  9. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    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.
     
    Last edited: Oct 15, 2020
    kirbygc00 likes this.
  10. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    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.
     
    ChemaDmk likes this.
  11. RurouniKen

    RurouniKen

    Joined:
    Apr 5, 2019
    Posts:
    15
    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).
    START SCREEN.png START SCREEN – 1.png
     
    itsLevi0sa, Ilumav, Kekiot and 2 others like this.
  12. davejrodriguez

    davejrodriguez

    Joined:
    Feb 5, 2013
    Posts:
    62
    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!
     
    RurouniKen likes this.
  13. RurouniKen

    RurouniKen

    Joined:
    Apr 5, 2019
    Posts:
    15
    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. :)
     
    davejrodriguez likes this.
  14. davejrodriguez

    davejrodriguez

    Joined:
    Feb 5, 2013
    Posts:
    62
    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!
     
  15. Ilumav

    Ilumav

    Joined:
    Aug 5, 2020
    Posts:
    12

    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?
     
  16. RurouniKen

    RurouniKen

    Joined:
    Apr 5, 2019
    Posts:
    15
    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.
     
  17. Ilumav

    Ilumav

    Joined:
    Aug 5, 2020
    Posts:
    12
    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?
     
  18. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    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.
     
  19. NicknEmart

    NicknEmart

    Joined:
    Sep 9, 2019
    Posts:
    40
    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... :) )
     
  20. pexSky

    pexSky

    Joined:
    Oct 4, 2020
    Posts:
    4
    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.
     
  21. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    All good, I actually posted that just to spur some discussion because I was going to go down the BotW path anyway and just wanted to make a really bad pun. :p

    That should work for gamepad, but how would it work on keyboard with the current control scheme?

    =================

    Actually came up with these diegetic UI ideas (thanks @pexSky for the suggestion) in addition to the cooking one I posted earlier:

    Map:
    • When Hamlet first meets Bard Hare (I still like the name Gabbot since he's a talking rabbit, and wouldn't it be funny if people could summon him by shouting "Hey Gabboooottt!" :p), he gives Hamlet a magical map of the island that has a small fairy/pixie/sprite linked to it.
    • When Hamlet wants to view the map, switch from 3rd person to 1st person view and have the map in Hamlet's hands; this is possible because the map is in Hamlet's backpack.
    • The fairy/pixie/sprite floats in the top right corner and magically marks the map wherever Hamlet moves the reticle, kinda like BotW's pins as needed/desired, thus avoiding having to move Hamlet's hand around the map.
    • Technically we could fast travel from this map, but meh...
    Inventory:
    • Hamlet also receives a magical scroll from Bard Hare to keep track of his inventory, with a small fairy/pixie/sprite similar to the map.
    • Each item that is picked up is handwritten on the scroll with name, quantity, and small thumbnail/icon.
    • The player can press specific buttons to sort alphabetically and/or by item type.
    • For each sort there is a small animation triggered by the fairy/pixie/sprite, for simplicity the same effect just different colors.
    • If Hamlet wants to use something in the inventory, the fairy/pixie/sprite can talk to him and recite the item(s) and quantity.
    • I envision this being functionality to be more just to see what items are "in stock," not necessarily where the items are used; that'd be in a cooking-specific interface. Unless there's some other use for items?
    Save/Load:
    • At first I thought about tying this basic functionality to the map, but that would make it too busy and confusing.
    • This scroll works the same as the others (i.e. with miniature magical helper in first person view), but Hamlet finds it himself when he first arrives on the island.
    • I envision something like the BotW System screen, where the magical helper does a controls tutorial on first use.
    =================

    While these ideas would be a fun addition, there's probably not enough time to get them all done, which is why I'm working on non-diegetic wireframes that'll be pretty similar to what I've just described, just used as a full-screen overlay minus the magical helper.
     
    Last edited: Oct 17, 2020
  22. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    Figured I'd start with the inventory tab/screen overlay, as that's really the only "necessary" one right now. Notice it's basically BotW's with different words, and the buttons are for gamepad and subject to whatever works best, as I'm not an expert on gamepad gameplay. Check it out:
    UOP Inventory Wireframe.png
    • Utensils - knife, pot, tray, whisk, thermometer, etc
    • Ingredients - spices, fruits, veggies, meats, etc
    • Meals - cooked food
    • Special - cane, map, clothes, other key items?
    • The blocks under Utensils, Ingredients, Meals, and Special are icons for each category.
    • The blocks in the ITEM GRID are the popup menus when the player chooses an item in each category.
    • Tiki is the name of the Phoenix Chick (i.e. Hamlet & Tiki: Lost and Ground, one of my buddy duo title suggestions).
    • The "Recipe" popup looks exactly like the one in BotW.
    • The "Carry" UI only appears when player is in the Ingredients category, and, if we have time to develop it, the PIG CHEF MODEL will update like Link in BotW.
    • ITEM INFO OVERLAY populates with the name, icon, description, and brief flavor text for the active item.
    STILL TO DO:
    I'd like to have a "Recipes" tab/screen where there's a list of known recipes, their ingredients, and whether or not Hamlet has enough of each item to make each recipe. This would be really cool with my diegetic UI idea above, but probably a bit too much to ask. After I get some feedback on this wireframe, I'll start cranking out the proposed "Recipes" one as well. Up for ways to incorporate that into this if you think that's better too.
     
    ChemaDmk and Ruchir like this.
  23. pexSky

    pexSky

    Joined:
    Oct 4, 2020
    Posts:
    4
    Very nice ideas, @shuttle127! I am particularly very fond of having an "assistant", though I'm not sure if the fairy/pixie/sprite would be the most appropriate. Maybe Phoenix Chick could have this role on the UI, since it's the main character's partner in crime.

    As for the non-diegetic inventory suggestion, I think it is a bit overcomplicated. Opening the inventory has basically two functions: showing the collected items and cooking. I suggest splitting them into two zones, while other not so used elements could be divided into other tabs. I'll try making some wireframes to demonstrate this idea.

    Another option is to have (again) a diegetic approach, since cooking is a big part of the story. I was thinking on something similar to The Forest's crafting system, with the ingredients scattered around a pan or something like that.

    I also think we should separate the in-game pause menu from the inventory/cooking menu (The Witcher 3, Darksiders III and other games take this approach). On a gamepad, the inventory could be open pressing the "Start" button and the pause menu pressing the "Back" button. On keyboard and mouse, we could bind the "I" and "Escape" keys accordingly.
     
    Zold2012 and shuttle127 like this.
  24. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    I like this idea, saves on characters and could have it shoot different colored flames for each different type of marker on the map.

    I’ll have to draw up my wireframe ideas for the recipe and cooking UIs to see if they align with these ideas too.

    I’m down for this, what would be in the pause menu then?
     
  25. Harsh-099

    Harsh-099

    Joined:
    May 1, 2020
    Posts:
    34
    What suggestion and ideas about this

    First of The main screen, when the game launched

    Second of Main Menu
     

    Attached Files:

  26. NicknEmart

    NicknEmart

    Joined:
    Sep 9, 2019
    Posts:
    40
    Pokémon Platinum (don't remember if the other games do the same) represents saving through a daily journal that the player keeps, where he writes all the things that he does. When you open the game the next day, the first thing you see is the last page of your journal, so you can read all the main things you did during the last play session. We could have a simple (maybe hidden, like in the Pokémon game) quest/objective system so that each time you load the game you can see the ones you completed last time.
     
    shuttle127 likes this.
  27. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    Sounds like we're going more and more diegetic UI for this game with all these ideas. I envision this could be something like a scroll/notepad that Hamlet keeps in his backpack and pulls it out as the first thing he does every time the player starts the game again, just to remind himself where he was. We could also get silly with it and put little thought bubbles depicting what he sees/remembers from last time; or Phoenix Chick (I still like the name Tiki like the torch) could hop in the scene to chirp some cute things (or maybe it talks back and forth i.e. "So Tiki, what's next? ... We were trying to do X..."). Just spitballing again.
     
    NicknEmart likes this.
  28. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    22
    Hey everyone ! Thank you so much for your contribution so far ! All these propositions are just awesome!

    Although, I have a question about the reason behind the choice of diegetic UI that everyone seems to have taken.
    It’s a great idea and it keeps the player immersed, but why should we take this path? I mean, should we dive into a complex system or is it better if we stick with a simpler UI, with maybe some backgrounds that keep the immersion?
    This way we don’t need to interrupt an action in the scene to open/look at the map or the inventory.

    This approach can be very complex to develop and to maintain, especially if the only reason we are doing it is because of immersion. While other methods like using the backgrounds could be sufficient to mimic the idea we want to pass:
    Example : parchment, block note, recipe paper…

    For example in Life is strange, we know that we’re looking at a journal, even if we’re not looking at the physical world.


    Let’s discuss this a bit.


    In the meantime, we can continue creating the wireframes as diagrams that contain the UI elements for each screen, but without any information about interaction or animation.
    ->Let’s say we have 3 buttons in the first scene. It will be 3 buttons regardless of the interaction.

    @piraente I like the menu here, I think it’s only missing the “Credits” Button


    @shuttle127 I think this proposition is more detailed than what we need for the game :
    The Inventory will contain the ingredients (Utensils are considered ingredients as well), and maybe eventually items for the character’s customization.
    These items are purely cosmetic and will mainly be elements that can either be added to the character (bracelet, hat ... ) or texture changes (new apron color …)
    The Ingredients/ customization items can only be used, or previewed.

    I also think the recipe list should be separate from the ingredients inventory.

    Once the ingredients are selected and used to make a recipe they become a meal that's also present in the same inventory.
     
  29. Harsh-099

    Harsh-099

    Joined:
    May 1, 2020
    Posts:
    34
    What about this for inventory?

    If anyone is not able to understand my handwriting, please write here

    20201020_174312.jpg
     
    ChemaDmk, NicknEmart and shuttle127 like this.
  30. Ilumav

    Ilumav

    Joined:
    Aug 5, 2020
    Posts:
    12
    I like the idea of keeping the UI simple instead of complicated, but using Animated background would be a good idea

    something like this would be great
    imagine, 3D environment as background and adding Animation to the player/pig-char when the user clicks on a button like start/continue, options, credits etc...[/QUOTE]
     
  31. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    Was trying to think how to make inventory look like a little notebook, but this is simple enough to work. Few questions:
    • Are items in specific slots and only appear once Hamlet has found one? If so, does that mean there's no way to sort?
    • Is that "all the items" arrow that points to (2) a button to select all?
    • How do you toggle between tabs in (6)?
    • Is the button below (2) the Cook/Select to give to NPC button?
     
  32. RurouniKen

    RurouniKen

    Joined:
    Apr 5, 2019
    Posts:
    15
    Yeah I also think we should go for a Non Diegetic UI. Maybe we could just give it a "Diegetic" feel by using a 2D Illustration of our character holding the notebook, something like the example below. (Without the animations).
    ezgif-7-63d81f9a645f.gif
     
    ChemaDmk likes this.
  33. NicknEmart

    NicknEmart

    Joined:
    Sep 9, 2019
    Posts:
    40
    It says that it is the slot which you can use to assign an item to a button for a quick select
     
  34. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    22
    I see that the discussion about Diegetic UI is ongoing. I think that the simpler UI to start with, the better, something like this looks good
    In the meantime, I started working on the Miro board (small preview) Screenshot 2020-10-21 at 15.14.12.png


    I added the main menu screen proposed by @piraente with a credit button.
    Please note that the positions of the buttons is not the final one. Also the frame with "Main scene focus animation" is not a frame as much as it is an information that we will have a focus on the main scene.
    Screenshot 2020-10-21 at 15.20.40.png
    This is a variation of the Main Menu when a game has already been played.
    Screenshot 2020-10-21 at 15.17.43.png

    I also added the inventory screen with some notes (Inspired by the propositions of @Harsh-099 and @shuttle127 )
    Screenshot 2020-10-21 at 15.19.06.png
    Note 1: The action button changes depending on the selected item's type :
    -Equip (customisation item)
    -Create dish (Ingredients + Utensils )
    -Eat (Dish)

    Note 2 : When multiple items are selected, they need to be highlighted in the item grid (either different colour, size or border depending on the art). The item preview section either image or text will not display anything.

    Items :

    Screenshot 2020-10-21 at 15.53.25.png

    The item is characterised by:
    • A name
    • A preview image/3D asset
    • The number of items it contains
    • The background colour (each type would have a background colour)

    Item type:
    • Customisation item for the character
    • Ingredient
    • Utensil
    • Dish
     
    kirbygc00 and shuttle127 like this.
  35. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    Acknowledgment:
    @ChemaDmk Thanks for the feedback and simplification of scope.

    Further Inventory Discussion:
    It looks like @Harsh-099 's wireframe is more along the lines of basic functionalities, taking what I presented and removing the popup menus, the extra navigation to other tabs/screens, and the carry UI, all while reducing the total number of action buttons.

    I still think it'd be useful to have the categories (utensils, ingredients, meals, special (aka cosmetics)) as a way to organize ingredients, just not sure how the "Use" functionality would work if a recipe calls for both a spoon and some berries, for example. Can the player click "Use" multiple times? If so, how would they get out of the inventory menu itself, a Close/Back button?

    Other Inventory Idea:
    Along the lines of the Life Is Strange UI, what if the background was just a notepad, and each item was displayed using its name and a scribbled picture, as if Hamlet was writing/drawing it along the way? Then we could have a simple eraser animation when he uses a consumable item, and then upon getting a new item, a writing/drawing animation could be shown. This could help with immersion, as the player is actually seeing Hamlet updating his inventory manually, although something like this would not lend itself to having a button to sort inventory in any way.

    Recipe UI Idea:
    I like Chema's recipe paper suggestion. Combining that with the person that first suggested Hamlet's purpose was to create the greatest cookbook of all time (apologies for not being able to find the original to quote here), what if every time the player brought up the recipe UI, they see the front cover of the cookbook and would then have to flip through the pages to find the right recipe? While it might be a few too many button presses, I think it could add to the immersion, just have to make sure it's not overcomplicating the UI.

    Additional Random Thought:
    Will there be any indication to the player when Hamlet acquires a new item, like perhaps a simple popup saying "<item> obtained/acquired"?

    EDIT: Hah, I must've taken too long to post this, @ChemaDmk already beat me to it!
     
    kirbygc00 likes this.
  36. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    22
    I think so as well, I didn't add it to the current diagram because I wanted to have some feedbacks before editing it. But I think categorising the items might be needed.

    Yes you're right, I completely forgot the Close Button. I'll edit that.

    I think it's a very interesting idea, we should keep it in a side list for now (as the Art for UI hasn't been thought of yet)
    I'll open a google sheet for that.

    This is an interesting proposition as well

    Either a popup, or simply a message with an icon somewhere on the screen to inform the player of it.
     
  37. Harsh-099

    Harsh-099

    Joined:
    May 1, 2020
    Posts:
    34
    Yes, they only appear after Hamlet have collected them, if they are all finished it will show 0
    Sorting is done by different categories. The tabs beneath change the grid above with items or ingredients for that category.
    No, it is just an arrow overdrawn the image to help you understand that all the items belonging to the selected category tab will show in the grid. Items can be moved anywhere in the grid.
    Just be clicking them. It will highlight it and the grid will update.
    It is just a slot to map a keyboard button to use that item by pressing the key as @NicknEmart said
     
  38. shuttle127

    shuttle127

    Joined:
    Oct 1, 2020
    Posts:
    148
    Just thought about accessibility, and using an icon to denote category instead of a background color might be easier for more people to view and understand if the icon is big/clear enough to see and differentiate.

    A concern I have with separating items by category is how to select items from multiple categories at the same time?

    I see two possibilities:

    Option A: Tab for each item type

    1. Select an item in 1 category
    2. Item shows as selected in right side
    3. Switch to a different category's tab and choose another item
    4. Right side switches from image/asset to simple text list of selected items, or maybe thumbnail images instead
    Option B: Add category icon to top left of item icon
    1. Every item is in the same grid, just with an extra icon on it (category on top-left, quantity on top-right)
    2. There could be a sort-by-type button to help organize
    3. Multiple selection could still work like Step 4 of Option A
    As @itsLevi0sa suggested in the Official Dialogue and Narrative thread, keeping track of ideas, even if they don't make it into the game, would be cool to show how much thought went into the process. Would also be a good example of how many things tend to hit the cutting room floor to get any game out the door.
     
  39. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    22
    Actually for multiple selection it's simple : The ingredients and the utensils (these are the types that can be multiselected) are in the same tab.
    No player will need to select a dish and an ingredient...
     
    shuttle127 likes this.
  40. Harsh-099

    Harsh-099

    Joined:
    May 1, 2020
    Posts:
    34
    @shuttle127 , this is the wireframe of mine inventory, looks line my hand made drawing is not so much understandable

    Screenshot_20201022-081545_Excel.jpg
     
    shuttle127 likes this.
  41. piraente

    piraente

    Joined:
    Oct 19, 2019
    Posts:
    10
    I want to propose another option for the Inventory.
    Maybe the Customisation-Items could be an unlock system instead of actual items.
    Completely seperated from the cooking part without a generic inventory.

    inv_character.png

    The same with the utensils. Only the ingrediens will have an inventory system behind them.
    The only problem i see, it will basically void some of the work already done with the inventory system and item types, but could open a new system for unlocks.

    edit: I forgot the dishes as items. This could be beneath the ingredients and probably used as ingredients, too. (Maybe they could have the action button to eat them)

    (Icons: Font Awesome by @fontawesome - https://fontawesome.com)
    inv_cooking.png
     
    Last edited: Oct 23, 2020
  42. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    22
    Actually your drawing was very understandable ! In wireframing whatever method is used, as long as the information are there, it works.
    There's an information that we always need to keep in mind in our conception : We will be using a joypad to interact with the UI. (I see you did that in your proposition)

    This looks very good !
    Before taking any decision about that, I'll need to check the : Inventory System thread, and The Cooking/Crafting thread.

    Also, I think the character customisation will not be as complex as this. It will simply be picked up items that can be equipped.
    When I said : Texture change (like color apron) in a previous post, I meant the character will pickup a "new apron" from the world environment. But we will just change the texture of the character, when this item is equipped.
     
    itsLevi0sa likes this.
  43. Zold2012

    Zold2012

    Joined:
    Feb 4, 2014
    Posts:
    67
    so this is the google doc we've been using to organize the cooking thread.
    https://docs.google.com/document/d/1kGQXAkZul-dptwB6cXT71QrpBMDb8iQW3sdVfDaQ26g

    a few notes right off the bat, the cooking system as it is now is a simple combination system, similar to breath of the wild, and does not feature utensils. Of the proposed cooking systems that did involve utensils, they were mostly focused on allowing certain actions rather than being objects you would combine things with in a menu, so I question the inclusion of a dedicated "utensils" panel.

    I've seen some talk of a 'diegetic' ui. I think it would be pretty cute if the UI kinda looked like a cookbook, maybe even opened up like someone pulling a cookbook from off-screen. That said I had been anticipating a GUI similar to something from animal crossing, which displays the inventory contents without obscuring the game world too much. This would allow hamlet to visibly cook a recipe without having the GUI take attention away from the game world. This would be important as unless the cooking menu pauses gameplay, enemies could still sneak up on hamlet.
    upload_2020-10-24_18-9-11.png

    another kinda-sorta issue is some of these screens having 16+ open inventory slots.
    The main gameplay loop would involve getting a prescribed 'goal' or 'quest' recipe and then going through the environment collecting the ingredients for it while making dishes to help against sudden 'impromptu' challenges like enemies or obstacles. If you give the player too many inventory slots they could collect every ingredient they find and not have to think about what to pick up when (again, similar to animal crossing's pocket size limits) which could possibly lead to breaking the intended critical path through the game. I was thinking 6-8 items would be a good number? but really this would probably be something we'd need to adjust in response to testing

    Something that I do think needs to be included is a list of known recipes. If we included it on a different tab from the ingredients we would be rewarding memorization and it would keep the UI clean, but it might be frustrating not having the recipes visible on the same screen as your selectable ingredients. That said, I believe the current goal recipe should always be easily visible to serve as a reminder of what the player needs to be doing at the moment. Anyway, that's my $0.02 for cooking GUI
     
  44. NicknEmart

    NicknEmart

    Joined:
    Sep 9, 2019
    Posts:
    40
    This isn't a bad idea but it has to thought about carefully.
    Limiting inventory space can be very dangerous, I think, because it can very easily lead to backtracking. We don't want the players to go all the way back to the start because thay left behing that one item they thought was useless but it actually wasn't.
    The important thing here is that finite space should limit quantity, but not quality. This means that, if we decide to have fewer inventory slots, we should let more items have the same or similar effects, or put important items in more that one place so that players can easily access them when they need them.

    For example, in BoTW, no one asks you to have that one specific weapon with you, but every puzzle has many solutions. Need to break a mineral ore? Use any of your heavy weapons, or just about any weapon actually, some might just need more time. Need to cut a rope? Use an arrow, but also a boomerang, or throw your sword, or don't cut the rope at all and do something else. To burn those leaves you can use a torch, or a fire arrow, or start a campfire, or... you get the idea. Same for the dishes tab: it is limited (yes, it is limited) but you'll probabily always have in it something that fits the situation. And even if you don't, it's not a big deal.
     
    DSivtsov likes this.
  45. Zold2012

    Zold2012

    Joined:
    Feb 4, 2014
    Posts:
    67
    I mean that's exactly the behavior I was planning for. I'd want the player to explore the world and remember what ingredients are where instead of relying on a menu. Furthermore, having a larger inventory doesn't mean the player wouldn't do this anyway because they didn't know to collect everything in sight.

    The issue of "not having the ingredients you need where you need them" is actually something the cooking thread thought about. The solution is, decide which gameplay challenges an area will require, make sure that area has the ingredients needed. Different areas have different challenges, different areas have different ingredients.

    This is different however, from quest dishes, which are the reason you're exploring the world and going out to face the different challenges. These would be the dishes you backtrack for.

    Again, the inventory size limit will probably need to be tested with, I just wana make sure it looks good with only a few items present.
     
  46. piraente

    piraente

    Joined:
    Oct 19, 2019
    Posts:
    10
    @Zold2012 I don't think we should limit the inventory space, but i strongly agree with the suggestion to not show empty slots.
    Question: Is the cooking UI seperated from the inventory?
    Like using a workstation in the world to open a seperate UI.

    However someone in the inventory thread stated, the UI shouldn't tell how the system works. So this discussion should be finalized in the cooking thread and the UI changed accordingly.
    In addition to not showing empty slots, we could simply add a "1/8" counter above the grid to indicate the inventory limit, which could also be used when we decide to add items/unlocks to enlargen it. (this is quite common I think)

    Also in response to the shown miro board in the livestream. Maybe we shouldn't put the name of the item inside the grid, but inside the information panel of the currently selected item. Otherwise the names could break the grid, especially when having different languages.

    (I played some genshin impact the last couple of days, they also have a cooking system, maybe we can get some inspiration from it. The UI looks very clean)
    The recipes in their UI look exactly like the inventory items, only showing some additional information.
    This could be a good way to show discovered recipes. (separated tab)
    I will try to post some updated mockups tomorrow.
     
  47. piraente

    piraente

    Joined:
    Oct 19, 2019
    Posts:
    10
    NicknEmart and shuttle127 like this.
  48. DSivtsov

    DSivtsov

    Joined:
    Feb 20, 2019
    Posts:
    41
    May be good compromise between unlimited inventory space and "stupid" backtracking. Will be using the term - weight, not very realistic as in "hardcore RPG" (Arma3 and so on).
    But simple - one slot = one unit of weight. Inventory slots can be divided on two-three parts and used to make more realistic use of inventory space and also can give possibilities for addition interesting mechanics (damage of Hero => less space in inventory).
    Main (the big part) the minimal carrying capacity in the worst case. Second part can be filled in case only "normal speed" with "good health", and Third in case "only low speed" with "good health".
    It can save from harvesting all things what can be found and from "ridiculous returning for a small thing".
     
  49. kirbygc00

    kirbygc00

    Joined:
    Apr 4, 2016
    Posts:
    45
    Hey All,

    I've seen a lot of discussion and I think we've been closing in on an initial design. Just wanted to see if we were at the point where we could code something up to get this first draft into the game? @ChemaDmk @cirocontinisio
     
  50. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    445
    Design aside, the first step I'd like to cover with the menus is using both the gamepad and the mouse, as discussed in the Controls thread. So as a first step I'd like to see a very simple menu with maybe 4 buttons laid out as a square, where:
    - Gamepad moves the selection
    - Keyboard moves the selection

    - Confirm button activates the buttons
    - Mouse can click on buttons (and activates them)

    - When mouse moves, the selection disappears, only to appear when the mouse hovers on a button
    - If the selection has disappeared as a result of mouse movement, it will reappear (at a logical point) and allow the user to resume using keyboard/gamepad

    These are the unfortunate requirements of a menu that works with both mouse and gamepad :/

    Before we venture into this, thoughts?
     
    kirbygc00 likes this.
unityunity