Download

Animating UMG Menu (Retainer box error)

So I have a complex issue with my current menu.

The menu itself has layers like so:
022ea39d00420eaf7f1c8b0f71c0634127b3582f.png

In that image that is the default state of the menu before I click anything.
Once I click a button in the menu, the canvas panel is set to move along the X-Axis, left, a certain amount for a cosmetic effect.
If I click another button in the next layer of the menu that is revealed, it will further animate the menu across the x-axis some more.
The end result looks like this: (Note I am just clicking play in the designer to show the first and then second layer animations)

So my issue is this,

After entering the first and second layer @ runtime, opening a retainer box with a texture and scroll box as a child, the** buttons inside said scroll box**, are no longer clickable except for the exact zone as shown here:
2b7705bf5179baa6da5339ad6322666288a8cd09.png

And here’s an illustration to show where the active/inactive zones end up:
aa2f8084cc9b609a970cad8f2b6e70de54fc5949.jpeg

Now it would seem obvious at first that the issue is because the animation is moving everything BUT the retainer box.
The animation is set to move the ENTIRETY of the canvas panel. This includes the retainer box with the buttons and scroll box inside it.
The buttons move, the scrollbox moves… But the retaining box doesn’t. Causing this issue where the only selectable area of buttons on the scroll box are the ones that just barely overlap where the retaining box would be before the animations.

Does anyone know what is happening?

This is a lot to take in so I’m not expecting miracles xD
Thanks everyone

Figured this out myself eventually.

The solution was just a workaround.
I moved the entire skills list to a separate widget BP and manually placed it in the design grid to where i Need it to appear. It would seem that no matter what I did, I had no control over how the retainer box refused to move it’s location via animation.

I believe that the whole point of using the retainer is to speed things up by caching it and preventing it from updating every frame. So you can update your UI at 30fps, saving CPU cycles to push higher frames elsewhere. The material effect is just a bonus, or perhaps more of a side effect, really.

The retainer has two extra properties: *Phase *and PhaseCount, the tooltips explain the purpose - see if you can fiddle with them, maybe? It seems that the default setting is 1:1 ratio (Phase 0 & PhaseCount 1) so it’s unlikely to help, though.

Other options that come to mind:

  • wrap the retainer with one more parent and animate that instead - maybe the retainer’s render target/buffer does not respect canvas transformation (that’s how you animate it, right?)
  • animate the retainer, too (I think you mentioned it yourself)

I have grabbed the entire widget and placed it into the first blueprint as “user created” and I will attempt to animate it along with the canvas for extra measure. If that fails i’ll add an additional parent box of some form and test that as well.
I’ve scoured everywhere to find the solution so if this doesn’t work I’ll have to figure out a different way of getting focus to both widgets.

That was the ticket!

I individually animated each horizontal/vertical/etc box instead of the entire canvas panel.
Then I added the separate widget in at the correct location post-animation, which enabled me to have control over all buttons.

Thanks!