Sprite Font

The Sprite Font object uses an image to display text. The "sprite font" is the object image, which contains a grid of every character that can be drawn. By drawing parts of this image in sequence, strings of text can be rendered. This allows complete artistic control over the appearance of text, rather than having to choose from existing fonts.

How sprite fonts draw text

Comparison with Text object

Both the Sprite Font and Text objects can display text in the game. Typically the Text object shows monochrome characters from an existing font or web font, which can use a range of sizes and possibly also bold and italic options. On the other hand Sprite Font uses images for each character. While this means any kind of artwork can be used for text, notably allowing for multi-colored text, it has the trade-off that it only really supports one font size and one bold/italic setting (those that it is drawn with).

Another important difference is that traditional fonts as used by the Text object often have good support for unicode characters. This allows them to display a wide range of characters, including many alphabets and character sets from many different languages. Sprite Fonts however can only use the characters for which an image has been drawn. It is very difficult to make a sprite font that covers much of the tens of thousands of possible unicode characters. If a Sprite Font is set to show some text which contains a character that has not been drawn, it will simply show an empty space for that character. If the entire string is in a different language which the sprite font does not cover, nothing will render at all. Bear in mind that if you allow user-inputted text, such as the player's name, or you wish to translate the game in future, then Text objects are probably more suitable.

Sprite font properties

Sprite font
Click the Edit link to edit the source image that text characters are rendered from. The image can be any size, but it should fit the characters it contains exactly, and preferably be a power-of-two size (e.g. 128x128, 256x256, 512x512...). Characters start in the top-left and the sequence moves to the right, wrapping down to the next line when it reaches the right edge of the image. If the character is narrower than the cell, and you change its width using the Set character width action, the image should be drawn left-aligned in the cell.

Character width
Character height
The size of each character's cell in the sprite font image. Individual characters can be displayed with a different width using the Set character width action. In this case, the character should be drawn left-aligned within its cell.

Character set
A string of characters that describes the sequence of letters in the sprite font image. This is used to map text to images. While the default starts with the English alphabet, it could be changed to another language or sequence and the image updated accordingly. Note however the Sprite Font can only display characters that are in the character set; any characters not in the character set with a corresponding image will appear as an empty space.

Text
The initial displaying text.

Scale
A multiplier to scale the rendered text with, such as 0.5 for half as big or 2 for twice as big. This can be used to "fake" different font sizes, but remember it's only stretching images; you may want to draw the font again at a different size instead of using a scale.

Initial visibility
Whether the object is initially visible or invisible when the layout starts.

Horizontal alignment
The horizontal alignment of the text within the object bounding rectangle.

Vertical alignment
The vertical alignment of the text within the object bounding box.

Hotspot
Choose the position of the hotspot (or origin) of the object relative to its unrotated bounding rectangle.

Wrapping
Choose word to only wrap entire space-separated words when reaching the end of a line. Choose Character to wrap at any character, which can break some words across lines half way through, but is more suitable for some languages.

Character spacing
Extra space in pixels to add horizontally between characters.

Line height
Extra space in pixels to add vertically between lines. 0 is the default size, negative values make lines closer together, and positive values space lines out further apart.

Sprite font conditions

Compare text
Compare the current text the object is showing.

Sprite font actions

Append text
Add some text to the end of the existing text.

Set character spacing
Set line height
Set scale
Set horizontal alignment
Set vertical alignment
Set the corresponding object properties. For more information, see Sprite font properties.

Set character width
Set the width of certain characters. For example, the character 'i' is usually narrower than the character 'w', but by default both characters display occupying the same width. This can result in some characters looking strangely spaced. To resolve this, this action can set the character width of "i" to something less than the cell width. It is also possible to enter multiple characters and the width is set for them all at the same time, e.g. "iIjl1". When the character width is less than the cell width, the left part of the cell is displayed, so the characters should be drawn left-aligned in their cells. Note it's also possible to set the width of the space character, even if it is not drawn in the sprite font image and not in the character set - simply use a string with a space in it for this action.

Set text
Replace the current text with a new string.

Sprite font expressions

CharacterHeight
Return the sprite font cell height.

CharacterScale
CharacterSpacing
LineHeight
Return the corresponding object properties. For more information, see Sprite font properties.

CharacterWidth(char)
Return the width of a character. A character must be passed (as a string) so the Set character width action can be taken in to account. Since the expression can only return one value, if there are multiple characters in the string, only the first is used.

Text
Return the object's current text.

TextWidth
TextHeight
Return the size of the actual text content within the text object's rectangle.

Tags: