Add effects to your texts

Learn how to add effects to your text.

Categories Overview

Effects are divided in three categories, based on their functionality/application. They consist of:

Behavior Effects

Behavior Effects animate letters continuously during time, as long as a letter is visible.

Appearance Effects

Appearance Effects animate letters only when they’re appearing on screen. For this reason, they’re mostly used in combination with the typewriter, which shows letters one after another.

Disappearance Effects

Disappearance Effects animate letters when they just became not-visible, and under the hood they’re simply Appearance effects in reverse.

A list of built-in effects is available here: Built-in effects list

How to Apply Effects

You can set different effects to your text in two main ways:

• Set default effects to the entire text (inspector)

• Set effects to specific parts of the text (rich text tags)

Set default effects to the entire text

You can set which effect(s) will be applied to all letters by default in the TextAnimator node, without having to write effects tags for every text.

1. Head over to the TextAnimator node and visit the "Default Tags" section

text animator default tags overview

1. Expand the effect’s category you want to edit

2. Add any effect tag you want to include, example:

In the RichTextLabel no tags were used

In the effects are inlcuded directly in the TextAnimator

If you don’t want any effect applied by default, simply set the effects’ array size to zero.

You can also change the "Default Tags Mode" to "Constant" if you want effects to be applied all the time, on top of everything.

Modifiers within default tags are not supported in the Early Access, but will ship for the full version!

Set effects to specific parts of the text

You can apply effects to specific parts of your text by using rich text tags, overriding the default ones (if any "Fallback" is present).

The effects tag will look like this:

• Behaviors: <tag> to open, </tag> to close

• Appearances: {tag} to open, {/tag} to close

Once you close an effect tag, the letters will be affected again by the default effect (if any "Fallback" is set).

Example 1: Simple Effect

Example: “I'm cold” can be written as “I'm <shake>cold</shake>” (in the text component) in order to apply a shaking behavior effect on the specific word “cold”.

Example 2: Fallbacks

Let's say that we have one default effect ("size"), but we want to apply a specific part of the text with the "fade" effect. We can achieve that result by writing: "default default `{fade}` fade fade fade `{/fade}` default default"

As you can see, the letters that are outside the "fade" tags will have the default effect(s) applied, while the part inside "{fade}" and "{/fade}" will only have "fade".

Extra notes about Rich Text formatting

By using TextAnimator for Godot:

• 👍 You can stack multiple effects together (e.g. “<shake><size>”).

• 👍 You can close all currently opened effects with a single ‘/’ character, like:

  • ”</>” for Behavior Effects

  • ”{/}” for Appearance Effects

• 👍 There is no need to close tags if you’re at the end of the text, since Text Animator starts applying effect from the moment you open a tag. (e.g. "<shake>hello" will result in hello already animating).

Skipping tag parsing

In some cases you want to show a Text Animation Tag without it getting parsed. To do so you can use the "<noparse>" tag, which tells TextAnimator to skip elaborating a specific portion of your text and paste it directly as is.

For instance, the sentence "I'm <noparse><shake>freezing</shake></noparse>" will be showed as "I'm <shake>freezing</shake>".

Using Godot's built-in BBCodes

Text Animator for Godot is fully compatible with the built-in Godot's BBCodes (see Documentation).

To use bbcodes select your RichTextLabel and in the inspector, check the BBCodeEnabled flag.

You can now use both TextAnimator's and Godot's Tags to animate your text and unleash your creativity!

Combining TextAnimator and BBCode Tags

This works with Appearances as well 👍