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.
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.
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.
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.
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.
Click "Select a font..." to open the font menu. The available fonts depend on the chosen font family when Playground was launched.
Choosing a font inserts the token into the text.
If you have a range of text selected, opening and closing tokens will be created.
Select "Default" to reset the font to the label's default font.
The function of fonts in your game is dependent on the correct font family being loaded and/or created in code. See the font section of the TextraTypist documentation.
Click "Select a size..."
Choosing a size inserts the token into the text.
If you have a range of text selected, opening and closing tokens will be created.
You can change the size of the text to a more precise number by changing the value in the token. The size is capped at a maximum of 375%.
Select "Default" to reset the size to the label's default size.
The appearance of scaled fonts is dependent on the font chosen. If a font has been configured for distance field, it will scale up without any artifacts.
Traditional fonts will look blurry at larger scales.
Click "Select a color..."
Choosing a named color will insert the corresponding color token into the text.
If you have a range of text selected, opening and closing tokens will be created.
Select "Default" to reset the color to the label's default color.
Choose "More colors..." to open the color picker.
You can mix a color using any of the available color models.
You can also enter a six or eight digit hexadecimal value in the field.
Or you can select a color from the swatches menu.
To store your currently mixed color for selection later, click the "+" button under "Custom".
You can drag your custom colors into your preferred order. Drag a custom color away to remove it.
Click "OK" to choose your custom color. "Cancel" to exit the dialog.
View the preview of your TypingLabel in the bottom portion of the window.
Click the color button to choose a different background. It is best to test your text against a background that closely matches what will be seen in game.
Once you are satisfied with the result, click the copy button under "Code". This copies the tokenized text to the clipboard.
In your code, prepare a TypingLabel or TextraLabel as specified in the TextraTypist documentation. Note that TextraLabel does not display animated typing effects.
Paste the text as a parameter to the constructor of your label. Ensure that the text is quoted and escaped correctly.
To copy the plain text version without tokens, return to Skin Composer and click the copy button under "Preview".
To return to Skin Composer, click "File" and select "Quit to Skin Composer.
Note that your text is not persisted when you return to the Playground and it is not saved with your Skin Composer project. Custom colors, however, are persisted between all sessions.