Unity UI menu flicker between end of OffInstant and Menu appearing

heyitsjayy

Hello!

First of all, using AC 1.74.0, and Unity 2021.1.19f1. All of the menus are in Unity UI.

There's a slight flicker / gap appearing between the end of the OffInstant animation for the Inventory menu, and the "Inventory Open Button" turning on.
It's brief though noticeable. I've been looking into a cause for some time, and haven't quite narrowed it down yet.

Here's a video showing it (at 3 sec.):
https://www.youtube.com/watch?v=MNOiJ8tb-iQ

Things I've tried:

• Understandably that Actionlists should be set to "Run in background" to avoid them turning menus off for a split second (such as what happens in some cases if "Pause Gameplay" is selected) -- so I checked all the Actionlists associated with turning the Inventory menu off, etc., and they were all already set to "Run in background".

• Enabled the "AC Status box" to check which Actionlists were running when the flicker occurs -- and checked that only the correct Actionlist associated with turning the Inventory menu off was running at that time, and it was set to "Run in background".

• Checked the Animator for the Inventory which appears correct. Here's an image:
  https://imgur.com/a/F1hiaX2
  Also checked that the "Custom Animation" Transition time (s) is set to the length of the "Off" animation.

• Also checked it in the "build" version of the game to see the flicker occurs there as well, which it does.

Shown is the Actionlist that turns off the Inventory:
https://imgur.com/a/92YlONn

There's a separate "Inventory Open Button" menu button ("bag" icon) that appears when the Inventory's "off" since it serves to open the Inventory menu (using a separate Action from closing).
Then when then Inventory is "open", another separate version of the "Inventory Open button" (bag) closes the menu.

This was the only way I could think of to have different "open" and" close" actions that appeared to occur by clicking the same button. It works as intended, just has the brief flicker.

Another useful thing to share may be each menu's Properties:
Inventory menu:
https://imgur.com/a/zJgIrBs
Inventory Open Button menu:
https://imgur.com/a/TEeobXB

--

One other way I thought of to have different "open" and" close" actions on the same button would be to "check" the animation state somehow, although I'm unaware if there's a way to do that via Actionlists.

Thank you very much for any advice!

ChrisIceBox

If the Inventory Open Button menu only has one element, you don't need to show/hide the element itself - locking the menu will prevent it from showing.

There can be a frame-delay when updating animations. You could try unchecking Wait until finish? and waiting for a time just slightly less than the transition duration, but for a totally seamless effect I'd recommend combining both into a single menu.

An Animator component that's on a child object in your UI prefab won't be affected by AC, so you could animate your in/out transition based on a Bool animator parameter and then have your Button toggle its value. This needn't involve AC - your OnClick handler could run this script function instead:

using UnityEngine;

public class BoolToggler : MonoBehaviour
{

    public Animator _animator;
    public string paramName = "IsOn";

    public void ToggleBool ()
    {
        _animator.SetBool (paramName, !_animator.GetBool (paramName));
    }

}

heyitsjayy

Thank you.

Realized "OffInstant" was written in the thread title and the second sentence, though it was actually meant to say "Off". It seems you understood anyway, though.

Tried unchecking Wait until finish? and entering in a Transition time(s) slightly less than the animation duration, though it still resulted in an undesired result.

In any case I decided to go in the direction to combine both into a single menu to have it appear seamless.

An Animator component that's on a child object in your UI prefab won't be affected by AC

By this, do you mean to place the animator component on a child object so that AC doesn't affect it?
The animator is currently on the root level as was mentioned in the manual to do.
The Inventory menu's hierarchy currently looks like this:
https://imgur.com/a/mIq1yYp

Do you have any suggestions on where to place it, such as create a new GameObject between the root and the Panel with RectTransform (and place it there)?

Thank you also for the script, though it appears to give an error when added to the project:
error CS1501: No overload for method 'SetBool' takes 1 arguments
Looked into it though, couldn't find a solution.

Thank you very much for any continued advice.

heyitsjayy

On second thought, it was my understanding that a Menu's "RectTransform boundary" should typically be a direct child of the UI Canvas root.
And things that animate into view from off-screen should be a child of that RectTransform -- as the "RectTransform boundary" remains fixed, and child objects can be animated freely.

