#
AnimatedLabel
An AnimatedLabel is a Label that colors, highlights and moves parts of its text. An effect tag in the text marks a part, as a rich text tag does.
<UIToolbox.AnimatedLabel text="Text <gradient>Animation</gradient>" />
<UIToolbox.AnimatedLabel text="Level up" effect="Wave, Rainbow" />
title.text = "Text <gradient>Animation</gradient>";
loot.text = "You found a <gradient=#ffd60a,#ff9f0a><wave>LEGENDARY</wave></gradient> sword";
hint.text = "Press <highlight>Space</highlight> to jump";
health.text = "<pulse>Low health</pulse>";
health.Playing = false; // stops the effects at the current moment
| Tag |
Effect |
<gradient> |
A color blend from the start of the part to its end. The blend moves along the text. <gradient=#from,#to> gives the two colors. |
<rainbow> |
All hues along the text. The hues move. |
<wave> |
The glyphs move up and down, one after the other. |
<shake> |
Each glyph shakes on its own. |
<pulse> |
The text fades out and in. |
<shimmer> |
A light band moves across the label. |
<highlight> |
A colored rectangle behind the text, as from a marker pen. <highlight=#color> gives the color. It does not move. |
- The tags can be one in the other:
<gradient><wave>text</wave></gradient>.
- The tag names are the names of
TextEffects, in any case.
- Rich text tags (
<b>, <color>, <size>) stay in the text and work as in a Label.
- A
< that does not start a tag is a plain character: 1 < 2.
#Members
| Member |
Description |
text |
The text with the effect tags. |
DisplayText |
The text that the label draws: text without the effect tags. |
Effect (effect) |
The effects of the whole text, a set of TextEffects values: Gradient, Rainbow, Wave, Shake, Pulse, Shimmer, Highlight. The effect tags add to them. |
Speed (speed) |
The speed of all effects (1). Zero stops the movement and keeps the colors. |
Playing (playing) |
False stops the effects at the current moment (true). |
Amplitude (amplitude) |
The distance in pixels that a glyph moves in a wave or a shake (4). |
GradientFrom, GradientTo |
The colors of a gradient that has no colors in its tag. A value set in code replaces the USS variable. |
HighlightColor |
The color of a highlight that has no color in its tag. A value set in code replaces the USS variable. |
IsAnimating |
True while the label changes its glyphs each frame: it has an effect that moves, Playing is true and Speed is not zero. |
- The label lays out the text once and changes the vertices of the drawn glyphs through
PostProcessTextVertices. The effects do not change the size of the label, and the words do not move to another line.
- A gradient goes from the left edge of its part to the right edge. On a part that wraps, each line shows the colors of its place.
- A highlight has one rectangle for each line of its part. The rectangles are behind the text.
- The effects run on the element scheduler, so they stop when the label leaves the panel. A label with no effect that moves does no work each frame.
- Do not use the
<mark>, <sprite> and <noparse> rich text tags in an AnimatedLabel: they move the effects to the wrong glyphs. Use <highlight> in place of <mark>.
- The
<gradient="preset name"> tag of the text engine stays as it is. A gradient tag with no value, or with a value that starts with #, is the effect.
#Styling
| Class or variable |
Element |
tb-animated-label |
The label: --tb-color-text, and the text wraps. |
--tb-animated-label-gradient-from |
The first color of a gradient (#FF2D55). |
--tb-animated-label-gradient-to |
The last color of a gradient (#7B2FF7). |
--tb-animated-label-highlight |
The color of a highlight (rgba(255, 214, 10, 0.35)). |
.quest-title {
--tb-animated-label-gradient-from: #ffd60a;
--tb-animated-label-gradient-to: #ff9f0a;
}
