How to win at PIXI.extras.BitmapText ?

[tonyw]

hi,

I'm trying to get bitmap fonts working, with little success. Now, the font that the pixi example uses, does work, e.g. -

https://github.com/pixijs/examples/blob/gh-pages/required/assets/desyrel.xml demo page - http://pixijs.github.io/examples/#/demos/text-demo.js

Bit whatever I output myself, from https://www.bmglyph.com/ as recommended here - http://pixijs.download/release/docs/PIXI.extras.BitmapText.html - does not work, failing with - 

TypeError: undefined is not an object (evaluating 'BitmapText.fonts[this._font.name].size')

So, I'm wondering, what exactly did they output the example font, desyrel.xml, from? I'm using the Mac exporter that they recommend. Maybe that actually doesn't work, and only the windows exporter works?

Um, kinda stuck. Any ideas? 

thanks, Tony

[alex_h]

There's an online bitmap font tool made in flash that is a bit easier to use

http://kvazars.com/littera/

you could give that a try?

[tonyw]

4 hours ago, alex_h said:

There's an online bitmap font tool made in flash that is a bit easier to use

http://kvazars.com/littera/

you could give that a try?

bmglyph is easy to use, but its output doesn't work  I might report this to pixi as their instructions are wrong.

But littera does work! Yay. Thanks for the link   

[bubamara]

which format are you using? sparrow/starling is the correct one

[alex_h]

With bmglyph when I last used it (ages ago) I had to do a lot of trial and error to get it to output the png in the correct format, ie white characters on transparent background.

[tonyw]

@bubamara you're right, Sparrow does work. I must've screwed something else up when I tested that. *takes a bow*

[demiculus]

I couldn't get bitmaps to work. I always got errors like `Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 54 + 0 = 54 > 1 and Y: 50 + 0 = 50 > 1`

I'm using the Arial  font (really simple). I'm using http://kvazars.com/littera/

• I tried Pack Method 1 through 7
• I tried just digits, just lowercase etc.
• I tried different paddings
• I tried different fontsizes
• I tried different strokes
• I tried different canvas sizes
• I tried the same with bmglyph 

But none seem to work, what am I missing? 

[demiculus]

Nevermind, I'm a total noob.

I didn't realize I had to use the .fnt & .png files at the same time. I was just using .fnt file. Also for my next problem deusprogrammer here has came across it and the same method worked for me too: https://github.com/pixijs/pixi.js/issues/4293

[adammarcwilliams]

I had some similar problems with this yesterday so I wrote up the workflow I found to work step by step.

Hope this helps anyone else who finds this thread in the future.

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

[ivan.popelyshev]

2 hours ago, adammarcwilliams said:

I had some similar problems with this yesterday so I wrote up the workflow I found to work step by step.

Hope this helps anyone else who finds this thread in the future.

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

Added to https://github.com/pixijs/pixi.js/wiki/v4-Resources , and i'll ask owner of pixi-awesome to add there too

If you post it as separate thread, i'll pin it

[mishawaogn]

On 3/1/2019 at 9:52 AM, adammarcwilliams said:

I had some similar problems with this yesterday so I wrote up the workflow I found to work step by step.

Hope this helps anyone else who finds this thread in the future.

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

Thank you Adam! Would you be willing to share some example code of a barebones working example (if it's easy)?