Unity UI Container Background Slot Image
I am currently changing my Container Menu from Adventure Creator to Unity UI prefab due to experiencing sluggish / unresponsive navigation when using a keyboard (direct control / navigation menus).
With the AC version of the menu, it is much easier to display a highlighted container item by setting the background texture to Background texture is per slot? to true and assigning a simple colour as a highlight texture.
On the Unity UI version, there is no background texture for each slot (you also need to define an empty slot texture), there is just the slot image itself . When you have an inventory item in the slot, the highlight colour (defined on the Button component) only displays over the inventory icon, not the entire slot, making it much harder to tell that you are highlighting that item.
You can see in this comparison that the Adventure Creator version is much easier to read, because it is the background that is highlighted (and all inventory items have the same background as the empty slots), rather than the inventory item itself. How can I replicate this with Unity UI?
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
When a Menu relies on Unity UI, AC will relinquish as much visual control over it as possible, leaving it down to the way the various Button/Image etc components are arranged to handle its display.
To give each slot a background texture, add an additional Image child object to each slot's Hierarchy in the UI's Canvas prefab.
When it comes to the Button's highlighting effect, the effect will be applied to the Button's Target Graphic Image. By default, this is the same object as the Button, but it can be a separate object.
To emulate the "highlight texture" effect, you can set the Button's Transition to Sprite Swap, and assign an overlay sprite to assign in the "Hightlighted Sprite" field.
The Animation transition option offers the most control, however, as it allows you to control multiple properties at once (i.e. both sprite and colour), and also transition between them over time.
Having the "Count" label appear larger over slots is a case of resizing the "Label" child object for each slot.
When dealing with many slots like this, I find it easier to remove all but one of them, make the changes, and then duplicate them afterwards - possibly after making the first slot a prefab.
If I understand it properly, it seems that Animation is actually the only real option then, as with Sprite Swap there's no way to hide the child image, it displays all the time.
That being said, I can't get the Animation to actually play. In the "highlighted" animation, I have the child image enabled. In the "Normal" animation, I have the child image disabled. For some reason, the normal animation is not transitioning to the highlighted animation, even though the trigger parameter is being set and it is supposed to transition from any state. Has Exit Time is set to false.
The slot is definitely highlighted (but not visually) because the hover sound plays.
When navigating a UI directly, hovering an element invokes the "Selected" state - rather than "Highlighted".
With the Animation Transition option, though, you can have both of these states invoke the same trigger parameter - no need to create a separate one. Just set the Selected Trigger to match your Highlighted Trigger and it should kick in.
I'm sorry I'm not following. Do I need to create a new state called Selected and have the highlighted trigger parameter transition to it (I have tried this though and it did not work)?
There are only four possible states on the button's Animation Transition: Normal, Highlighted, Pressed and Disabled.
Apologies, I misread your previous post. Ignore my comments about "Selected", they were incorrect.
Check your "live" Animator at runtime - is the Highlighted animation playing, but without it affecting anything visually, or is the Normal animation playing despite the Trigger parameter being set?
As a temporary test, try affecting a different property in your Highlight animation, such as the Image's colour. Disabling the Image itself may create a conflict - it may be better to animate the Image's alpha colour to zero instead.
That's exactly it: In the Animator the Normal animation is playing despite the Highlighted trigger parameter being set.
I animated the alpha rather than disabling the image but unfortunately it's the same result.
Did you opt to have Unity auto-create and set up the Animator?
Double-check the transitions have the correct conditions - which animations play should by determined by those, and those alone.
Is the Animator attached to / set to animate the Image attached to the Button, or a separate GameObject?
Yes, but all transitions and parameters have been thoroughly checked.
The transitions are correct, I even added some extra ones to check (Normal to Highlighted etc) but still the highlighted animation will not play.
The animator is attached to the "Slot 1" button, the image object being animated is a child of that (I have also tried putting the animator on that as well though).
So I really don't know what's wrong with it.
To solve it though, I have created a completely transparent image and assigned that as the default image (on the child image object), then altered it's highlighted display with the Sprite Swap rather than the animation. It seems to work ok like that.
What I have to do now though, is go through every single inventory item and add a background to their "Main Graphic", as the slot icon graphic is totally replaced by the inventory graphic in Unity UI, rather than displayed on top of it like is with the built-in AC menu.
It shouldn't need to come to that. My hunch is that it's a simple setting somewhere, but I can't tell what it might be just yet.
How long are each of the animations, frame-wise? If you make Highlighted last for a second, and then check "Has Exit Time" on the Normal transition, does it then become visible?
Be mindful that if you change the Animator component's location, you'll need to update its animations for any properties it affects on GameObjects that aren't its own.
Oh sorry Chris, I went ahead and did it before I saw your reply. It's working, but if I have bother with it I'll come back to this animation method.