How to use bitmap fonts in phaser?

[The_dude8080]

Hello. I have never used external fonts in phaser. I have no idea on how to use fonts I find over the internet. I would like to write with this font. I just don't get it how to do it. The file you download is a png.? Can someone help me? I searched but didn't understand what to do...

[CharlesCraft50]

As with all load operations the first parameter is a unique key, which must be unique between all image files.
Next is the bitmap font file itself, in this case newFont.png
Finally is the path to the XML file that goes with the font.

game.load.bitmapFont('newFont', 'assets/fonts/bitmapFonts/newFont.png', 'assets/fonts/bitmapFonts/newFont.xml');

Note that the XML file should be saved with UTF-8 encoding or some browsers (such as Firefox) won't load it.
You can use this tool to create Bitmap Fonts and the XML file.
If you are on windows you can use this free app: BMFont: http://www.angelcode.com/products/bmfont/
On OS X you can use this Glyph Designer: http://www.71squared.com/en/glyphdesigner

To Load:

text = game.add.bitmapText(200, 100, 'newFont','Bitmap Fonts!',64);

 

Edited November 23, 2016 by CharlesCraft50
Fixed

[samme]

Hi dude, it needs a font definition file (either .fnt or .xml). Someone added a comment with the contents of a .fnt file. Trying saving that as boxy_bold_font.fnt.

[menthos984]

@CharlesCraft50 i have used the linked you gave (BMFont: http://www.angelcode.com/products/bmfont/) but it does not generate an .XML file only a .PNG and .FNT files.

[jeffmoretti]

You can try renaming the file from a .fnt file to a .xml file, combined with making sure the Output is XML from BMFont generator (there is a radio button setting for this at the bottom of the Export Options view).

 

However, alas, the reason I am here is that even with this tinkering I find my fonts do not appear correctly for BitmapText objects :(  There must be some kind of output error on the output xml file....I will post back though if I find a solution otherwise