UMG single animation for multiple widgets

Hello,

I’m wondering, is there a way to apply a single animation to be used for multiple widgets? For example, have a single animation called ‘ButtonHover’ that can be used for all the buttons in a menu when a mouse is hovered on each?
I am asking this because I have a menu with a large amount of buttons that look the same, but rather than having a seperate animation for every single one of those identical buttons, I would like to have a single animation to be called for each button when required. More specifically, the text within those buttons must also have a single animation to share and use when needed, perhaps in the same animation as its parent button animation.

Thanks in advance!

If you made a custom widget for your button, then you can make the animation in that button’s widget. Then obviously all these buttons would be able to use that animation.

I don’t think there’s a way to do it other way.

What do you mean by this? It doesn’t seem to apply to all my buttons. Can you provide an image of what you mean?

Just to add to this, I’m having the same issue. I might have 12 buttons in one widget and I want all of them to play a rather complex fade-in animation when loaded. Anyone’s assistance with this would be awesome!

1 Like

What Atheist91 is saying is exactly correct, let me clarify.
What you want is to nest one User Widget (in this case, an editable button widget with an animation) inside of another User Widget (which I have set up as a canvas for the purposes of this example). So lets go through this step by step.

First we will make the button widget, it can be simple with about 2 elements for the sake of this example. It also has a custom animation that basically just changes the scale of the button when played. You should note that we are using custom size for this widget as shown at the top right of the screen.

Next we will bind the onhovered event to play my animation for this button.

Once that widget is done we will make a new widget, this time we place a vertical box with 4 of our button widgets inside of a much larger canvas widget. In this way, if we hover over any of our buttons, they will play back the same animation. Each button is editable per instance with a basic interface right now, but if you wanted to expose more variables from the base class for instance editing you could.

102245-setupincanvaswidget.png

Also, if you want to find your widgets faster, you can use the handy search box.

102246-finduserwidget.png

I hope this helps with your awesome project!
-Spiris

2 Likes

Yes! Thanks for the explanation. The other guy didn’t seem to do very well with his answer, although I’m sure he meant the same thing. This helped a lot! Now I can have a very polished menu :slight_smile:

Sorry TornadoStorm, I didn’t see your comment until yesterday when Sheffield49 wrote his comment. Was going to make some example today in the evening but I guess it won’t be needed anymore. :stuck_out_tongue:

Yeah, that’s what I meant. Thanks Spiris. ^^

No problem! :smiley:

A few questions on that though, how can I set its custom text? Through a public binding?
And how do I assign an OnClicked event for the individual buttons? It doesn’t seem to show when I place it in another blueprint

I share Tornado’s excitement, many thanks!

As for text, a simple Text variable would do (and then set it in construct node). The variable would have to be public and ‘editable’.

As for OnClicked event, you’d have to create your own event that is fired whenever the actuall OnClicked event is fired. Event dispatcher is what you need here.

1 Like

Alright, thank you! I’ll go learn how to use Event Dispatchers. Hopefully they do exactly what I want them to do :smiley:

Here’s example of how to setup what i was talking about.

Your custom button widget - UI side:

Custom button widget - variable for display text:

Changing text on your button using your variable:

Customizing text on button (won’t show up in editor):

Event dispatcher setup:

The OnPressed(Button_Button) event is just an event you can hook up to on any vanilla UE4 button widget.

Great! Thanks again, you went the extra mile :smiley: really appreciate the help.

Is there a way I can change the text of the button? Like every button you placed says “Hover Me” but I would like to be able to change the text.

Yes.

Set the variable to Instance Editable in the details panel (or click the Eye icon in My Blueprints panel).

This will allow you to find that variable on any instance.

Be aware that you do actually have to do something with that variable. For example, you might set the text to populate a text block when the widget is constructed.

I’ve been puzzling over this for a while. I can’t see how event dispatchers help to allow the host widget to interface with the button widget to instruct which OnClicked fuinctionality you want. Say you have a load and save button. How would you communicate to the button widget which button was which. Best I can think of is passing in an int or enum when constructing and assigning functionality in the on clicked event but this seems both cumbersome and to have low scalability. As far as I can see, it’s a pretty poor trade-off whichever approach you choose.

Hi, great explanation. Could you tell me how to get all of the events for the button widget inside the widget its nested in? I only see “event visibility changed”. I hope you get this after 8 years lol. Thanks!