Mouse-scroll inventory UI

Hey all, I'm creating my game with as minimal UI as possible for immersion. Unfortunately, I do need some UI for the inventory system, which will look a lot like many FPS weapon selection - a bar along the bottom, scroll through them using the mouse wheel. When not in use, I want the inventory bar to fade away. So far all of my work has been done in 3D, but it's time I head into the UI realm and want to make sure I'm looking at this the right way.

My current plans:
- Use a Canvas for the big long rectangle that'll hold the items.
- Use Sprites + Text fields for each item.
- Do all the active graphics (scrolling through, animating images as I select each, etc) through scripting.

That sound right? The one thing I have no idea how to do is fade the entire bar. I don't see a transparency/alpha option in canvas or on sprite/text. How would I do this? Is there something I can trigger that automatically fades over time, or is there a lerp-like feature for fading?

Thanks,
Palimon

 

What you're proposing sounds reasonable.

In order to fade the bar, you can write a script to traverse all the graphical components in the UI and fade them down by setting the alpha channel of their color down to zero.

Or alternately, you can just "tween" the entire sub-panel offscreen so it disappears.

Also, you cannot move the base canvas that all this will live inside: you will have a sub-canvas under it and that will be what you can move around.

 

This depends entirely upon the overall approach you're trying to acheive. Is your "long rectangle" interactable or is it entirely aesthetic? In any case if you want the Panel that hosts this "inventory" to fade over time you're going to have to make EVERY (visual...image) component of it Lerp it's Alpha value over time down to 0. Then once it reaches 0, just disable the panel altogether. Of course this requires having some function (input) that re-enables the panel and immediately changes the Alpha value(s) back to 1.

Text components don't have an Alpha value, but Image components do. And by default a Panel has an Image component.

 

Text components have a Color value, which indeed has an alpha value...