PIXI BitmapText bug ("can't read property 'size' of undefined") - text

Question

I can't even instantiate a BitmapText object from either pixi.js or pixi.dev.js without encountering the error
pixi.dev.js:3688 Uncaught TypeError: Cannot read property 'size' of undefined
My implementation is their trivial example
text = new PIXI.BitmapText('test', {font:'Arial'});
I've traced the error exactly to the attempted instantiation above.
Here is the relevant snippet from the pixi.dev.js source code (with the error occurring on the last line).
PIXI.BitmapText.prototype.updateText = function()
{
var data = PIXI.BitmapText.fonts[this.fontName];
var pos = new PIXI.Point();
var prevCharCode = null;
var chars = [];
var maxLineWidth = 0;
var lineWidths = [];
var line = 0;
var scale = this.fontSize / data.size;
...
Is this a bug in the library, or am I doing something wrong?

Answer 1

BitmapText requires you to load a font first. You can create a font using the BMFont software from angelcode: http://www.angelcode.com/products/bmfont/
When you export your font from BMFont, you end up with a png image that looks like a Texture Atlas, plus an xml file.
You can then load your BitmapFont like this:
var loader = new PIXI.AssetLoader(["MyBitmapFont.xml"]);
loader.onComplete = function()
{
stage.addChild( new PIXI.BitmapText("SomeText", { font: "35px MyBitmapFont", align: "left"}));
};
loader.load();
PIXI Example 10 is a more complete example:
https://github.com/GoodBoyDigital/pixi.js/tree/master/examples/example%2010%20-%20Text
You can use the example font, "desyrel" to try it out for yourself.