This demo demonstrate how to render text using MSDF with Shaku.
To render text with higher resolution, Shaku can load a pre-generated MSDF atlas, which would look something like this (the below image was generated with msdf-bmfont-xml):
Once created, the Gfx manager can use it to convert any string into a collection of sprites that when rendered will draw the text with the given font.
The following is a minimal code example on how to draw text.
// load font texture asset
let fontTexture = await Shaku.assets.loadMsdfFontTexture('assets/DejaVuSansMono.ttf', {jsonUrl: 'assets/DejaVuSansMono.json', textureUrl: 'assets/DejaVuSansMono.png'});
// create text sprite batch
let textSpriteBatch = new Shaku.gfx.TextSpriteBatch();
textSpriteBatch.msdfFont = true;
// generate text
let textGroup = Shaku.gfx.buildText(fontTexture, "This is a multiline text..\nAligned left.", 24, Shaku.utils.Color.white, Shaku.gfx.TextAlignments.Left);
textGroup.position.set(100, 100);
// part below goes between startFrame() and endFrame()
// -------------------------------------------------------
// draw the text
textSpriteBatch.begin();
textSpriteBatch.drawText(textGroup);
textSpriteBatch.end();