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.
![Our desaturation RetainerBox material. Note that it is set to UserInterface type.](/assets/unreal/retainerbox-desaturation-material.webp)
RetainerBox Details
The details panel for our RetainerBox widget. Note that we have set the Texture Parameter to match our Material's Param2D node.
![The details panel for our RetainerBox widget. Note that we have set the Texture Parameter to match our Material's Param2D node.](/assets/unreal/retainerbox-details.webp)
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.
![Setting up the RetainerBox widget to use a dynamic material instance allows us to change its parameters real-time.](/assets/unreal/retainerbox-blueprint.webp)
- Creating dynamic materials.
- Controlling material properties from UMG animations.
- Dynamically updating widget appearance in-editor with
SynchronizeProperties
.