+1 vote

I've been trying to figure out a good way of doing this. Currently, I am just increasing the percent visible amount, but this makes the letter pop-in and I'd like them to fade quickly for a smooth look. Preferably, I'd like to be able to expand on this this and have them individually fade out start-to-end after specified amount of time too, which isn't even possible with percentage visible (as it only works appearing from left-to-right).

Is this possible with RichTextEffects?

Godot version 3.3
in Engine by (35 points)

1 Answer

0 votes

Sort of.

There is a BB Code text effect fade which will smoothly fade the alpha of your text, but it isn't animated.

enter image description here
It's possible to animate this with scripting (by replacing the bbcode with the start value incremented from a negative value like -10) and this would be fairly easy to do — but it is only rendered left-to-right and can't fade the text from start-to-finish like you were wanting.

It's still possible to do that with RichTextEffects but you would need to create a custom RichTextEffect. You can see the docs page for some more information on that: https://docs.godotengine.org/en/stable/tutorials/gui/bbcode_in_richtextlabel.html

It is quite a jump in complexity from using the existing bbcode, but once you have it coded you can simply type it like any other text [effect][/effect].

Edited Solution:

This example just uses the default fade bbcode with a script to animate the text.

var counter = -20

if text_animation == true:
    counter += 1
    if counter < 161:
        $RichTextLabel.set_bbcode("[fade start=" + str(counter) + " length=10]" + $RichTextLabel.text + "[/fade]")

To animate the fade-out transition from start-to-finish a 2nd RichTextLabel comprised of black squares ███ and the same colour as the first label's background is animated in exactly the same way but with the start 'counter' value offset.

    $RichTextLabel2.set_bbcode("[fade start=" + str(counter-180) + " length=10]" + "███████████████████████████████████████████████████████████████████████████████████████████" + "[/fade]")

by (1,004 points)
edited by

Thanks! Yeah, that's what I was looking at, but the custom RichTextEffects seem very complicated by comparison to write, and I'm having trouble figuring out where to begin with this :'(

Unfortunately I can't help you out on that front because I've never wrote one myself.
How important is the fading from start-to-finish? Another option is that you could fade it out by modulating the entire RichTextLabel.

There's a demo project which shows some of these custom effects in action here:

You might be able to tune some of the custom scripts and copy their implementation.

Thanks, I've been looking through for some ideas! The fade that's built-in might work, but I want it per letter successively, rather than as a full block (there was an example on github that did it as a full block fade and it didn't look quite right).

Moved image to OP

Here you go. An example using only fade. It uses a second RichTextLabel of block characters with the same colour as the background.

This is useful, but the code above is not the full code. it is inside a function I guess? Doesn't seem to be working for me so I'm guessing there's something else there I'm missing?

Yes, it's reliant on a continuous looping function — _process or _physics_process.
So, in this case you should try:

var counter = -20

func _physics_process(delta):
    if text_animation == true:
        counter += 1
        if counter < 161:
            $RichTextLabel.set_bbcode("[fade start=" + str(counter) + " length=10]" + $RichTextLabel.text + "[/fade]")
            $RichTextLabel2.set_bbcode("[fade start=" + str(counter-180) + " length=10]" + "███████████████████████████████████████████████████████████████████████████████████████████" + "[/fade]")

But... I should say the functioning of this code is as hacky as it looks. It may not look right unless you have a font with the required characters.

I do remember with this question I was actually halfway to coding a special RichTextEffect that would be automatic and reversible, but never got around to finishing it.

Do you want to achieve this kind of reversible effect in your project too?

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.