Still, was wondering if you might be able to help elaborate on where a child GameObject (with Animator) might best be placed in the hierarchy.

ChrisIceBox

By this, do you mean to place the animator component on a child object so that AC doesn't affect it?

Right - this should be another Animator, independent of anything you may have on the root.

Thank you also for the script, though it appears to give an error when added to the project

Sorry, typo. I've updated my previous post with the correction.

Do you have any suggestions on where to place it, such as create a new GameObject between the root and the Panel with RectTransform (and place it there)?

You probably want to make a child after the Panel, so that you can animate the visual position of everything without affecting the "RectTransform boundary". Might be best to do a quick test with a separate temp menu first.

heyitsjayy

Hello! Thank you for the advice!

I changed the Inventory menu and re-arranged the hierarchy based on the advice given so far.

The Inventory menu now animates out when the Inventory's now shared "open / close" button ("bag" icon) is clicked. Then it animates back in when clicked again. It all mostly appears to work fine -- though there's a small issue where the "open / close" button can be clicked through, allowing unwanted Player movement.

Here's an image of what shows with the "root" level in the hierarchy of the Inventory menu:
https://imgur.com/a/RC6gmSP

Also an image of the Panel that's the direct child of the UI canvas root:
https://imgur.com/a/Fj0kDns

And an image of the "Panel white" Inventory block (with all other UI elements for the Inventory as children under it).
https://imgur.com/a/t4qRo8b
For reasons from testing, the "Panel white" Inventory block was set as the RectTransform boundary in the Menu Manager for the Inventory menu, and this does block clickthroughs.

Though as mentioned before, clicking the "open / close" button (named "Inv Open Close Button icon" in the hierarchy) can be clicked through, allowing Player movement. Understandably, this appears to happen since only the top-most "Panel white" is being considered by AC as the RectTransform boundary.
Looking for a bit of advice for also including the "open / close" button ("bag" icon) within that boundary.

Also hoping not to disregard this space under that "open / close" button. For example a RectTransform could potentially span over the "open / close" icon button -- though if it did, a Player may not be able to walk in that space below it. For instance the space indicated by the red rectangle here:
https://imgur.com/a/ZZBUIfL

Thank you much for your continued advice! It's appreciated.

ChrisIceBox

The RectTransform boundary is used to determine if your mouse is over a menu or not, so this should cover an area similar to your "Panel white" block.

If it covers that same area, that will prevent movement clicks when over the inventory.

For the button, which is an overhang: try checking Unity UI blocks interaction and movement? under the Settings Manager's "Interaction settings" panel. This should prevent the Player from moving when clicking on any interactive Unity UI component, regardless of the mouse's position over any RectTransform boundary.

heyitsjayy

Thank for for the advice.

Actually I knew about Unity UI blocks interaction and movement? and tested some, though was concerned that it might affect other Unity UI elements in other menus used for interactions or puzzles at other points in the game. Likely it won't. Just need to do some more testing.

One thing involving the Inventory menu so far though:
Unity UI blocks interaction and movement? appears to work to stop clickthroughs of the "Inventory open button" ("bag" icon) -- though something that's also affected is a full-screen invisible button in the Inventory menu prefab that closes the menu by setting the "IsOn" bool to "off / false", using Object: Animate -> Sprites Unity Complex -> Change Parameter -> "InOn".
As the invisible button is a UI element, it also stops the Player movement when clicked.

The overall effect I'm aiming for with the Inventory menu is shown below. This was using the original Inventory menu setup before combining everything into one menu as mentioned above.
https://youtube.com/watch?v=nfam9ArJI1Y

Hoping this is possible to achieve as it feels the most intuitive.
Is there any type of AC action or something else in AC that is able to tell when a particular RectTransform is not clicked on?

Thank you for your continued assistance.

ChrisIceBox

You can read IsPointerOverGameObject to determine if the mouse is currently over a button when the mouse is clicked, and run an ActionList asset if not:

using UnityEngine;
using AC;

public class ClickEmptySpace : MonoBehaviour
{

    public ActionListAsset actionListAsset;
    public bool canClick = true;

    public void Update ()
    {
        if (canClick && Input.GetMouseButtonDown (0) && !KickStarter.playerMenus.EventSystem.IsPointerOverGameObject ())
        {
            actionListAsset.Interact ();
        }
    }

}