Synchronize Widget Animations?

Development Programming & Scripting UI
, , ,
1

Hi,

I’ve got a HUD for my player, and some of the icons on it start flashing when the value associated with them (e.g. food / water level) fall below a certain threshold. The problem is that the values will fall under their respective thresholds at completely random times during the game and also trigger each widget’s animation at random times causing them to flash out of sync.

Is there a way to group / sync widget animations?

Thanks :wink:

2

So, the way to do this is by using material instances.

  1. Make a base material instance which you’ll use to create all the material instances from.

MI1
MI11388×712 246 KB

Note: Since material instances don’t support changing booleans at runtime, we’ll use a float and a lerp node to toggle the flashing.

  1. Once the base material is done, right-click it and press ‘Create Material Instance’.

mi2

  1. Open the material instance and set the ‘Icon’ parameter to your desired icon texture.

MI3

  1. In your widget blueprint, place an Image brush, and in the image slot, place the material instance.
    MI4

  2. In the widgets graph, place an Event Construct node. Darg the image element in, and drag a Get Dynamic Material node from it. Connect it to the Event Construct node and promote the output to a variable. Call it DMI_Image for example. (The DMI_ prefix means: Dynamic Material Instance. You can use your own prefix course).

MI5
MI5714×230 36.1 KB

What we’ve done here is we’ve created a Dynamic Material Instance reference to the Material Instance that we placed into the image brush earlier when the widget is first created. We’ll use this reference to change the parameters in the material instance.

This step is very important. The next step will not work without it!

  1. When we want the icon to start flashing, we can drag a Set Scalar Parameter node off the DMI_Image variable. In this node, we set the Parameter Name to StartFlashing (which is the name of the float parameter that we connected to the lerp node in step 1.

To the Value, we connect a Bool To Float node which will convert a boolean value to either a 1 or 0 (float). Now we can check the boolean to make the icon flash or uncheck it to stop flashing.

MI6

You can also use a Set Texture Parameter node with the Parameter Name set to Icon to change the texture in the material instance at run time.

Repeat this for all your other icons and they will all flash in sync. :blush: