Magia

Pixi.Text v5.1.1 doesn't work

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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/

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.