0 votes

I have UI elements, and I want to fade them in sequence, and with some modifiable delay by changing their CanvasItem modulate.a property.

I have made a tween node, "TweenMenu", and given it

var node

func animate_fade(nodetoanimate, delay):

    var node = nodetoanimate
    interpolate_method(self, "fade", 0, 1, 1, EASETYPE, EASE, delay)
    start()

func fade(x):

    node.modulate.a = x

This means in the root node's script I can have a very straightforward thing like this:

func _ready():
    $TweenMenu.animate_fade($UIElementOne, 0)
    $TweenMenu.animate_fade($UIElementTwo, 1)
    $TweenMenu.animate_fade($UIElementThree, 2)

The problem is, this will only work on the last UI element I try to animate (Element three in the above example), because after it sets the interpolate method and starts it on the first UI element, it immediately changes to the next element.

I know I could do something with yield(), but I don't want to wait for the tween to finish, because I would like the next UI element to start animating before the first one is done.

I hope I've explained well enough, what's the best way to achieve what I want to achieve?

in Engine by (251 points)

2 Answers

+1 vote
Best answer

TweenMenu.gd

extends Tween

const TRANSITION_TYPE = TRANS_LINEAR
const EASE_TYPE = EASE_IN_OUT

func fade_in(ui_element : Control, delay : float):
    interpolate_property(ui_element, "modulate:a", 0, 1, 1, TRANSITION_TYPE, EASE_TYPE, delay)

Main.gd

func _ready():
    $TweenMenu.fade_in($UIElement1, 0)
    $TweenMenu.fade_in($UIElement2, 1)
    $TweenMenu.fade_in($UIElement3, 2)
    $TweenMenu.start()
by (10,315 points)
selected by

Ah, I didn't know this could be done in this way, this is exactly what I was looking for, thanks!

0 votes

Hmm, you want to use a tween, but not for the whole distance? Then calculating the halfway point, adding a single frame there for the in-between image, and doing two tweens might help.

Or do you actually want to have active animations for the whole distance? Then using a tween is likely not what you want.

by (156 points)

Essentially I'm fading in some UI elements, and I want to fade them in sequentially, like maybe 0.2 seconds apart. I thought it would be really messy to make a tween for every node, and wanted to see if it could be done with one.

My guess is that you will have an easier time to just make an animation with the exact steps you want, and time the speed of it like you want.

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.
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 webmaster@godotengine.org with your username.