UI graphics / Item icons

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.

Gave the button a wooden feel and tested the popup on top of the current in-game color palette.

3 Likes

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?

@ChemaDmk Is there a preferred way to hand over the assets? Should I just upload to Drive and post a link here?

I think that should work ! If you want to integrate it in the game you might create a PR with the new assets .

Here is the PSD https://rb.gy/b9yy3j
And the font I used Baloo Tammudu 2 - Google Fonts

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:

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:

6830282--794021--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 :slight_smile:

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:

3 Likes

Created some arts for the fruits icons.
Green and yellow background like in official concept arts.


Some sample fruits:
1 - Apple
2 - Grapes
3 - banana
4 - Orange
5 - Watermelon
6 - Strawberry

@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

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)

5 Likes

512x512 icons for banana. If its okay then i can add more. Let me know.

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).

2 Likes

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:

  • 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).

1 Like

@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. :hushed::eyes:

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.

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:

?

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.

  • 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: 6836780--795398--UIConcepts2.PNG.jpg 6836780--795395--UIConcepts1.PNG.jpg 6836780--795392--pause1.PNG6836780--795401--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?

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:

6836885--795443--Pause3.jpg

6836885--795455--Pause4.jpg

6836885--795458--Pause5.jpg

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

@cirocontinisio I hope you don’t mind I put them into the machine as well:

  • 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