Pixi.Text v5.1.1 doesn't work

[Magia]

Hi all
I use Pixi  5.1.1
I wanna learn how to use BitmapFont, but I have some promlem with it.
I use example from 

import desyrel from "./desyrel.xml";

 

/* other code */

 

app.loader

   .add('desyrel', desyrel)

   .load(onAssetsLoaded);

 

function onAssetsLoaded() {

   const bitmapFontText = new PIXI.BitmapText('bitmap fonts are supported!\nWoo yay!', { font: '55px Desyrel', align: 'left' });

 

   bitmapFontText.x = 50;

   bitmapFontText.y = 200;

 

   container.addChild(bitmapFontText);

}

 (font desyrel from examples too)

And I get this error
Error message: 

Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 1 + 38 = 39 > 1 and Y: 1 + 74 = 75 > 1
    at Texture.prototypeAccessors.frame.set (core.es.js:3280)
    at new Texture (core.es.js:2962)
    at Function.registerFont (text-bitmap.es.js:611)
    at Function.parse (text-bitmap.es.js:652)
    at completed (text-bitmap.es.js:736)
    at MiniSignal.dispatch (mini-signals.js:111)
    at resource-loader.esm.js:2257
    at next (resource-loader.esm.js:47)
    at Loader.use (spritesheet.es.js:307)
    at resource-loader.esm.js:2255
    at resource-loader.esm.js:55

Does someone know what it can be and how to fix it?

[ivan.popelyshev]

That's the third time someone tried to just import random stuff and put it into loader.

https://pixijs.io/examples/#/text/bitmap-text.js doesn't have any imports in the examples. File name and file contents are different things, and even if loader could take file contents in "add", its not clear what exactly is returned by that import. Is that string or some strange object?

Two ways to fix that:

1. Remove import, use loader like in the example.

2. Check that xml file is somehow imported, then look if its possible to pass it to https://github.com/pixijs/pixi.js/blob/dev/packages/text-bitmap/src/BitmapFontLoader.js without . Maybe you'll have to copy parser code somewhere else and call it directly, without loader. We did that for Spritesheets before, but BitmapText still is embedded into loader and cant be used directly.

3. Put a feature request to  https://github.com/englercj/resource-loader or https://github.com/pixijs/pixi.js/ to allow passing info from import directly to the loader. I estimate it will take weeks.

[ivan.popelyshev]

I can set up a project in codesandbox if you are really stuck and dont understand how https://pixijs.io/examples/#/text/bitmap-text.js can be converted to project form.

[Magia]

10 hours ago, ivan.popelyshev said:

I can set up a project in codesandbox if you are really stuck and dont understand how https://pixijs.io/examples/#/text/bitmap-text.js can be converted to project form.

Oh, it will be very helpful!
And, maybe is there some example how to use PIXI.BitmapFontLoader with BitMap Text (one will be enough)?

[ivan.popelyshev]

Found it here: https://github.com/pixijs/pixi.js/wiki/v4-Resources

https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/

the only difference is that "BitmapText" is not in extras anymore.

[ZYandu]

import myBitmapTextFont from "myFontsFolder/myBitmapTextFont.fnt";

let loader = PIXI.Loader.shared;
loader.add([{name: "bitmapTextFont", url: myBitmapTextFont}])
      .load(setup);

function setup (loader, resources){
     let text = new PIXI.BitmapText("abcdefg", {
         font: "50px Arial", //Arial is the face attribute located inside the .fnt file
         align: 'center'
     });
}

Here's my quick code example made with a custom .fnt file from bmGlyph. You really need to follow the instructions closely in the instructions link Ivan shared! ? https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/

[Magia]

On 8/5/2019 at 10:15 PM, ivan.popelyshev said:

Found it here: https://github.com/pixijs/pixi.js/wiki/v4-Resources

https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/

the only difference is that "BitmapText" is not in extras anymore.

 

On 8/5/2019 at 11:13 PM, ZYandu said:

import myBitmapTextFont from "myFontsFolder/myBitmapTextFont.fnt";

let loader = PIXI.Loader.shared;
loader.add([{name: "bitmapTextFont", url: myBitmapTextFont}])
      .load(setup);

function setup (loader, resources){
     let text = new PIXI.BitmapText("abcdefg", {
         font: "50px Arial", //Arial is the face attribute located inside the .fnt file
         align: 'center'
     });
}

Here's my quick code example made with a custom .fnt file from bmGlyph. You really need to follow the instructions closely in the instructions link Ivan shared! ? https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/

Thanks

[ivan.popelyshev]

Welcome to our forum!