Forum rules - please read before posting.

Regarding item backgrounds and highlights on "Unity UI in scene"

Hello Chris,
Sorry to bother again on the inventory part.

As we saw fit, we wanted to upgrade the inventory by using the Unity UI in Scene so we could arrange the buttons as we wanted. This is now a mockup but the idea remains the same to re-arrange them differently. We found now we have a couple of problems when switching.

1) I created the animations On, Off, OnInstant and OffInstant, but I don't understand what OnInstant and OffInstant means. It works without problems but want to understand the theory of those two states.


2) We noticed that Unity UI automatically hides the Canvas when turning it off. Actually since we have an always present inventory, we want to keep it there on screen all the time. The turnaround I found is to duplicate the canvas, one only having the idle state and the other with all the buttons. So, when the true inventory is on, it just overlaps with the old idle one and creates the desired effect.

is there a better approach to "not" hide the inventory when turning it off? We want to play the animation but then just stay still where the animation ends. (Images 1, 2, 3)
Oh! I also tried creating an action list when off, but the canvas deactivates anyways when off, so it doesn't work.


3) This is the big deal: When there's an item, the slots are replaced with the sprite of the inventory, so basically the whole "slot" is replaced without letting the desired background of the button appear. The worst part is when I hover over it, which should swap to a sprite which only has a border around the item (the whole in the middle should reflect the item, since it's transparent).

Using AdventureCreator as the primary type of item box in the Inventory Box settings, I had the desired effect: one for the background to always be there on the back, and one for the highlight. H
ow can I achieve such effect using Unity UI?

Image 4: items have no background behind them.
Image 5: setup
Image 6: button setup, as you can see the whole image is replace and the icon is not showing

Bottom line: the idea is to have the button with the background image (I can create an empty object behind it, no problems, but quite "weird") and we want the highlight around the button without hiding the inventory.

Thanks for everything and hope the message is clear (I always try to bring as many details as possible).

Link: https://imgur.com/a/xjekI2i

Comments

  • we wanted to upgrade the inventory by using the Unity UI in Scene so we could arrange the buttons as we wanted.

    I'd recommend sticking to Unity UI Prefab unless you have a specific need for "In Scene" mode, which is intended primarily for menus that have a specific position in world-space, e.g. a 3D control panel that exists in the scene.

    I don't understand what OnInstant and OffInstant means

    These are animations that will play when a Menu is turned on or off instantly, due to e.g. use of the Menu: Change state Action with Transition? unchecked. They should typically be a one-frame animation that places any animated properties in its default on/off state.

    is there a better approach to "not" hide the inventory when turning it off?

    Your approach is certainly viable - gamedev is all about hacks and tricks like that.

    The other option would be to prevent the Menu from turning off at all, and instead control its up/down animations through use of the Object: Animate Action, which will work on Menus as well.

    You might need to make use of scripting to handle this instead, e.g. if you want to emulate the default "mouse over" effect and have it be based on the mouse position - but it's possible.

    How can I achieve such effect using Unity UI?

    Assigning a "Highlight sprite" in your Button component will replace the "Target sprite" (mapped to the inventory item icon) when hovered-over, so you can't use that for an overlay effect.

    You'd have to instead look at using the Button's "Color Tint" transition mode, to make a separate "overlay" Image visible by controlling its alpha channel.

    If your Inventory item has an "Active graphic" assigned in its properties, this'll be shown in its place when hovered-over. The alternative to the above would be to give each item its own "highlighted" texture which combines the item and overlay sprites into one texture.

  • Hello Chris,
    I haven't had the time to post here the results but basically the problems are now fixed. I'll post here how I did it in case someone else has this issue and want to come to this post to see how to make it work. The bottom line here is that I tested out everything and not sure why the thing I did now works. It took me a lot of testing and hours but made it work. I'll post results here and the set up to emulate the AC setting.

    Thanks for everything again.

  • Don't ask me why this set up works but here's the workaround for anyone wondering how to achieve such effect using Unity UI:

    https://imgur.com/a/G82AWBh

    "Objeto 1" is the background
    "Objeto 2" is basically the highlight, but with a hole inside, so you can see the item. You have to prepare it in Aseprite or any other software.

    The trigger gameobject is a personal thing, so don't mind it.

    Pay special attention to the alphas. You can see that some are 255 and some 0. No middle grounds there.

    All image color's are alpha 255. The 0 alphas are in the "parent" normal and selected.

    Rest is always full.

    Also pay close attention to which object is modified by this setup.

    Finally a really nice touch: add the highlight (objeto 2) to the Inventory "active graphic" background.

    Hope this helps to any of you, adventurers!

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Welcome to the official forum for Adventure Creator.