You can add effects to dialogues by using rich text tags.

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

Untitled

P.S. Be sure to have implemented Text Animator in your scene. Read more here.


Effects Categories

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

Behavior Effects

Behavior Effects animate letters continuously during time, after the letter has been shown.

wigglepreviewfebucci
An example of the Behavior Effect <wiggle>

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


You can apply behavior effects to your texts by using rich text tags. A Behavior Effect tag looks like this <tag>.

Example: “I’m <wiggle>joking</wiggle>. Now I’m <shake>cold</shake>”.


Modifiers

Modifiers let you change the characteristics of your behavior effects individually.

Example: You could have an effect as twice strong as the previous one, but still in the same dialogue line, like “I was <wiggle>strong</wiggle>… but now I’m<wiggle a=3> three times stronger</wiggle>!!!”

Modifiersmultiply the relative value; this way you can easily know how much stronger/weaker a modified effect will result compared to the base one (for this reason, a modifier of “1” will return the same result of a base value).

All Modifiers are structured like this: <effectID modifierID=modifierValue> and you can also use multiple of them (eg. <wiggle a=2 f=4>).

You can read a list of all the available modifiers for each effect: Built-in Effects list

Some extra notes:

  • ⚠️ Do not write identical attributes in the same tag, since only the last one will take effect.
  • ⚠️ Be sure to remove spaces between the modifierID, the ‘=’ symbol and its value

Appearance Effects

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

verticalexpandpreview
An example of the Appearance Effect {vertexp}

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


Set default Appearance Effects to the entire text

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

  1. Head over to the TextAnimator component
  2. Expand the “Set Default Appearances” section
  3. Edit the array and add any appearance tag you want to include.
textanimator set default appearance effects
Example: all letters will have the 'size' effect applied

👍🏻 If you don’t want any appearance effect, simply set the effects’ count to zero.


Set Appearance Effects to specific parts of the text

You can also apply Appearance Effects to specific parts of your text by using rich text tags, overriding the default Appearance Effect (if any). An Appearance Effect tag looks like this {tag}.

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

Example

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 Unity:

  • You can stack multiple effects together (e.g. “<shake><size>”).
  • You can close all currently open effects with a single ‘/’ character, like “</>” for Behavior Effects or “{/}” for Appearance Effects.
  • 👍🏻 There is no need to close tags if you’re at the end of the text.
  • ⚠️ You must close an effect before you open a similar one (for now).

More than default effects, you can also create your own.


How to tweak effects values

Built-in effects

You can tweak built-in effects’ values in the TextAnimator component.

  • Expand the category of the effect you want to edit. (Behavior effects or Appearance effects)
  • Expand the effect you want to edit.
text animator edit default effects
Example: editing the 'slide' behavior effect

Remember: Behavior Effects are also affected by Modifiers, if you set any.


Dynamic Scaling

You can setup uniform effects’ behavior on different screen resolutions.

  • Reference Font Size: represents the size where objects behave as expected. As a reference, you can pick the font size in your unity editor.

Untitled3

Example

For example, open the “Example 1A - Effects” scene, so you’ll automatically have all the default effects showed in the text.

  • Set the TMPro text’s size to any number, like 30. (remove “auto size”, if present)
  • Set the “Reference font size” to that same number.

→ The behavior of your effects in your screen resolution will now be uniform in other screen resolutions as well. You can tweak the effects values with this configuration until you’re satisfied. After it, you’ll be able to change the font size again while maintaining the desired and original effect behavior (do not change the “Reference Font Size”, or the scaling will be different).


Intensity Multiplier

⚠️ Some effects act differently based on different fonts and sizes. You can read which effect is affected here: Built-in Effects list

👍🏻 In order to “fix” this, you can use the variable effectIntensityMultiplier to scale all the affected effect’s amplitudes in the TextAnimator component.

Simple explanation: an effect’s strength of 2 could result weak in UI units (pixels), but really strong in world units. Then there is the font asset size etc.

Untitled4

This value will multiply only the affected variables, leaving unchanged the ones that are indipenedant from different fonts and sizes.


Time Scale Mode

You can change the effects TimeScale mode in the “TextAnimator” component.

  • Scaled: effects will slow down / pause based on the game Time.timeScale
  • Unscaled: effects will update even if the game is paused (Time.timeScale = 0)

If you have the typewriter enabled, its timescale will match the relative TextAnimator’s timescale (which means that you can also show letters when the game is paused by setting the timescale to “unscaled”).

⚠️ If the game timescale is negative TextAnimator will act like it’s paused, but it will automatically resume once it’s more than zero