bitmaptext from spritesheet

[sashastg]

Hello,

i have a custom font. right now its separate 10 png files (0.png,1.png,2.png,3,4,5,6,7,8,9) (only numbers);

i have texturepacker which can make spritesheet with this numbers.

i had tried bmGlyth and ShoeBox - but no success.

question: how i can use my font in the game?

please help, spent around 4 hours for find solution

 

 

[ivan.popelyshev]

Quote

i have a custom font. right now its separate 10 png files (0.png,1.png,2.png,3,4,5,6,7,8,9) (only numbers);

Ok.

Quote

i have texturepacker which can make spritesheet with this numbers.

Ok.

Quote

question: how i can use my font in the game?

What is the problem?

[sashastg]

8 minutes ago, ivan.popelyshev said:

 

8 minutes ago, ivan.popelyshev said:

What is the problem?

i cant see how i can make BitmapText from spritesheet.

i see that BitmapText and Text  requires   .fnt   format file correct?

[ivan.popelyshev]

Yep, you have to create "font.fnt", and parser supports only one spritesheet. There is an old topic:

 

[ivan.popelyshev]

Look at how parser creates that font (https://github.com/pixijs/pixi.js/blob/master/src/loaders/bitmapFontParser.js), Im sure you can use that code to create font with your own format that supports multiple spritesheets. pixiv4 will have multi-texturing, and we can make better bitmap font support.

[ivan.popelyshev]

Can you please check for me that http://www.angelcode.com/products/bmfont/ can export multiple spritesheets from TTF fonts? Please, I dont want to do that task alone  I can help with integrating new stuff in pixi, but I cant code it from scratch without some input

[sashastg]

1 minute ago, ivan.popelyshev said:

Can you please check for me that http://www.angelcode.com/products/bmfont/ can export multiple spritesheets from TTF fonts? Please, I dont want to do that task alone  I can help with integrating new stuff in pixi, but I cant code it from scratch without some input

sorry. i dont have PC.

 

[sashastg]

4 minutes ago, ivan.popelyshev said:

Look at how parser creates that font (https://github.com/pixijs/pixi.js/blob/master/src/loaders/bitmapFontParser.js), Im sure you can use that code to create font with your own format that supports multiple spritesheets. pixiv4 will have multi-texturing, and we can make better bitmap font support.

 

i dont need multi-texturing. or something more.

i just want to use my font inside game. just show scores.

i have pre-rendered png files for every number (0.png   1.png etc...)

i can make spritesheet. and after load it (same as for animations).

but for using BitmapText or Text   i need have a  font name, right?

so i mean is there is any way to go without .fnt   file ?

bcz i tried many different soft to generate fnt  and all of them allow to create it  but i cant use  .png files which already there.

its easy works in createjs  but some why so big problem in pixijs.

 

[ivan.popelyshev]

Ok, sorry, I didnt understand your question. 

1) create one image that has all numbers from 0 to 9.

2) use that java tool I mentioned to create fnt file.

Quote

its easy works in createjs  but some why so big problem in pixijs.

PIXI is something middle between canvas 2d engine and openGL one. GL engines accept fonts that have only one spritesheets.

Some things (ParticleContainer, BitmapFont) can work with only one texture, thats the way of PIXI. I thought your font is big and cant be made into one spritesheet, but its not the case. 

[sashastg]

3 minutes ago, ivan.popelyshev said:

Ok, sorry, I didnt understand your question. 

1) create one image that has all numbers from 0 to 9.

2) use that java tool I mentioned to create fnt file.

PIXI is something middle between canvas 2d engine and openGL one. GL engines accept fonts that have only one spritesheets.

Some things (ParticleContainer, BitmapFont) can work with only one texture, thats the way of PIXI. I thought your font is big and cant be made into one spritesheet, but its not the case. 

i made .fnt  file using http://kvazars.com/littera/

i had named it customFont1.fnt

it has:

