Working with text

Working with text is done using bitmap fonts. For every font family, style or color you need a different font file.

See all supported apps that create BMfont formatted font files: Font tools

Convert font to bitmap font using BMfont tool

In the BMFont-tool, use these settings:

• File → Font settings
• Choose font
• Choose size
• Render from TrueType outline (if you want smooth fonts)
• File → Export settings
  • Bit depth: 32
  • Preset: black text with alpha
  • Font descriptor: Text
  • Texture: Png
• File → Save bitmap font as..
  • Put in your Flambe project under ./assets/global/myFontName.fnt folder

Use font with code

var font = new Font(pack, "myFontName");
var myTextSprite:TextSprite = new TextSprite(font, "Hello world!");
myTextSprite.align = TextAlign.Left;
owner.addChild(new Entity().add(myTextSprite));

// change the text using .text property:
myTextSprite.text = "Flambe";

Tip: To use newlines, use \n in your text.

Different line height or letter spacing

myTextSprite.letterSpacing._ = 10;
myTextSprite.lineSpacing._ = 50;

Make text wrap on particular width

Default there is no word-wrapping. The wrapWidth property sets the maximum available width of this text before word wrapping to a new line.

myTextSprite.wrapWidth._ = 500;

In need of a dummy font?

Download a bitmap font (Arial 18px)

Creative with bitmapfonts

If you add some 'padding' (not 'spacing') in the export options, you can decorate the outputted .png-file in Photoshop with some colors/effects/gradients. For example, Flambe does not natively support filters like a shadows, glows or gradients. You can bake this inside your bitmap.

For the gradients, Its not simple to add them with photoshop, unless you use the "equalize the cell heights" in the export options. Then all chars have the same height and is a bit easier to add the gradients. Of course, the texture will be a bit bigger in that case, since there is a bit more whitespace.

Looking for a demo project with text? See https://github.com/aduros/flambe-demos/tree/master/text