How to do Cooldown Material with UMG?

[BDC_Patrick]

Hi there.

I´m fairly new to Materials and stumbled over that Topic.

I want to do a Cooldown Overlay for my Inventory Slots.
I can Show and Hide the Overlay, the Overlay has an Image Covering the whole Slot, and a Text Widget, that shows the remaining seconds of the cooldown.

This is how i created the Material Instance in the UMG Graph:

The Image receives the Brush via Binding.

This is how i change the “Percentage” Parameter of the Material:

And this is the Material, i created an Instance of, that i used for the UMG than:

At first, it all works as expected. But only, if i set the Color to white… or any other Bright Color…
This is the result:

The problem:
I want the White Part to be black, and the Black part to be fully transparent.
And over all, i want the whole Material to blend with the Parameter Opacity

Like this (Affinity Montage… Text is missing here):

Can someone push me in the right direction to achive the wanted effect?

[Tuerer]

In the first “IF” you have 0 and 1, which are respectively black and white. Use 0 instead of 1, and any color you want instead of 0, and additionally multiply your opacity by the result of IF.

[BDC_Patrick]

An Update to my previous Material.

This has some more and better Options to handle Cooldowns and Hold-Key-Indicators.

This is the Material Graph:

Make sure, this Material has its Domain set to User Interface and the Blend Mode to Translucent.

And this is, how the Details of the Custom Node should look like:

To add a Custom Node, simply rightclick and search in the Context Browser for Custom
Add three Fields to the Input Array in the Details Panel and give them the exact Names: UV, Percentage and CCC

Make sure the Output Type is CMOT Float 3

You can rename the Node with the “Description” Field of the Details Panel.

Into the “Code” Line of the Details Panel (which is a multiline Textbox), you simply Copy & paste this inside:

float2 Coordinates= float2(UV);

Coordinates= (Coordinates- float2(0.5, 0.5))*2;
Coordinates= float2(-Coordinates.y, Coordinates.x*CCC);

float PercRad = radians(Percentage*360);
float3 Pointer = float3(cos(PercRad), sin(PercRad), 0);

float3 Coordinate3D = float3(Coordinates.x, Coordinates.y, 0);
float3 CrossProduct = cross(Coordinate3D , Pointer);

float Value = 0;
if(Pointer.y > 0){
    if(CrossProduct.z > 0 && Coordinates.y > 0){
        Value = 1;
    }
}else{
    if(CrossProduct.z > 0 || Coordinates.y > 0){
        Value = 1;
    }
}

return Value;

Create an Instance of this Base material and Use it in your UI as you please.