Skip to content

How to generate and use Bitmap Font in melonJS

Jump to bottom
Olivier Biot edited this page Jun 9, 2016 · 12 revisions

TBD - see ticket #279

convert your truetype font

The first step is to convert your .TTF fine into a .PNG (the actual texture) and a .FNT (the font definition file) that can be later used in melonJS. As you can see below (in the tools section), there are several converters available, but for its ease of use (and also because it's free) we have been using Littera sucessfully on our side and therefore currently recommend that one. We won't go here into exhaustive details on how to use any of these tools, but make sure you respect the following points when configuring it :

  • name your font using the original TTF font name
  • use the TXT (.fnt) format for the output, as this is the only format that can be directly used by our loader.
  • make sure to use the right character set when exporting your font (like "basic" for example if you need a basic set with both characters and numbers).
  • make sure to use a "power of 2" image size
  • melonJS only supports 1 page (so one .PNG per .FNT file), so if your characters do not fit into the current PNG, do rather increase the size instead of forcing the tool to generate a second one.

preload your bitmap font

pretty straightforward here, assuming that the font name is PressStart2P, you just need to add the following line to your existing assset lists :

{ name: "PressStart2P", type:"image", src: "data/fnt/PressStart2P.png" },
{ name: "PressStart2P", type:"binary", src: "data/fnt/PressStart2P.fnt"},

be careful here, as the .FNT file type need to be set to binary.

using your bitmap font

quite easy as well, as all we need is to instantiante a me.BitmapFont object, and specify the two files we previously loaaded :

this.font = new me.BitmapFont(me.loader.getBinary('PressStart2P'), me.loader.getImage('PressStart2P'));

and then we can just use as follow :

this.font.draw (context, "myText", this.pos.x, this.pos.y);

for more details on how to change alignements, size and others, you can refer to the documentation here

Available Tools and ressources

Tools

Online

OSX

Windows

Crossplatform

Font Resources

Clone this wiki locally