UI graphics / Item icons

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

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.

@ , if i wanted to try making some UI Icons for inventory can i start it now?

Personally said, I like the art style of the initial concept art.

1 Like

Hey I made few icon i’ll try to make them in better quality later and if you have anything to say about it you’re welcome.
https://drive.google.com/folderview?id=1Buj1vUNZDDGNqS53YtUUoKFYD_hyo4Zv

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? 6419850--717516--TEST.png

I tried to Implement a pan but I wasn’t able to draw it good:
6419850--717519--TEST2.png

Or maybe this is better? 6419889--717528--Here.png

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

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.

2 Likes

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

.

1 Like

Good idea i like the icon style and i think we can work with your proposition idk what other think

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

6419850--717516--TEST.png

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.

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.

I did mine in 1080/1080 pixels and converted it into 265/265
is that okay?

1 Like

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.

2 Likes

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.

7 Likes

I wanted to revive this thread to start talking about the UI graphics too. It’s about time!
So I made a proper task: Codecks

6799301--788453--upload_2021-2-3_22-50-23.png

1 Like

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.

Played around with some initial ideas for the graphic style.

8 Likes