PIXI 位图文本错误 ( "can't read property 'size' of undefined" )

Question

我什至无法在不遇到错误的情况下从pixi.js或pixi.dev.js实例化BitmapText对象

pixi.dev.js:3688 Uncaught TypeError: Cannot read property 'size' of undefined

我的实现是他们的微不足道的例子

text = new PIXI.BitmapText('test', {font:'Arial'});

我已经将错误完全追溯到上面尝试的实例化。以下是pixi.dev.js源代码中的相关代码片段（错误发生在最后一行）。

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;
    ...

这是库中的错误，还是我做错了什么？

Answer 1

BitmapText 要求您先加载字体。您可以使用 BMFont 软件从 angelcode： http://www.angelcode.com/products/bmfont/创建字体

当您从BMFont导出字体时，您最终会得到一个看起来像纹理图集的png图像，以及一个xml文件。然后，您可以像这样加载位图字体：

var loader = new PIXI.AssetLoader(["MyBitmapFont.xml"]);
loader.onComplete = function()
{
    stage.addChild( new PIXI.BitmapText("SomeText", { font: "35px MyBitmapFont", align: "left"}));
};
loader.load();

PIXI 示例 10 是一个更完整的示例：https://github.com/GoodBoyDigital/pixi.js/tree/master/examples/example%2010%20-%20Text

您可以使用示例字体"desyrel"亲自尝试一下。