Creating a User Inteface 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.

▲ Set the new material's Material Domain to User
Interface.

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.

▲ Our complete material.

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 saturation parameter.

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.

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.

▲ Animation showing the 5-step process to create an animation that controls
a material parameter.