Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Official UI graphics / Item icons

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

  1. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Let's use this thread to discuss graphics related to the UI. Panels, buttons, controls, etc.

    Also, the inventory system is a grid of elements with a selection moving between them to select and use each one. What should the icons look like? Should they be... iconic? Or should they be small illustrations. What size on screen? (i.e. how many can we fit in a menu)

    This is the place to explore these.

    UI Graphics task on the roadmap
    Item icons task on the roadmap
     
    Last edited: Feb 3, 2021
  2. matrunk

    matrunk

    Joined:
    Oct 13, 2020
    Posts:
    6
    I think we can make toon icon 256x256px is the best size for icon, in the inventory we can create some filter on the corner like ingredient, food, equipement, the icon maybe gets a little illustration and a different background for the rarity (idk if they get a rarity) and for the type.
     
  3. Harshith74

    Harshith74

    Joined:
    Aug 5, 2020
    Posts:
    14
    @Unity, if i wanted to try making some UI Icons for inventory can i start it now?
     
  4. Mauri

    Mauri

    Joined:
    Dec 9, 2010
    Posts:
    2,663
    rcabreraortiz likes this.
  5. matrunk

    matrunk

    Joined:
    Oct 13, 2020
    Posts:
    6
  6. Harshith74

    Harshith74

    Joined:
    Aug 5, 2020
    Posts:
    14
    I tried to make an Inventory icon with the game style/colors and it turned out like this:

    should I change it or Improve it? TEST.png

    I tried to Implement a pan but I wasn't able to draw it good:
    TEST2.png
     
  7. Harshith74

    Harshith74

    Joined:
    Aug 5, 2020
    Posts:
    14
    Or maybe this is better? Here.png
     
  8. matrunk

    matrunk

    Joined:
    Oct 13, 2020
    Posts:
    6
    I think we can reuse the color of the game for the background and make icon in the same style as the character, look at what I did I reuse the yellow icon for the background and I thinks it's good looking
     
  9. rcabreraortiz

    rcabreraortiz

    Joined:
    May 10, 2019
    Posts:
    6
    Agreed. The concept art is a nice blend of comic/cartoon-looks with a hint of realism. Making the icons big would be a nice plus. There's something really fun about opening an inventory bag and seeing a collection of big unique icons that mimic real life (similar to Vector Stock image below). I hope that these ingredients become a big highlight of the game, i.e. when Hamlet prepares the recipe, it has its own scene where you can see your ingredients being cooked in a pot.

     
    Last edited: Oct 15, 2020
    cirocontinisio and itsLevi0sa like this.
  10. laczkyl

    laczkyl

    Joined:
    Aug 23, 2018
    Posts:
    32
    I like the style of the concept art, the relaxed line-art gives a feeling a storybook/fable. Plus it would be easy to mimic I think

    .
     

    Attached Files:

    • Leaf.png
      Leaf.png
      File size:
      167.8 KB
      Views:
      464
    Last edited: Oct 15, 2020
    cirocontinisio likes this.
  11. matrunk

    matrunk

    Joined:
    Oct 13, 2020
    Posts:
    6
    Good idea i like the icon style and i think we can work with your proposition idk what other think
     
  12. Harshith74

    Harshith74

    Joined:
    Aug 5, 2020
    Posts:
    14
    I like the art style mainly the leaf man, it looks perfect to me
    I tried the same before, I think it's not that good
     

    Attached Files:

    • TEST.png
      TEST.png
      File size:
      10.1 KB
      Views:
      405
  13. laczkyl

    laczkyl

    Joined:
    Aug 23, 2018
    Posts:
    32
    I just realized there is more to this than just choosing the style, it will depend on what is decided for the UI and the importance of the inventory. But yeah, even if everything is 3D I would like the icons still be stylized drawings of 3D objects and not just small thumbnails.
     
  14. MUGIK

    MUGIK

    Joined:
    Jul 2, 2015
    Posts:
    476
    From development side, I want to suggest using a bigger icon size.
    1024x1024 is good enough.
    We could easily decrease size right in the Unity editor, while we cannot easily upscale low-res images.
     
  15. Harshith74

    Harshith74

    Joined:
    Aug 5, 2020
    Posts:
    14

    I did mine in 1080/1080 pixels and converted it into 265/265
    is that okay?
     
    Last edited: Oct 17, 2020
    MUGIK likes this.
  16. MUGIK

    MUGIK

    Joined:
    Jul 2, 2015
    Posts:
    476
    It's better to stick with numbers that are a power of 2: 128, 256, 512, 1024, 2048.
    The reasons for this are better compression and graphic cards work better with them.
     
    Fhenix and cirocontinisio like this.
  17. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    27
    I started playing around with inventory icon ideas and realized I needed a context to put them, so I mocked up an inventory. Is just a start but could spark some new ideas.
    Inventory_01.png
     
    Last edited: Nov 8, 2020
    Branko87, MortyJHin, Neonage and 4 others like this.
  18. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    itsLevi0sa likes this.
  19. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    How about we have a common background (possibly in different colors) for all the inventory icons? Then we can make some kind of virtual photo studio for the items we already have in 3D: We put the (toon shaded) 3D object in front of the background, turn it to a nice angle and light it nicely. That we set the game view to the right resolution and take a screenshot.
     
  20. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    27
    Played around with some initial ideas for the graphic style.

    ChopChop_UI_Concepts_01.png
     
  21. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    There are some nice ideas! Maybe the colour scheme could be good too, it's a bit "muted" but that might be good because it will contrast with the colours we have in the 3D.

    One thing I don't personally like too much: the horizontal curved line on the buttons makes them look like they are plastic or metal, which clashes a bit with the irregular edges, I feel.
     
  22. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    27
    Gave the button a wooden feel and tested the popup on top of the current in-game color palette.

    ChopChop_UI_Concepts_02.png
     
    Branko87, MortyJHin and itsLevi0sa like this.
  23. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    65
    This looks so beautiful @auxterlibre , can you provide the PSD or the different elements so that we start the integration and find out how it looks like?
     
  24. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    27
    @ChemaDmk Is there a preferred way to hand over the assets? Should I just upload to Drive and post a link here?
     
  25. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    65
    I think that should work ! If you want to integrate it in the game you might create a PR with the new assets .
     
  26. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    27
  27. AlanPereiraArt

    AlanPereiraArt

    Joined:
    Apr 29, 2014
    Posts:
    17
    Nice concepts @auxterlibre !

    On my point of view it seems it still needs some adjustments to be better presented as an UI.

    Here are a few suggestions, feel free to try them:

    1 - Making the UI a little more saturated to have more contrast. With a better separation between gameplay context and UI context.
    2 - Adding an Outline on the UI elements, to maintain the cartoonish style of the game.

    Both of those can be seem on the following example:

    upload_2021-2-12_1-18-17.png

    3 - Adding volume on the buttons, they are kind flat. This is in order to make the player feel that it is a button and must be pressed:

    upload_2021-2-12_1-20-2.png


    A good trick to check if the contrast is good is to make it Black and White. In the case below it seems all good, but the suggestions above might help making it even better :)



    Also, if you need some help on the question of opening the PR on Github to submit your concepts on the project. Take a look at this post on how to contribute:
    https://forum.unity.com/threads/getting-started-how-to-contribute.1010695/
     
    Last edited: Feb 12, 2021
    TatoD, Amel-Unity and cirocontinisio like this.
  28. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    71
    Created some arts for the fruits icons.
    Green and yellow background like in official concept arts.

    001_FruitIcons.png
    Some sample fruits:
    1 - Apple
    2 - Grapes
    3 - banana
    4 - Orange
    5 - Watermelon
    6 - Strawberry
     
  29. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    71
    @ChemaDmk should i create new folder here or directly add everything here. open-project-1/UOP1_Project/Assets/Art/UI at main · UnityTechnologies/open-project-1 · GitHub inside the UI folder ?

    I am thinking of creating separate folder like
    UI => inventory => icons => fruits => 64x64 => *.png
    UI => inventory => icons => fruits => 128x128 => *.png
    UI => inventory => icons => fruits => 256x256 => *.png

    UI => inventory => icons => utensils => 64x64 => *.png
    UI => inventory => icons => utensils => 128x128 => *.png
    UI => inventory => icons => utensils => 256x256 => *.png
     
  30. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    27
    Played around with the inventory layout a bit. I tried to learn about the functionality through the forums but I am not sure it covers all the needs. But maybe it could work.

    I imagine that customization items can be previewed on the character model and other items 3D models could float in front of them (or we show them holding and interacting with items if the scope allows)

    Inventory_Character.png Inventory_Items.png Inventory_Cooking.png
     
    Last edited: Feb 13, 2021
  31. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    71
    512x512 icons for banana. If its okay then i can add more. Let me know. 002_Banana.png
     
  32. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    27
    Added a subtle texture and gradient to the frame and button. Also decided to get rid of the tooltip (I know how much of a nightmare that is to implement).


    Inventory_Character.png Inventory_Items.png Inventory_Cooking.png
     
    Branko87 and AlanPereiraArt like this.
  33. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    Seing these UI-prososals I noticed I like some colors more than others. Yet since engineers aren't exactly known for their taste or fashion sense I tried to analyze things in a less subjective way. So I wrote a script that visualizes the colors using their HSV values. Here we see 3 pictures from the concept art: ConceptCharacters.PNG TownEnvironment.PNG BeachEnvironment.PNG
    • The height of the white bars shows how often the colors in the hue - range of the bar appear in the image.
    • The height of the yellow dots shows the average saturation in which the hue is used in the image. For example we notice in the town environment that the green hues are consistently used in quite low saturation, whereas we find them much more saturated in the beach environment.
    • The height of the cyan dot represents the average value - how light or dark a specific color is used in average
    Do I find a pattern emerging? Not that much, albeit it seems interesting to me that the saturation per color is quite consistent within one picture but different from the next. This isn't really helpful for the UI if we don't want change the color palette of the UI per scene. Neither do I know whether we want to change the color palette between scenes all that much, given that we have to make it all out of the same art assets (we don't want to overdo post-processing either I guess).
     
    Last edited: Feb 14, 2021
    arunchahar likes this.
  34. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    71
    @Smurjo for arts I have been using palletes from both the environment arts. So should i change to some other pallete or keep using them. As you said we do need a consistent pallete for all the arts. But i dont know which to pick. :eek:o_O
     
  35. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    Exactly my problem. Which color palette/color harmony do we want to go for? I will analyze more stuff and also see whether I possibly can experiment a bit e.g. with the sky color or the shadow color.
     
  36. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    I also gave the UI a shot. I went for a clean approach, which is going to be complemented by the richness of the backgrounds and of the icons/3D renders of the items in the menu.

    Here's 2 tests with two different backgrounds:

    Pause1.jpg

    Pause2.jpg

    ?
     
  37. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    27
    Even though I think it looks good I find the mood disconnected from the rest of the game. Maybe is that the blue and the pure white are giving a tech vibe to it. I would try out different palettes.
     
  38. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    • The translation of "Einstellungen" is "settings", but I don't know whether we need to separate that from "options"
    • You might want to put the "select" and "close" labels inside the box - that way they are always readable independent of the background
    I have put all the UI proposals through my color analyzer machine: UIConcepts2.PNG UIConcepts1.PNG pause1.PNG Pause2.PNG
    Observations and comments:
    • all use orange/brown
    • @cirocontinisio and @AlanPereiraArt pair it with a complementary blue, which would be a classical color harmony already used by Vincent van Gogh e.g. here https://en.wikipedia.org/wiki/Caf%C3%A9_Terrace_at_Night . This color harmony is also very popular in the film industry, so we possibly can't do anything wrong going for it. @cirocontinisio could possibly push the almost white texts more towards tan ( i.e. very light desaturated orange) like @auxterlibre uses e.g. for the background of the inventory screen.
    • @auxterlibre currently pairs the orange with green hues which - albeit I don't find too bad as well - neither is a clearly complementary harmony nor a clearly analogous harmony. But it might not be a big deal to move those green elements towards blue, or is it (maybe picking from @cirocontinisio 's proposal)?
    • While @auxterlibre and @AlanPereiraArt stay on the light side @cirocontinisio has yielded to the temptations of the dark side. This indeed sets it apart from the view in game. But maybe this is exactly what we want for some menus - especially e.g. when we are exiting the game. Maybe we could have the start and exit menus dark while we keep the inventory screen and cooking screens used in-game light. We would of course want a common color palette so the both sides don't appear too disconnected. Could we find an orange/brown for the buttons that goes well with both the indigo and the light tan background?
     
    Last edited: Feb 14, 2021
  39. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    It's a test, it's just to use a very long word for the purpose of accommodating different languages - a word which happens to be in every game.

    Fair enough, I guess I used the "professional and safe dark blue"

    Made new tests with a pretty different colour scheme, and some variation of button colours:

    Pause3.jpg

    Pause4.jpg

    Pause5.jpg

    I made them a bit more readable. I like the position there! (but we can also move them later)
     
  40. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    @cirocontinisio I hope you don't mind I put them into the machine as well:
    pause3.PNG pause4.PNG pause5.PNG
    • I would call the blue bold with it's high saturation but it is still perfectly matching the classical complementary blue-orange color harmony. I guess we just want to make sure to have the sky color aligned with it.
    • The orange is possibly kind of a safe option. I guess it could be a bit more yellow - that way it would be more exactly complementary to the sky as well as match better with the fire and the townsfolk.
    • I don't think the green fits very well - it's neither close to the other greens nor complementary to anything
     
    Last edited: Feb 14, 2021
  41. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    It's a very scientific analysis! But does it make sense to build a UI on the basis of the sky or the sand or whatever element, when it will be seen against all of them in different moments?
     
    Smurjo likes this.
  42. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    In the meantime I made a couple of tests for a potential dialogue panel:

    Dialogue1.jpg
    Dialogue2.jpg

    Dialogue3.jpg
     
  43. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    I think the sky as well as the ground textures, the ocean and the shadow color are special as they could take up a large area frequently. We will have to figure out how to make them all fit into some overall color harmony as well as with the UI.
     
  44. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    If they all were in the same hues, maybe. But the sky and sea are bright blue, the grass is green, cobblestone a dull grey, sand is yellow, and we're probably going to add many more colours in the food festival.
    That's why instead I wouldn't add too many bright and saturated colours to it (that's why my initial dark-muted proposal).

    All of this said, we could also have a black semitransparent background behind the UI or blur the 3D world which would make things stand out more, but I really don't like it as a solution!
     
  45. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    But blue and orange obviously aren't the same hue and still go well. I am thinking more about something like this: DoubleComplementaryHarmony.PNG
    Of course we can't control the percentages and it doesn't say that we can't have other colors. But as you see with the town concept art, you can make colors outside of the harmony less saturated and/or very light so that they are not perceived that much.
    BTW Grey is no problem at all - it's what all colors become when the saturation is very low
     
    Last edited: Feb 14, 2021
  46. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    I get it, but I don't think we should plan the UI colour to go well with the background, or viceversa.
    To make it more visible, yes, for sure! But not to harmonise it with the 3D elements in the world - it's a fight we can't win.
    I expect the festival to be very colourful, definitely not unsaturated.
     
  47. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    Luckily we can select the colors on big areas freely - of course we will make the sunshades and parasols and stage cover to go with our color harmony. The food items wouldn't typically take huge areas - so their color is no problem (as long as they are not extremly pink or something, but since they are natural things they wouldn't be).
     
  48. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    71
  49. AlanPereiraArt

    AlanPereiraArt

    Joined:
    Apr 29, 2014
    Posts:
    17
    Those last @auxterlibre concepts are doing very well.

    As I said above, if possible, try adding some outlines on the windows and buttons or at least on the button. To give some more contrast from the gameplay.

    On @Smurjo comparison, it seems it is possible to increase the UI saturation a little on those orange buttons.
    __________________

    Just to give some base to my suggestions, I am comparing the @auxterlibre UI with Ni no Kuni (1)'s UI.





    Since it shares some similarities to Chop Chop as being an outline cel-shading game based on Studio Ghibli with vivid and charismatic creatures, It seems to be a good way to go.

    I mean, it is easier for us to define how the UI will look by first defining what is our goal. It doesn't really rely only on Ni no Kuni, it can be a mix between one or two similar games (like Ni no Kuni UI but with squared rectangle instead of rounded ones, simple example).

    But for sure it will be harder for us to define the UI without defining a goal, since it has infinite approaches to how it could look.
     
    TatoD, Smurjo and cirocontinisio like this.
  50. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Interested in this. What do you think should be the goal? Or if you could provide an example of a goal.

    Or do you mean we need to define all the things our UI should illustrate? Like list all screens, functions?
     
    TatoD likes this.