0 votes

I have a ColorRect that I want to animate so that it becomes transparent starting on the left and continuously becomes transparent moving right, creating the effect that the ColorRect is dissolving from left to right.

I can of course just animate the modulate attribute of the ColorRect, but this changes the entire transparency of the rect.

Is there a way to do it along a gradient to achieve the effect I want?

in Engine by (1,597 points)

1 Answer

+1 vote
Best answer

ColorRect only displays one color so you'll have to use a shader for this. You will have one input: the amount you want to wipe (between 0 and 1). This should work:

shader_type canvas_item;

uniform float amount : hint_range(0, 1) = 0.0;

void fragment() {
    COLOR.a = max(0.0, min(1.0, 1.0 - amount + UV.x - mix(0.0, 1.0, amount)));

You can test it by moving the amount slider in the Inspector. Then you can animate that property using AnimationPlayer.

You can obviously get a lot fancier with, but this is a plain linear wipe effect.

by (21,936 points)
selected by
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.