Managing fonts

Fonts on XR Portable

The mobile version of the XR engine does not support system fonts; however, it has a custom font management set in place. Unlike with the main Windows engine, the application developer needs to provide the fonts as part of the application data.

Setting up fonts

The fonts must be placed in the Gamedata\Fonts folder of the application and must follow some specific rules.

For Windows, only .ttf files can be read and loaded.

Font dialog

A custom font dialog enables you to select a font and to edit and configure font type options.

• Font—A list of the available fonts, loaded from the system, the Gamedata/Fonts of .pak or any other source.

• Size—An integer that sets the size of the font. Can be typed or selected with the arrow buttons.

• Font Style—The style of the font: Bold, Italic, Underline, Strikeout, Outline, Shadow, and Antialias. To add a Shadow, Outline must be selected also.

Sample

A sample preview of the created font that will be applied to the font field.

A font file for each different font customization

The mobile application needs a specific, dedicated font for each different font customization that is present in the mobile application. For example, Arial,20 and Arial,32 are considered two different fonts, such as Arial,20 and Arial,Bold,20.

Each different customization requires the corresponding font to be created and placed in the fonts folder. It is good practice to use the minimum possible set of fonts.

Font name must match font customization string

To enable the system to find the right font to use when drawing a node, the name of the font file must match the content of the font customization.

For example, to use Arial,20 for text, an Arial,20.fnt file must be present in the fonts folder.

Note: Font customization values may contain pipes (‘|’). Since this is a forbidden character for a file name, the pipe has to be replaced with an hyphen (‘-‘). For example, Arial,Bold|antialias,20 corresponds to Arial,Bold-antialias,20.fnt.

Also, observe that the .fnt extension is not mandatory for the font file. Arial,Bold-antialias,20.fnt and Arial,Bold-antialias,20 are both acceptable names.

Font file characteristics

The system is based on raster fonts. Each font has a corresponding glyph bitmap.

Example of font raster bitmap.

All the needed characters must be part of the font. When creating the font, the developer has to remember to include all the necessary char sets to be supported. Latin is generally acceptable for standard texts, but specific additions may be required for texts based on different alphabets.

Creating fonts

There are several commercial and open source tools that can be used to create such fonts.

Example—BMP Font

For example, we have used BMPFont – Bitmap Font Generator to generate a custom font

Bitmap Font Generator can be downloaded from https://www.angelcode.com/products/bmfont/ and used under zlib license.

How to create a custom font with the BMPFont tool

We used these customizations:

• Font = Arial

• Size = To calculate the font size, you need to multiply by 1.33 (for example, for a font size of 20, you need to use 20x1.33 = 26).

• Check Bold if you need bold.

• Check Font Smoothing for antialias.

• Check Match Character Height.

• Width and Height in Export = 1024x1024.

• Font Description = XML.

Here are some screenshot examples.