TextraTypist Playground

TextraTypist is an advanced text rendering library created by Tommy Ettinger to be used with Scene2D. This enables the ability to mark text with font effects like bold, italics, and underlining. See TextraLabel as a replacement for Label. The library also includes a modified version of Rafa's TypingLabel for many typing effects.

TextraTypist Playground is a module of Skin Composer used to help construct the markup necessary for rendering a TextraLabel or TypingLabel. By following this guide, you will be able to use the utility to type your text, apply formatting, and then copy the resulting code to your own project.

Preparation

Using the latest version of Skin Composer, create a new project or open an existing one. If you wish to use your own fonts with TextraTypist, go to Project >> Fonts and create the fonts that you want to use. Note that TextraTypist only allows for up to 15 fonts in a single family, so Playground will only recognize the first 15 that you have created. These can be Bitmap or FreeType fonts.

To implement TextraTypist in your own libGDX project, follow the setup guide on GitHub. Create a TypingLabel and implement it in your UI layout. The text you create in Playground will be copied and pasted into these labels.

Creating Text

To begin, go to Project >> TextraTypist Playground. You will be prompted to choose a Standard Font Family or a Skin Font Family. The font family controls what fonts you will have available to you when you use Playground and indicate which fonts are going to be used in the Label.

• Standard Font Family allows you to use the fonts bundled with TextraTypist. These are always available and easiest to implement. There are more font families available including distance field fonts, however these have been omitted from Playground for ease of use. It is an exercise for the user to implement these.

• Skin Font Family is a family created from the fonts in your Skin Composer skin. The names that you have defined your fonts with will be used in the program. You must construct the font family in your project code in order for these names to work correctly in your game.

You will come to the "Home" screen of the TextraTypist Playground.

The menu buttons allow you to navigate through the different screens.

The Formatting Bar contains all the functions available for applying effects and formatting to your text.

The Code text area allows you to type your text and modify the formatting tokens on the fly.

The Preview label shows you a live preview of the TypingLabel. It is updated automatically and repeats the animation with every new key stroke in the Code text area.

Basic Formatting

Type text in the Code text area, then highlight the text that you want to modify.

Click the "B" button to apply bold. Notice that tokens have been added to the beginning and end of the selection. That means the formatting will only apply to that selection.

Another technique is to single click where you want formatting to begin, then click the "B" button.

This time, a single token has been added. All text from this point on will be bold.

You can combine various tokens to achieve multiple appearances very much like a typical rich text editor.

Applies bold formatting, making the text look thicker and creates emphasis.

Applies italics formatting, slanting the text and creating a different kind of emphasis.

Superscript decreases the font size and elevates the text above the line. This is often used for exponents in math.

Subscript decreases the font size and lowers the text below the line. This is often used in chemical formulas.

Midscript decreases the font size and places text at the center of the line. This is an in-between of superscript and subscript.

Applies underlining to the text. This can draw attention to a particular phrase. The line is created from the underline character specified in the font.

Applies a strikethrough to the text. This can invalidate a phrase without deleting it entirely. The line is created from the dash character specified in the font.

Uppercase Mode makes all text appear as capital despite whatever case they are written in.

Lowercase Mode makes all text appear as lowercase despite whatever case they are written in.

Capitalize Each Word Mode capitalizes the first letter of each word despite whatever case they are written in.

Resets all formatting and effects to the defaults of the label.

Alternatively, you can just type your own tokens if you happen to know the names. See the token documentation.

Effects

Click the "FX" button to open the effects preview.

You can choose an effect from the select box.

You can change the values by typing a new one in the field or using the buttons to the right. The preview will update as you make changes.

Boolean values can be activated or deactivated by clicking on them.

For effects that require colors, click the swatch to open the color picker.

"Var" and "Event" take text input to link your typing animation with your game code.

Click "OK" to insert the token into the text.

If you've made changes to the default values, the token will include your parameters.

Otherwise, the default token name will be used.

If you have a range of text selected, opening and closing tokens will be created.

Select the "Reset" effect to reset all effects to the default typing effect.

Refer to Rafa's documentation to learn more about effects and their parameters.

Fonts