Official UI graphics / Item icons

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.

 

Apparently others can...

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

 

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.

 

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

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.

 

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

 

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.

 

A lot of the color will come from the icons. Currently is looking a bit dull because is empty.

 

This is how the cooking festival might look like using the the proposed color scheme.

 

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.

 

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?

 

Icons Borders and icons with original concept arts pallete. @cirocontinisio


These icons have 3d models present:
4. Orange
5. Lemon
6. Almond

 

Tried more test icons for square and circle border and two backgrounds.

1, 2, 3 - Background color from original color pallete
4, 5, 6 - Taken background color from here https://forum.unity.com/threads/ui-graphics-item-icons.987537/page-2#post-6841001

 

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

 

A simple dialogue box.

 

Some test with the icons created here https://forum.unity.com/threads/ui-graphics-item-icons.987537/page-2#post-6900290 and the UI wireframe of Inventory posted here https://forum.unity.com/threads/ui-wireframing.987606/page-2#post-6627919.

Just keep it all simple and minimum colors as possible.

Background of image 1 can be used when an item is selected and background of image 4 can be used otherwise. The UI text is all just placeholders.

 

Ok. Cool. I just made it to test out how icons would look like in inventory.

 

Looks great. Have you completed all the icons. If not i would like to try as well.

 

Hey @cirocontinisio i have added another test.

I used the same color scheme for inventory just for testing out icons. Inventory is a placeholder.

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 !?!?
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.

 

Is the size 512x512 okay with you @cirocontinisio so that you can resize according to your requirements.

Orange

 

Gamepad icons. Source file in the usual spot

 

Alright. I thought that after taking screenshot some shapes were straight lines instead of smooth so tried painting icons.

@Smurjo has also mentioned about using 3d models to create icons here https://forum.unity.com/threads/concept-art.995365/page-3#post-6732214

I will try to create some icons based on 3D models.

 

My tests

Spoon


Fork


Almond


Inventory

 

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.

 

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

 

@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:


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

 

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.

 

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.

 

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.

 

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.
But this image came out better than previous ones.


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.


If this works then i will do the same for all icons.

 

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

 

Great, thanks Chema. I will check this branch

 

@ChemaDmk

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



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)



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

 

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.

 

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.

 

I am wondering if instead of cluttering the screen listing the meaning of all buttons we should have a help screen e.g. to be opened by the "?"- key. It could also explain to the player how to change the settings, how to save, how to navigate, how to collect stuff, how to talk, how to cook and that eating restores health etc., possibly with headlines underneath which the separate help topics can be expanded or collapsed.

 

We could do it like the flashcard style angry birds used to introduce new birds function in stages where they first appeared.
As an extra we could make the ? Button a guide journal or magic slate kind of icon and make it dazzle whenever it has new info for the player. We could do a kachhing sound and even add haptic feedback for game controllers.

 

Do you mean something like TAB / Y ? (Y being the gamepad input)

We should make this contextual to the input being used and show only input relevant to the situation if possible. I don't think we have enough complicated systems that would require constant presence of input like described.

 

Some ideas for the HP and an example of contextual input (above the character)