Text

rfw comes with a multi-channel signed distance field (MSDF) text renderer.

See it in action in the text sample.

Integrating a Font

The necessary files (font description in BMFont JSON and glyph atlases) can easily be generated with msdf-bmfont-xml.

msdf-bmfont OpenSans-Regular.ttf -f json --smart-size --pot

The result can then be loaded:

const [serifTexture, sansTexture] = await Promise.all([
    this.textures.addFromURL(SERIF_ATLAS_URL),
    this.textures.addFromURL(SANS_ATLAS_URL),
]);

this.serifFont = createFontFromBMFont(SERIF_DATA as BMFont, [
    serifTexture,
]);
this.sansFont = createFontFromBMFont(SANS_DATA as BMFont, [
    sansTexture,
]);

And used with TextObjects:

this.text = new TextObject({
    x: 48,
    y: 100,
    anchor: vec(0, 1),
    font: this.serifFont,
    text: 'We met and we part\nAll that remains are\nTraces of brush and ink',
    style: {
        size: 40,
        color: Color.fromHexString('#000'),
    },
});

this.author = new TextObject({
    x: 500,
    y: 60,
    font: this.sansFont,
    text: '- Daigu Ryokan',
    style: {
        size: 20,
        color: Color.fromHexString('#654'),
        align: 'end',
    },
});

Text Style

Size (in pixels) can be set with style.size, line height (either in pixels or relative) with style.lineHeight.

Text align within the bounds can be specified with style.align. TextObjects anchor property controls where the text will be rendered relative to its position.

style.break controls line break behavior.

See TextObject, TextStyle, TextLayout.