Using the RetainerBox Widget

How to apply material effects to a group of child widgets.

The RetainerBox widget is one of the more advanced widgets in the standard toolbox, but it can be extremely useful for more advanced visual effects.

It allows you to apply a material effect to all widgets placed inside. All widgets that are children of the RenderBox are rendered to a texture that is passed into the material applied to the RenderBox.

Any kind of visual effects you might want to apply to a set of widgets are best achieved with a RetainerBox

  • Change the hue/saturation of a set of widgets.
  • Add an interesting cutoff-based fade-in fade-out effect to show/hide an entire window and its contents.
  • Apply glitch or noise effects.
  • Offset pixels to make wave effects.
  • Add custom dynamic lighting effects to your UI

Create a Material

Create a new material and set its type to User Interface.

Next, open up your test widget and create a RetainerBox widget. Notice that it has a property named Texture Parameter. To access the texture data of the contents of the RetainerBox, you must create an identically-named Parameter2D node in your material.

Desaturation Example

Our desaturation retainerbox material. Note that it is set to UserInterface type.

RetainerBox Details

The details panel for our RetainerBox widget. Note that we have set the Texture Parameter to match our Material's Param2D node.

Apply the Material

Finally to see the result in-game, add Blueprint or C++ logic to set up a dynamic material instance of your retainerbox material.

Now in real-time you can change the properties of your material instance and see it applied to the entire contents of your RetainerBox.

Applying Material

Setting up the RetainerBox widget to use a dynamic material instance allows us to change its parameters real-time.