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?

asked Aug 17, 2018 in Engine by Diet Estus (1,494 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.

answered Aug 18, 2018 by kidscancode (17,016 points)
selected Aug 18, 2018 by Diet Estus
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 How to use this Q&A? before posting your first questions.