Text is one of the basic controls of FairyGUI. Text does not support interaction, mouse / touch sensing is off.

Dynamic font

Dynamic Font refers to rendering text directly using TTF fonts. The ttf font file may exist in the operating system or it may be packaged in the game.

The environment in which the FairyGUI editor runs is different from the environment in which the application actually runs. For example, if you make an interface on a PC, the final interface may run on a mobile phone. In the editing interface, the dynamic font is the font used by FairyGUI to use the system environment where the editor is located. At runtime, it is the font provided by the actual operating environment, such as the Android system. The font at design time can be different from the font at runtime, but it is recommended to choose a similar effect.

The font used by the settings editor can be set in the project properties. The runtime font needs to be set by the code:

// Droid Sans Fallback is the default font that supports Chinese on Android
    UIConfig.defaultFont = 'Droid Sans Fallback';

Set the font used at runtime to ensure that the font also exists on the target platform, otherwise the desired effect cannot be achieved. If you want to package fonts to the target platform, then you need the support provided by the query engine, such as Unity, you can do this:Use font

If you need to use the ttf file, please install the file in the operating system (usually double-clicking the ttf file), so you can see this font in the font list after restarting the editor.

Bitmap font

There are often designs in games: some characters expressing special elements are made using images, for example:

FairyGUI editor supports bitmap fonts. First, we create a font. Click on the main toolbarThen, the font editing window pops up. We drag the created digital image from the resource library into the window, and set the characters corresponding to each image. Click Save, and our font is set. If you want to modify the image corresponding to each character, drag the image back in.

The method of using images instead of characters is very convenient for small amounts of text, but if you need to embed hundreds or thousands of words, make images for each word, and then set the corresponding characters for each, this will be a bit heavy . The FairyGUI editor supports external bitmap font creation tools such as BMFont, ShoeBox, etc. For the use of these tools, please refer to the network materials yourself. An external tool will finally export a fnt file (note 1: the file format should be fnt format, does not support xml or json) , click import material in the editor, and then select this fnt file, you can import the font It’s in the editor.

Here are the recommended BMFont export settings:

The following describes the functions of the bitmap font setting interface:

Instance properties

Click in the main toolbarButton to generate a text symbol.


Text supports dynamic creation, for example:

GTextField aTextField = new GTextField(); //LayaAir平台用new GBasicTextField
aTextField.text = "Hello World";

Dynamically change the style of the text (font size, color, etc.). The method is slightly different on different platforms:

TextFormat tf = aTextField.textFormat;
tf.color = ...;
tf.size = ...;
aTextField.textFormat = tf;
TextFormat* tf = aTextField->getTextFormat();
tf->color = ...;
tf->size ...;
aTextField.color = ...;
aTextField.fontSize = ...;

If you want to set the font of the text to a bitmap font, you can use the font URL directly for the font name, such as ‘ui:// package name/font name’.


If the text is checked as “Input”, the running instance object is GTextInput.

able to passUIConfig.inputHighlightColorwithUIConfig.inputCaretSizeModify the color and size of the cursor. Note that the size of the input cursor will automatically select the most suitable width according to the screen zoom. In general, you do not need to modify it.

The input text has a notification event when the text changes:

aTextInput.addEventListener(Event.CHANGE, onChanged);
aTextInput.addEventListener(Event.CHANGE, this.onChanged, this);
aTextInput.on(laya.events.Event.INPUT, this, this.onChanged);

Notification events when gaining focus and losing focus:

aTextInput.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
aTextInput.addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);
aTextInput.addEventListener(FocusEvent.FOCUS_IN, this.onFocusIn, this);
aTextInput.addEventListener(FocusEvent.FOCUS_OUT, this.onFocusOut, this);
aTextInput.on(laya.events.Event.FOCUS, this, this.onFocusIn);
aTextInput.on(laya.events.Event.BLUR, this, this.onFocusOut);

If you want to set the focus actively, you can use


If the input text is set to a single line, an event will be dispatched when the user presses the Enter key (note that it is only valid on a PC. Pressing Done on the keyboard of the mobile phone is not within the scope of support, and the engine generally does not provide an interface to interact with the mobile phone keyboard):


UBB syntax

FairyGUI supports UBB syntax:

Nesting between tags is supported, but cross-nesting is not supported. E.g:

    [color = # FFFFFF] [size = 20] text [/ size] [/ color]
    // not allowed
    [color = # FFFFFF] [size = 20] text [/ color] [/ size]

For unsupported labels, such as “[tag]text[/tag]”, FairyGUI does not do parsing, this part of the content is output as is. When the “[“ character is to be used in non-UBB syntax, you can use “\ [“ to escape it. Note that you can directly enter “\“ when typing in the editor. You need to use “\” in the code. \\ “This way you can express a backslash. Also, just escape “[“No need to escape”]”。

Normal text does not support the img and url tags in the syntax, because normal text cannot be mixed with graphics. To support mixed graphics, use rich text instead.

FairyGUI also provides methods to extend the UBB parser. Inherit the UBBParser class and register your own TagHandler. For specific implementation methods, please read the source code of UBBParser or refer to the demo.

Text template

Using text templates provides more flexibility to dynamically adjust text output. For example, if you need to display “My Ingot: 100 Gold and 200 Silver”, the common production methods are:

  1. Using a text control display, then the programmer can only retype the entire text when changing the value at runtime. This is undoubtedly a redundant workload and is not conducive to decoupling art and programs.
  2. Using four text controls to display, then the runtime programmer only needs to change the text control that displays the value, but the workload of the art increases.

This need can be easily addressed using the text template feature. Just place a text control in the editor, the text is “My Ingot: {jin = 100} 金 {yin = 200} 银”, and then check “Use Text Template”. In this way, the display is still “My Ingot: 100 Gold and 200 Silver”. At runtime, the programmer only needs to execute the following code to update the value:

aTextField.SetVar ("jin", "500"). SetVar ("yin", "500"). FlushVars ();

Can also be set in batches:

Dictionary <string, string> values;
    values ["jin"] = "500";
    values ["yin"] = "500";
    // Note that this method does not need to call FlushVars again
    aTextField.templateVars = values;

If you want to dynamically enable the text template function at runtime, you don’t need to set any switches, you just need to call SetVar directly.
If you want to dynamically close the text template function at runtime, you only need to set templateVars to null, that is:

aTextField.templateVars = null;

When the “{“ character is not used in the template, you can use “\ {“ to escape it. Note that you can directly enter “\“ when entering in the editor. You need to use “\\” in the code. \ “This way you can express the backslash. Also, just escape “{“, there is no need to escape “}”.

Text templates take precedence over UBB parsing, so templates can also be used in UBB, for example the text is: “This can be changed color[color={color=#FF0000}]text[/color]”, Which can easily implement the need to dynamically change the color of some text.