[Note]How to do animated UI in UEFN (31.40)


So far there are 3 ways to create animated UI in UEFN, they all having its limitations. However, we should see what is to come in the December update as it seem to promise UI improvements.
update: It is totally possible with data binding, but there are still restriction

  1. have a button, or anything that can be triggered by the UI itself
    • This method seem good enough if the UI is interactable.
    • However, it doesn’t works on pop-ups, or any in-game behavior feedback.
  2. in verse, creating the UI and remove the UI every tick
    • Probably everyone’s nightmare unless you enjoy placing UI component in code
    • Require you to add and remove the widget every frame for the animation
    • At this point of the engine, cause memory leak and tank your game’s performance
  3. got some self-animated shader
    • The easiest way to get something moving
    • Doesn’t take any input or control
    • Good for pop-up and the things that doesn’t communicate game meaning but just decoration
  4. Data binding (the best way so far)
    • I am on 32.00 when I found out about this, but it is probably available before
    • With different location of your UI, you want to use different device to do data binding
      • If your UI is on top-left, use tracker device
      • If anywhere else, you need to use HUD device with limitations
      • The reasoning of this is tracker device being more powerful, but it force your UI to anchor on top-left. It might looks good on your machine, but it won’t work with people who changed their UI scaling. HUD device doesn’t have that issue, but it can only do very little data binding
    • Once you linked your UI and the device to each other, go to the binding tab and create a new condition as “if expression, do queue animation”. In the detail of the condition, like the animation you want
      • Right now it can only do Data compare float
      • “if expression, play animation” seem to be a better way to set it up, but it actually doesn’t work
      • When using tracker device, you can compare value(int) to the float value properly and use it to control many animations to play in different situations
      • HUD device does not have any numbered value you can set from verse that is good as a switch for data binding since it only compare to float but not string/text.
      • However, HUD device for some reason, the condition of “text equals to 0.0” seem to be always true regardless what the text is. For each HUD device, it will be able to trigger 1 animation and only when the text from HUD device is being updated.

At this point of the engine, animation in UI is possible. Regardless it is not good for giving feedbacks from the game. It is totally fine to have animated UI for the sake of art, or having fancy UI that require mouse clicks.

Published by


Leave a comment