info face=customFont1 size=72 bold=0 italic=0 charset= unicode= stretchH=100 smooth=1 aa=1 padding=2,2,2,2 spacing=0,0 outline=0
common lineHeight=72 base=47 scaleW=147 scaleH=373 pages=1 packed=0
page id=0 file="customFont1.png"
chars count=10
char id=48 x=2 y=2 width=45 height=61 xoffset=0 yoffset=0 xadvance=40 page=0 chnl=15
char id=49 x=2 y=65 width=41 height=58 xoffset=-2 yoffset=1 xadvance=34 page=0 chnl=15
char id=50 x=2 y=125 width=44 height=59 xoffset=0 yoffset=0 xadvance=39 page=0 chnl=15
char id=51 x=2 y=186 width=49 height=60 xoffset=-1 yoffset=0 xadvance=43 page=0 chnl=15
char id=52 x=48 y=65 width=46 height=59 xoffset=0 yoffset=1 xadvance=43 page=0 chnl=15
char id=53 x=49 y=2 width=50 height=60 xoffset=-2 yoffset=1 xadvance=42 page=0 chnl=15
char id=54 x=2 y=248 width=48 height=60 xoffset=1 yoffset=1 xadvance=44 page=0 chnl=15
char id=55 x=48 y=126 width=47 height=58 xoffset=0 yoffset=1 xadvance=41 page=0 chnl=15
char id=56 x=2 y=310 width=47 height=61 xoffset=-2 yoffset=0 xadvance=39 page=0 chnl=15
char id=57 x=96 y=64 width=49 height=60 xoffset=-2 yoffset=0 xadvance=43 page=0 chnl=15
char id=32 x=0 y=0 width=0 height=0 xoffset=-2 yoffset=0 xadvance=23 page=0 chnl=15

 

loader = new PIXI.loaders.Loader();
loader.add("customFont", "images/customFont1.fnt");

loader.load();

 

fnt loads, but .png file not loads automaticaly.  (customFont1.png  locates in images folder) but i tried root folder also.

and i got error:

Uncaught TypeError: Cannot read property 'size' of undefined     on pixi.js:19746

somewhy customFont1.png  not loads.

i am using Pixi 3.0.9

looks like bitmap parser not called at all.

 

 

 

[ivan.popelyshev]

Are you sure that's the same format as PIXI is using? According to https://github.com/pixijs/pixi.js/blob/master/src/loaders/bitmapFontParser.js it must be XML-based. Can you please use that java tool?

Of course, you can write your own parser for any format you want

[ivan.popelyshev]

Instead of creating .fnt file, you can also put your data to " extras.BitmapText.fonts["myfont"] = myData; " . Which data is needed can be determined by looking into https://github.com/pixijs/pixi.js/blob/master/src/loaders/bitmapFontParser.js and https://github.com/pixijs/pixi.js/blob/master/src/extras/BitmapText.js

I'm looking into these files for the first time, actually

[sashastg]

2 minutes ago, ivan.popelyshev said:

Are you sure that's the same format as PIXI is using? According to https://github.com/pixijs/pixi.js/blob/master/src/loaders/bitmapFontParser.js it must be XML-based. Can you please use that java tool?

Of course, you can write your own parser for any format you want

problem was solved.

in http://kvazars.com/littera/     needs to be selected  XML  (fnt)  format.

 

 

[ivan.popelyshev]

1 minute ago, sashastg said:

problem was solved.

in http://kvazars.com/littera/     needs to be selected  XML  (fnt)  format.

HUZZAH! Can you please mark your post as an answer? Thank you.

[sashastg]

2 minutes ago, ivan.popelyshev said:

Instead of creating .fnt file, you can also put your data to " extras.BitmapText.fonts["myfont"] = myData; " . Which data is needed can be determined by looking into https://github.com/pixijs/pixi.js/blob/master/src/loaders/bitmapFontParser.js and https://github.com/pixijs/pixi.js/blob/master/src/extras/BitmapText.js

I'm looking into these files for the first time, actually

thanks. now i am clear.