Search Unity

  1. Looking for a job or to hire someone for a project? Check out the re-opened job forums.
    Dismiss Notice
  2. Unity 2020 LTS & Unity 2021.1 have been released.
    Dismiss Notice
  3. 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 graphics / Item icons

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

  1. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    742
    Ah one reminder, since I see mobile/pointer UIs pop up all the time: please think the UI as joypad/keyboard first, not mouse/touch.
     
    AlanPereiraArt likes this.
  2. AlanPereiraArt

    AlanPereiraArt

    Joined:
    Apr 29, 2014
    Posts:
    10
    Sorry for not being clear, with the goal I meant to say about the Art Direction of it, if we could reach a consensus on how it should look like.
    My example was the Ni no Kuni one. But it can be another game's UI to serve as a guideline for the community produce the UI elements.

    Defining the UI artstyle, that we are trying to reach, would avoid some people creating assets that may not fit on the game.
     
  3. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    266
    Apparently others can...
    Example UI Analogous Harmony.PNG Example UI complementary Harmony.PNG
    In the first picture we clearly find the classical blue-and-orange and in the second picture all around orange with the greens, blues, reds and purples desaturated - with the - definitely deliberate - exceptions of the character, the food and health etc. bars. These exceptions are clearly designed to stand out, but taking up such little areas that doesn't matter much in the overall picture (actually the health etc. bars appear somewhat too prominent to me - but maybe they are really important for the player).
     
    Last edited: Feb 15, 2021
  4. aby_gamemaker

    aby_gamemaker

    Joined:
    Nov 5, 2020
    Posts:
    37
    We could have a blur overlay on the game behind the pause screen.Then we will not have to worry about colours going with every scene. Just like a how a camera can focus on foreground and background as per need.
    In this case our foreground will be the pause screen.

    The only other way is to design a full screen pause menu following the game's ui scheme.
    If pressing the settings and options buttons will have enough tweakable ui elements to fill up a whole screen then we could go that way.
     
  5. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    266
    ... and we don't need that.
    Based on the beach concept art picture, I have tried out a double complementary color harmony with the hues 25 - 205 and 90 - 270 (just a proposal, we can of course go for other combinations). I have only adjusted the sky and the ground textures, the ocean and the real time shadow color (who would have thought hue 270 - purple works as shadow color?). Here you see the effect in the whiteboxing environments (or is it color-boxing now?). You see the current materials/color settings on the left side and the materials/color settings adjusted to the color harmony on the right.
    ColorHarmonyEffect1.PNG ColorHarmonyEffect2.PNG ColorHarmonyEffect3.PNG ColorHarmonyEffect4.PNG
    It is just subtle differences but the colors of our game world would be more consistent and the UI could match well this way, no matter where the player is.
     
  6. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    742
    @Smurjo: Thanks for the tests, I really don't think we need to tweak the colours of the world to make it go with the UI, which is not something present on screen at all times. It's interesting in theory but it would work with a fixed point of view game, 2D, but it really doesn't work in our case.

    Ah yes, but that's what we're doing? Obviously as this is a distributed team, people tend to go all in (we've seen it on the code side too) so rather than do multiple proposals, we generally see one very refined one.

    Personally I wanted to go for a more flat, simple art style, with no gradients or textures but only flat colours (even in the shadows, as you can see from my tests). But seems like I am outnumbered, we had a chat with the team this morning and even @ChemaDmk and @Amel-Unity prefer @auxterlibre's mockups with their rounded corners, the colour scheme (green + beige + orange) and the textured backgrounds. I can get behind that.

    I just think we need to make them more lively with some bright colours, but when I say this I just mean the second ones set in front of the beach, where now we have beige on yellow. But I liked the first ones which sported the orange buttons.
    And again, always think keyboard/joypad first. So the big thumb labels are ok-ish but they really feel like they are so big because of a touch interface. But these are more tweaks than anything.
    @auxterlibre how would you like to proceed? Would you like to make more tests, expanding on the design, or (maybe you don't have time) we can do it for you starting from the tests you made?
    I'm thinking of mocking up other screens.
     
    AlanPereiraArt likes this.
  7. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    266
    Of course not - we would choose the colors of the UI to go with the game world - not the other way round.

    The problem is you can't do that if the colors of the game world aren't consistent. This is a problem in itself, whether the UI is visible or not. Or maybe it is one of the things that distinguishes tripleA from indie - we could of course deliberately choose to have our colors off to make it look indie...
     
  8. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    23
    Hey, I am glad people liked my mockups. I can work on this at night (have to design UI during the day ><)
    I would love to mockup other screens and tweak the style and elements to accommodate all our needs.

    Do we have the wireframes for everything else? I could search the forums for more info, but let me know if there is any specific screen you would like to see.
     
  9. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    23
    A lot of the color will come from the icons. Currently is looking a bit dull because is empty.
     
  10. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    266
    CookingFestivalColors.PNG
    This is how the cooking festival might look like using the the proposed color scheme.
     
  11. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    23
    I played around with the title and settings screen. I made the orange a bit more saturated. I don't know what are the plans for the 3D scene on the title screen, so I just grabbed a screenshot from the game for now.


    TitleScreen_01.png
    Settings_Audio.png
    Settings_Language.png
    Settings_Input.png
    Settings_Graphics.png
     
    Branko87, bartuq, Amel-Unity and 8 others like this.
  12. NicknEmart

    NicknEmart

    Joined:
    Sep 9, 2019
    Posts:
    45
    I really like this
    For the menus, while I think the best of these:
    is the second one, which I find kind of weird since one is a light color and the other is very dark. But maybe is because in the first case we are looking at images, things that exist (or may exist) in the real world, so our brain tries to put them in a real-life setting, where there's light everywhere, so a light background might facilitate that process. But when we read text, we just want to focus on the individual letters and their meaning, and a dark color seems like an ideal environment to avoid distractions. I don't know, maybe there's a reason why most people use instagram with the light theme but programmers get sad if their IDE doesn't have a dark theme?
     
  13. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    742
    Looks really good, it's good to make some "real" mockups so we can imagine if the graphics cover all the use cases we have in mind.

    What do you imagine for the dialogues? That's obviously another one we need to have, similar in layout to the mockups I made. (though feel free to innovate as long as it stays functional)

    Another question: how can we access these graphics? Would you provide .psd files, or should we recreate them? (it's doable). We need the graphics as decomposed as possible, so we can animate and create variations as needed.
    Another idea I had was to animate the background texture inside panels and masks (I'm referring to the parchment texture, not the characters portraits, who wouldn't move).

    I also like the idea of a dark box for dialogue text, to isolate it from the game's action which is usually quite bright. Maybe not necessarily all the way to black (although mid-greys often look very dull), which can also help to keep it disconnected from the black shadows.
     
    Last edited: Feb 24, 2021
    TatoD likes this.
  14. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    Icons Borders and icons with original concept arts pallete. @cirocontinisio

    003_TestIcons.png
    These icons have 3d models present:
    4. Orange
    5. Lemon
    6. Almond
     
    itsLevi0sa and cirocontinisio like this.
  15. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
  16. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    23
    @cirocontinisio Sorry for the late reply. I will add the PSDs here so anyone can grab them. I will have a go with the dialogues and will share them here when I have something.
     
    cirocontinisio and ChemaDmk like this.
  17. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    23
    A simple dialogue box.
    Dialogue_01.png
     
    cirocontinisio likes this.
  18. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    49
    Thank you @auxterlibre I'm currently integrating your UI in the game !
    Stay posted for some beautiful footage !
     
    Smurjo and auxterlibre like this.
  19. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
  20. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    742
  21. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    742
    Oh and for the icons, yesterday I was playing around with making icons out of 3D the models we have. This is the result:

    Evp6jfvXMAMBNI6.png

    As you can see, they come out pretty nice and almost as good as the icons that @auxterlibre drew, with the exception that they're almost free to make. It takes me 1 minute to make simple stuff like the fork or knife, 4-5 minutes to composite things like the lobster soup or the lemon.

    Obviously not all models hold the best (the plate is a bit square) but we can tweak or redesign those later on.
     
  22. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    Ok. Cool. I just made it to test out how icons would look like in inventory. :cool:
     
    cirocontinisio likes this.
  23. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    Looks great. Have you completed all the icons. If not i would like to try as well.
     
  24. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    Hey @cirocontinisio i have added another test.

    I used the same color scheme for inventory just for testing out icons. Inventory is a placeholder.
    006_InventoryTestRefinedxcf.png
    1 - orange
    free hand drawn
    extra thick border
    the icons size is less than the slot area
    also thought like the icon should remain the same and when selected the color changes to green

    2 - lemon
    thick border
    unselected icon.


    3 - orange
    4 - apple [added as livestream often shows placeholder as apple icon]
    5 - cucumber
    6 - almond
    These are a bit refined, not jittery.
    Just like your test occupy the whole slot area.

    I think 3 to 6 came out bit nice. Maybe border are thin !?!? o_Oo_O
    What do think about these ? (Icons 3 to 6)
    If you think they are fine then i will create icons for the rest.

    [SUGGESTION]
    For a selected item like in UI wireframe should we change the background color of icons and otherwise keep it colorless.
     
  25. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    Is the size 512x512 okay with you @cirocontinisio so that you can resize according to your requirements.

    Orange
    007_Icons.png
     
  26. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    23
    Gamepad icons. Source file in the usual spot

    GamepadIconPreview.png
     
  27. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    742
    Looks super cool! Would be nice to have also keyboard controls, maybe we can have a generic key button on which we superimpose the text of the key.

    Thanks @arunchahar, but as you saw from my post we are going with the 3D objects rendered as icons, we're not painting them one by one.
     
  28. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
  29. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    My tests

    Spoon
    008_spoon.png

    Fork
    009_fork.png

    Almond
    010_almond.png

    Inventory
    011_InventoryTest.png
     
  30. auxterlibre

    auxterlibre

    Joined:
    Apr 10, 2018
    Posts:
    23
    Added keyboard and mouse icons. Following @cirocontinisio's suggestion, I kept the keyboard icon "9-sliceable" so we can resize it based on the text.

    InputIconsPreview.png
     
  31. IsaiahKelly

    IsaiahKelly

    Joined:
    Nov 11, 2012
    Posts:
    367
    I think mimicking the input icons shown in some Nintendo Switch games would be a good idea. That is to say, icons that show the face button location / orientation, rather than the symbol itself. This was of course done purely out of necessity for the Switch, since the joy-cons can be rotated. But a beneficial side effect of making input icons locational is that they also become platform agnostic.

    For example, a north face button input icon can apply to both the Xbox "Y" button, the PlayStation triangle button, and the Nintendo "X" button, all at the same time. Location / orientation is also easier to remember and can be found without having to look at the actual buttons
     
    Last edited: Mar 14, 2021
    TatoD likes this.
  32. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    742
    This is a good point, I wonder though if - say this game was really going on an Xbox or Sony console - if they would accept that style of icons. Have you (or others) ever seen a game with Switch-style button prompts on other consoles? Just out of curiosity.
     
  33. IsaiahKelly

    IsaiahKelly

    Joined:
    Nov 11, 2012
    Posts:
    367
    @cirocontinisio that is a good question. I have never published on consoles so I do not know their policy on this. However, they do allow directional (d) pad icons (for obvious reasons) and this would basically be the same exact idea, but for face buttons and look something like this:

    face_button_N.png face_button_E.png
    Now I will admit that when I first saw these types of icons on the Switch I did not really understand them, but it does not take long to deduce what they mean and I now think they are actually more intuitive. Especially for someone like me who does not use a controller much. So it prevents me from having to think "which one is the Y button again?" and look down at the controller. But maybe I just have a bad memory :)
     
    TatoD, cirocontinisio and Smurjo like this.
  34. cirocontinisio

    cirocontinisio

    Unity Technologies

    Joined:
    Jun 20, 2016
    Posts:
    742
    No, I love the Switch icons and they are genius considered that the pads can be rotated - in fact they are just genius when you enforce the developers to rotate their controls too and provide nice APIs to account for that (never used them though).

    But I think even though those are allowed for D-Pads on other consoles, I don't think they are for face buttons. I might be wrong today, but 10 years ago (yes) I worked as a certification tester briefly and they were not an option.

    The issue is not only for face buttons in this case though, but also for shoulder buttons and triggers, so I think in the end we'd have to swap the whole icon anyway... but we can start simple with Xbox buttons for now.
     
  35. IsaiahKelly

    IsaiahKelly

    Joined:
    Nov 11, 2012
    Posts:
    367
    Yeah, I remember hearing years ago about how indie developers on Xbox live could not have menus without text or something, and these types of UI restrictions may still apply (my research was fruitless). But I really just wanted to point out that the concept is very similar to existing icon types already.

    I can however see a possible issue with readability, since locational icons are less visually distinct compared to simple unique colored symbols, although I think careful design could negate most of the issue.

    I can also totally understand the need for symbols on trigger and shoulder buttons, since those are much harder to tell apart. Although the funny thing is, right/left trigger and shoulder buttons are already platform agnostic. It is only the labels that are not, e.g. "R1", "R2" vs "RB", "RT", which I think is kind of dumb now that I think about it.
     
  36. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    Hey @cirocontinisio I am using GIMP for the arts.
    I am not able to get the same result as your post https://forum.unity.com/threads/ui-graphics-item-icons.987537/page-2#post-6905606
    Mine are dull https://forum.unity.com/threads/ui-graphics-item-icons.987537/page-2#post-6917246

    My steps on creating icons:
    1. Open model prefab in unity.
    2. Focus on it.
    3. Take a screenshot of the view.
    4. Create a 512x512 image in GIMP. with default settings.
    5. Paste screenshot in image.
    6. Remove the blue background color.
    7. Add a border.
    8. Resize to fit inventory.

    Am i missing something ?
    Can anyone give me suggestions about getting results similar to ciro. o_Oo_O
     
  37. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    266
    I guess you can achieve a lot with lighting.

    You typically want to use one main light. It is roughtly in the same direction of the camera but slightly to the side, as you want to see some shadow to give the object more volume. Play with the intensity of the main light to have the colors bright but not pale due to overexposure (you only need to consider the bright parts in this step).

    Then you might want one or more lights of low intensity from the side to brighten up the shadows slighty. You want to have the item well visible in the shadow as well but still dark enough that the shadow can be clearly recognized.

    I guess you can reuse this lighting setup for all items, you might possibly adjust the intensity depending whether it is a bright or a dark object.
     
    arunchahar likes this.
  38. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    Thanks @Smurjo :)
    I selected color from brightest color available lighten it and used as light by filling it as shape on top of image to give it sort of cartoonish light.
    Same for shadows for dark color.
    I skipped on the brightening shadows part due to going for the cartoony light and shadow.
    :D But this image came out better than previous ones.

    012_Almond.png
    I took 128x128 image this time so there is no need for resizing to fit the inventory.

    Inventory test. I have decreased the opacity of the light and shadow.
    upload_2021-3-21_13-29-22.png

    If this works then i will do the same for all icons.
     
    Smurjo likes this.
  39. JoaoSantos

    JoaoSantos

    Joined:
    Mar 31, 2014
    Posts:
    20
    @cirocontinisio can we start integrate some UI? hahahahha

    Implementing the dialogue box and the start Menu, for example.

    I found this PSDs folders from @auxterlibre , but I don't have Photoshop. If it's possible to export in png with alpha and trim canvas, will be great :)

    I think that we can integrate the PSDs in the project, but I have fear about the size of the assets, for example.

    Other thing that I want to implement is the block attack action when UI screen is in mouse position.
     
  40. ChemaDmk

    ChemaDmk

    Unity Technologies

    Joined:
    Jan 14, 2020
    Posts:
    49
    Hey @JoaoSantos ! I started integrating some of the UI, you can see it in the "quest" branch, but I havent merged with the main branch, because controlling the UI with keyboard + controller is not implemented yet.
    If you want, you can start working at it from that branch ?
     
  41. JoaoSantos

    JoaoSantos

    Joined:
    Mar 31, 2014
    Posts:
    20
    Great, thanks Chema. I will check this branch :)
     
  42. JoaoSantos

    JoaoSantos

    Joined:
    Mar 31, 2014
    Posts:
    20
    @ChemaDmk

    I tried to update to Quest branch, but all these errors were raised:

    upload_2021-3-30_17-22-50.png

    One of the errors message:

    Library\PackageCache\com.unity.render-pipelines.universal@7.5.3\Editor\ShaderGraph\SubShaders\UniversalPBRSubShader.cs(9,7): error CS0246: The type or namespace name 'Data' could not be found (are you missing a using directive or an assembly reference?)

    Some folks reported this correction, but I don't know I must make this in this project.

    And the modification changed a great number of materials (but I think this is expected)

    upload_2021-3-30_17-26-2.png

    [EDIT]

    I made an update in Universal RP to use the same version of the Core RP and update the ui.builder and worked. Now I will clone again the project because I opened it previously in version 2020.3.1 and I think this made some materials changes. Now I will open in the correct version.
     
    Last edited: Mar 30, 2021
  43. JoaoSantos

    JoaoSantos

    Joined:
    Mar 31, 2014
    Posts:
    20
    Now I understand. The Quest branch uses an old Unity project version. So I will maintain two repositories. When completing the merge, I will move to more recently.
     
  44. arunchahar

    arunchahar

    Joined:
    Dec 30, 2020
    Posts:
    64
    Hey guys. I finally have time to finish the icons which i had started here https://forum.unity.com/threads/ui-graphics-item-icons.987537/page-2#post-6956966

    I am also sharing using google drive: https://drive.google.com/drive/folders/1zmWboE5KsPeqsn9tu_rZ910gvJqsqDJr?usp=sharing

    Shared the drive link. I am using GIMP and will upload the gimp *.xcf original extension file format. It should be equivalent to psd.
    Kept separate layers for original image, light, shadow, outline and background.
    I am keeping the same folder structure as the project and same names as prefab, will try to finish the food icons first as soon as possible. :)
     
unityunity