UI Update Best Practices

Hey!
Could you please share some common practices when dealing with large amount of widgets?

We have a widget that contatins a list of widget entries. Our current approach when dealing with its update is pretty straightforward . If change in data has occured we simply rebuild the whole list i.e. clean it up and recreate every widget from scratch.

I am wondering if it may cause some performance issues later with bigger amount of data. If so, then what approach you may recommend when dealing with widgets update?

1 Like

Sounds like a bad idea for something beyond the most mundane setup.


  • consider binding Event Dispatchers and firing an update instead. It’s pretty cheap even if you need to notify thousands of widgets. And updating a data field is an order of magnitude cheaper than creating, laying out and pre-passing a widget.

  • an alternative here is to use widget property variable binding - provide widgets with a reference and they can poll data themselves:

This can dig for data inside of nested structs or components. It does happen as often as tick but this is where Retainer Boxes shine:

image

As you can modulate the frequency of the updates. Especially handy if widgets already use materials.

rebuild the whole list

  • depending on the structure and what we’re dealing with - List / Tile / Tree View type widgets are indispensable for working with huge numbers of widgets. Rather than maintaining a huge list of live widgets, you deal with their underlying data only, and the List View instantiates and updates what is needed on the fly. And if it does not:

Still cheaper than constructing the whole lot.

2 Likes

Hi @Everynone as you mention widget parameter binding I have a question for you.

When you bind some parameter (like the TEXT value to some Text Widget), the engine create a binding function like this:

image

that means the engine will update the parameter with whatever you plug on it.

Is this somehow optimized to be updated only if some of the stuff plugged on the parameter changes or it updates on every tick?

because If I put a lot of logic there just to display a value I am afraid it makes all the math on every tick and is not optimal.

Thanks
Dany

2 Likes

This will fire every frame. Inefficient unless you just absolutely must have an update every tick / frame; sometimes we do.

You posted a cool example today with a UI material changing color based on a value - if it was only one widget and the progress bar was supposed to be animated, why not put the script here, in the function binding. That would simplify a lot of things and the minimal impact a single widget has may be worth the simplification.


Have a look at the 3 official examples:

  • Function Binding, by far the worst offender - what you’ve described
  • Property Binding, polling plain variables (the calculation can be done elsewhere) every frame is not that bad but do we need to update the widget that often? At least we do not need to duplicate variables in the widget, we pull ready data out of another entity.
  • Event Driven - update once, only when you need to - that’s why I suggested an Event Dispatcher. A widget can subscribe to some actor’s ED and have the data pushed in only when needed, when the variable is actually updated.

In a classic example of the player receiving damage and updating their UI:

  • widget:

image

  • the player:

4 Likes

Yes. Dispatch driven update is the optimal option I think.

1 Like

Hey
Your replies were very helpful
Thank you!

2 Likes