How to tint a TextureRect?

user_3921848 0
Viewed 321

Is there a way to tint a TextureRect in Godot 4.3? For example: Imagine a white icon on transparent background assigned to a TextureRect. Is there a way to draw the white icon in an arbitrary color?

godot c#
1 Answers

On the Inspector panel, Under Visibility, you will find the modulate and self_modulate properties. You can use them to tint (or change the opacity by tinting alpha) of any CanvasItem (including any Control and any Node2D).

The properties modulate and self_modulate differ in which item do they apply to. The property modulate applies to the item it is applied to and its children, while self_modulate only applies to the item but not to any of its children.

You may also, of course, create and set a custom ShaderMaterial. See CanvasItem shaders. With a fragment function, where you set whatever color you want.

For example, this shader will preserve alpha from the texture, but set everything red:

shader_type canvas_item;

void fragment()
{
    COLOR.a = texture(TEXTURE, UV).a;
    COLOR.rgb = vec3(1.0, 0.0, 0.0);
}

Or this other example will keep red and alpha (it multiplies red and alpha by 1, and green and blue by 0):

shader_type canvas_item;

void fragment()
{
    COLOR = texture(TEXTURE, UV) * vec4(1.0, 0.0, 0.0, 1.0);
}

And, yes, these combine. The effect of modulate and self_modulate is applied after the shader material.

user_4020220
Related