Skip to content

Intro to Text

Text elements in gooey are labels that can be created to display text in panels.

Constructor

Text elements are created by using the UIText constructor, which has the following signature:

UIText(_id, _x, _y, _text, _relative_to=UI_DEFAULT_ANCHOR_POINT)

Here:

  • id is the string ID.
  • x and y are the offsets with respect to the anchor point.
  • text is the ScribbleDX string (with optional inline tags).
  • relative_to is the anchor point, as usual from the UI_RELATIVE_TO enum.

Styles

In gooey, UIText widgets support regular, mouseover and click text strings. This means you can change the format (and even the text!) on each of those three events:

Event Method
Regular (no event) setText
Mouseover setTextMouseover
Left Click setTextClick

UIText

Please note that these behaviors are only supported starting with gooey 2025.4.

You can also set up background formatting. This will cause gooey to render a small, colored rectangle below the text. You can set this up using setBackgroundColor and setBackgroundAlpha. By default, there's no color (-1), so only the text renders.

Text formatting

As described in the Working with Text in gooey article, text formatting relies on ScribbleDX interpreting inline tags. For UIText elements, prior to 2025.11 there is no separate format string variables - you directly specify inline tags in the text string. However, starting on that version, you do have text formatting prefix tags for each of the three states, for added flexibility. Review the documentation mentioned above, and the official ScribbleDX documentation, to know more about these tags.

Text wrapping

You can also set up wrapping by configuring a maximum width, by using setMaxWidth. This will cause ScribbleDX to use wrapping when rendering the text.

Typists

UIText elements can use a typist to emulate a typewriter effect. You can configure the typist as usual in a game object, and then link to that typist by using setTypist. This allows you to animate text in a panel directly according to that effect.

Examples

I created an example with several UIText elements configured with different tags. The code is the following (note that, for brevity, I'm skipping the panel and grid codes, as well as the line that adds each UIText element to the grid):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Panel / grid code goes here

var _txt = new UIText("Text_Normal", 0, 0, "Regular text", UI_RELATIVE_TO.MIDDLE_CENTER);

var _txt = new UIText("Text_Font", 0, 0, "[fnt_Test]Font[/font] text", UI_RELATIVE_TO.MIDDLE_CENTER);

var _txt = new UIText("Text_Color", 0, 0, "[c_yellow]C[c_lime]o[c_red]l[c_fuchsia]o[c_teal]r[#ffcc00]e[c_orange]d [c_white]text", UI_RELATIVE_TO.MIDDLE_CENTER);

var _txt = new UIText("Text_Effect", 0, 0, "[wave]Wavy [/wave][rainbow]rainbow text[/rainbow]", UI_RELATIVE_TO.MIDDLE_CENTER);

var _txt = new UIText("Text_Mouseover", 0, 0, "[fnt_Test2]Mouseover/click me[/font]", UI_RELATIVE_TO.MIDDLE_CENTER);

var _txt = new UIText("Text_Scale", 0, 0, "text [scale,2]scaled", UI_RELATIVE_TO.MIDDLE_CENTER);

var _txt = new UIText("Text_Background", 0, 0, "Background is [c_lime]cool[/color]!", UI_RELATIVE_TO.MIDDLE_CENTER);
_txt.setBackgroundColor(c_gray);

var _txt = new UIText("Text_InlineSprite", 0, 0, "Sprite [spr_Icon] inline", UI_RELATIVE_TO.MIDDLE_CENTER);

var _txt = new UIText("Text_Align", 0, 0, "[fa_right][fa_bottom]SE Aligned", UI_RELATIVE_TO.MIDDLE_CENTER);

var _txt = new UIText("Text_Wrap", 0, 0, "Very very very long wrapped text", UI_RELATIVE_TO.MIDDLE_CENTER);
_txt.setMaxWidth(80);

var _txt = new UIText("Text_Typist", 0, 0, "Typewriter text!\nClick me to reset", UI_RELATIVE_TO.MIDDLE_CENTER);
_txt.setTypist(self.typist);
_txt.setCallback(UI_EVENT.LEFT_RELEASE, method({typist}, function() {
    typist.reset(); 
}));

var _txt = new UIText("Text_Combined", 0, 0, "[pulse][spr_Heart,0,0.05][/pulse]   Scribble[#ef0000]DX[c_white]   [pulse][spr_Heart,0,0.05][/pulse]", UI_RELATIVE_TO.MIDDLE_CENTER);

The above code yields the following interactive example: