How to render text using FontManager

Skip to first unread message

CPlayMas H

Jul 2, 2015, 8:59:12 PM7/2/15
Does someone could explain me the whole process to renderize a simple text using the FontManager.

What I have right know is the .fnt and the .fnt.json files. And the mapping table looks like this:

mapping {
      "font/ka1.fnt": "font/ka1.fnt.json"

The font glyphs are stored in a file called ka1_0.png

And the code to create the font object is the following:

var requestHandler = RequestHandler.create({});
  var fontManager = FontManager.create(graphicsDevice, requestHandler);
  fontManager.setPathRemapping(config.mappingFont, '');
  var gameFont;
  fontManager.load('font/ka1.fnt', function (font) {
    if (font) {
      console.log('Font manager loaded');
      gameFont = font;

The message 'Font manager loaded' is displayed on the browser console, but when I try to render my text using the gameFont.drawTextRect method, nothing is displayed.

There is something I could be missing?

Thanks in advance for your answers.

Ian Ballantyne

Jul 9, 2015, 4:55:58 AM7/9/15
A few things to look at first off:
  1. How did you generate your ka1.fnt? BMFont is the preferred method. Start by trying to render an existing font (see the font assets in the SDK)
  2. Take a look at the leaderboards sample or the subtitle samples (samples/scripts/subtitleplayer.js) for an example of it in use. Is there anything thing it is doing that your code doesn't? Maybe start with an existing example and strip out the stuff you don't require.
  3. Are there any other console messages? Make sure there aren't any errors/warning about loading rendering bitmaps in the console.

CPlayMas H

Jul 10, 2015, 5:40:46 PM7/10/15
Ok I will look the sample, I just want to show three messages, so I'm considering to use Protolib instead in the future.

Thank you!

Reply all
Reply to author
0 new messages