For 90% of the time when creating UIs, using static textures inside Image widgets is good enough. Some of the time static textures are not enough and you need to display a material.
Luckily the standard Image widget accepts both static textures (
Creating a User Interface Material
First we need to create a material that we can use within our UI.
Create > New Material
We want to use our material in our UI so the first thing we do is mark it as a User Interface material. We want to be able to make our widget semitransparent so we will set the Blend Mode to Transparent.
The material editor gives us a visual graph-based method for creating new materials. This tutorial won’t delve into the details of material creation but we will create a simple material that will let us desaturate the colour of the texture that we want to display.
The Image widget has its own Colour property that we use to easily change the colour of static textures. We can use this property as an input to our material by using the VertexColor node.
Creating a Dynamic Material Instance
With our material created it’s time to see how to use it in-game and how we can
dynamically change our custom
We will cover two different ways of achieving the same results, one from Blueprints and the other from pure C++.
We can’t set our material on the Image widget and try to change that. Instead we need to create a new Dynamic Material Instance at run-time, set that to the Image widget, and keep a reference to it in order to change its values.
Assuming we have used the Bindwidget meta property to make our Image widget accessible from C++, we can create a new Dynamic Material Instance in C++ and assign it to the widget:
UMG Animations and Materials
UMG animations are a little fiddly and under-documented but you can produce some amazing things with them. One of their best-kept secrets is that it’s possible to control material properties from UMG animations.
Using our previous desaturation example, it’s possible to control the saturation scalar parameter from a UMG animation.