How to make bitmap fonts from regular fonts?

[toto88x]

Hi,

 

In order to use cocoonJS with my Phaser game, I need to convert all my regular fonts (like arial.ttf) into bitmap fonts. Otherwise it doesn't work.

 

I've found a lot of software that lets you create/edit bitmap fonts, but none that:

- Take a .ttf font as an input

- And output a .png + .xml bimap font

 

Do you know how I can do that? Or where I can find directly a .png + .xml of an arial font?

 

Thanks! :-)

[plicatibu]

Use the free online bitmap font generator http://kvazars.com/littera/

[toto88x]

Thanks, it's a good tool! But the output format is .fnt, not .xml

[Miyavi]

Thanks, it's a good tool! But the output format is .fnt, not .xml

According to the documentation, a .fnt file is also allowed.

 

http://docs.phaser.io/Phaser.Loader.html#toc27

 

EDIT: Okay, and indeed, I just tried it (I was having problems with other exporters), and this one seems to work fine.

[dnassler]

Hi, I tried using the tool above to create a bitmap font from a downloaded web font from google. The tool allows you to export the resulting bitmap font as a zip file. I unzipped the zip file which resulted in 2 files. One of them is font.png and the other is font.fnt.  I tried to load the bitmap font using the appropriate command in the preload function of the game as follows:

 

game.load.bitmapFont('PressStart2P','assets/fonts/fontBitmap_Press_Start_2P/font.png', 'assets/fonts/fontBitmap_Press_Start_2P/font.fnt');

then in the create part of the game I tried to create a style var:

 

var style = { font: "50px PressStart2P", fill: "#ff0044", align: "center" };gameOverlayText = game.add.bitmapText( game.world.centerX, game.world.centerY, "test", style );

When I run it I get a browser error at the line that is adding the bitmapText... So how did you guys get it to work? What commands am I not doing properly? 

 

 

 

[mariogarranz]

 

Hi, I tried using the tool above to create a bitmap font from a downloaded web font from google. The tool allows you to export the resulting bitmap font as a zip file. I unzipped the zip file which resulted in 2 files. One of them is font.png and the other is font.fnt.  I tried to load the bitmap font using the appropriate command in the preload function of the game as follows:

 

game.load.bitmapFont('PressStart2P','assets/fonts/fontBitmap_Press_Start_2P/font.png', 'assets/fonts/fontBitmap_Press_Start_2P/font.fnt');

then in the create part of the game I tried to create a style var:

 

var style = { font: "50px PressStart2P", fill: "#ff0044", align: "center" };gameOverlayText = game.add.bitmapText( game.world.centerX, game.world.centerY, "test", style );

When I run it I get a browser error at the line that is adding the bitmapText... So how did you guys get it to work? What commands am I not doing properly? 

 

 

 

 

 

Could you provide more information about the error?

One thing I noticed when using BitmapText is that the name of the font you have to use in the style has to be the same as the name of the font in the XML (.fnt in your case) file. 

Discovered that after doing 2 different Bitmap Fonts with the same TTF file and seeing Phaser totally ignored the name I was giving to the BitmapFont in the loader and displayed both with the same font.

[jflowers45]

The name not only has to match but is case sensitive, that one had me going for a while too

[dnassler]

The javascript error reported when the call to game.add.bitmapText is made was:

 

Uncaught TypeError: Cannot read property 'size' of undefined

 

Which probably just means that the font was not really loaded by my game.load.bitmapFont command... Unfortunately without reporting an error at that point as I would hope. 

 

Anyways! After trial and error, exhaustively, wasting too much time doing so... I have figured out the problem(s)...

 

First of all that Bitmap font creation tool from the link given above exports the XML file with a ".fnt" file extension. Which is not good.  So I modified the file extension to be ".xml" since it was an XML file.

 

Second of all as was stated by others above, the "key" specified in the game.load.bitmapFont method is not used for anything else... (i.e. not to be used when specifying the font style)

 

Thirdly, the font that I was creating a bitmap for had a name of "Press Start 2P". Notice the spaces in the name? Well that turned out to be another issue. I had to manually change the font name as specified in the font.xml file so that it was "PressStart2P".

 

Fourthly, I had to make sure that the font style used when calling the "game.add.bitmapText" method referred to the font as "PressStart2P" which matched exactly the name of the font that is in the xml and which is what I had to change it to (after removing the spaces in the name).

 

Wow. I knew it would be a hassle and it was! But at least I've got it finally!!!!! This should be in the example documentation comments.

 

EDIT:

Another issue or at least difference between setting the value of the text when the text is bitmap text vs. non-bitmap text is:

When calling: 

textGameObject.setText( value )

where "textGameObject" is a bitmapText object created with something like:

textGameObject = game.add.bitmapText(x,y,"",style);

Make sure that the "value" is a string otherwise the setText method does not seem to work. So if for example your setText method was updating a bitmapText object that holds the player's score (i.e. a number) convert the score to text before passing it to the setText method. Note that this differs from the behaviour of setText when the textGameObject is a non-bitmapText object.

[samerce]

Hey guys, you seem to be having trouble getting the fonts you want and getting them exported in the formats you need.

 

Glyphite.com imports Google's webfonts for easy access or you can pick any font that's already on your computer. You can then tweak almost anything about the font and export it in a number of different formats and extensions (including .fnt and .xml). And it runs in your browser, so you don't have to download anything. Hope this helps! (Disclosure: I work for Glyphite.com)

[MichaelD]

I played with it for a little while, it is surely a very nice tool to have. Good job for making it!

[zdSharkware]

Is there one that takes OpenType font input? I also need bitmap fonts and but the fonts I want are all OpenType.