ImageFont Guide

ImageFont has been removed

ImageFont no longer exists in Torque2D. It was removed in version 3.3. Creating one gets you an "Unknown command" style error and nothing on screen.

You are probably here because you opened an older project, or followed a tutorial written before 3.3, and found something like this:

%font = new ImageFont();
%font.Image = "ToyAssets:FancyFont";
%font.Text = "HELLO";

Use a TextSprite instead. It's the scene object that draws text now, and it gets its lettering from a FontAsset.

TextSprite is better at the job than ImageFont was. ImageFont required every letter to occupy an identically sized cell, so an i took as much room as a W. TextSprite handles variable-width letters, wraps text, aligns it horizontally and vertically, and lets you adjust the spacing between letters.

What the old fields became

ImageFont	TextSprite	Notes
Image	Font	The big change — see below
Text	Text
TextAlignment	TextAlignment	There's now a TextVAlignment for up-and-down too
FontSize	FontSize
FontPadding	Kerning	Nearest equivalent — the gap between letters

TextSprite also adds FontScaleX / FontScaleY, OverflowModeX / OverflowModeY, AutoLineHeight and CustomLineHeight. The TextSprite Guide covers all of them.

The part that isn't just renaming

Your font art has to be converted. This is the one bit of real work.

ImageFont took an ordinary ImageAsset — a picture chopped into a grid of at least 96 equally sized cells, one per character, in ASCII order.

FontAsset doesn't work that way. It takes a .fnt file, which is a bitmap font: a picture of the letters plus a text file describing where each letter sits in that picture and how wide it is. That description is exactly what lets TextSprite give i less room than W.

So a grid image from an old project can't simply be pointed at a FontAsset. You'll need to turn it into a .fnt font. Any bitmap-font tool that exports the AngelCode BMFont format will do it, and there are free ones. Once you have the .fnt file and its image sitting side by side, the asset itself is two lines — this is ToyAssets' Arial, in full:

<FontAsset
    AssetName="ArialFont"
    FontFile="Arial.fnt" />

Then point a TextSprite at it:

new TextSprite()
{
    Scene = SandboxScene;
    Font = "ToyAssets:ArialFont";
    FontSize = 3;
    Text = "Hello";
    Position = "0 19";
};

There are working examples to copy in the toybox: the fonts themselves are in toybox/ToyAssets/1/assets/fonts/, and toybox/TextSpriteToy/ shows alignment, overflow and per-character coloring in a running scene.

Where to go next

• TextSprite Guide — the object that draws the text, and every field it has.
• FontAsset Guide — the font itself.
• Asset Manager Guide — how assets work in general, if MyModule:MyFont isn't a familiar sort of name yet.