BitmapFont from a SpriteSheet texture, possible resolution error

[Rob Gordon]

Greetings,

I'm new-ish to Pixi, but not new to HTML5 development (slowly making my way over from CreateJS, Flash before that, Director before that). This is also my first forum post.

I'm having an issue getting BitmapFonts properly created when resolution is > 1. I use bmGlyph to make the fonts in 2 resolutions. If I leave the fnt/png files separate and external, everything works as it should in both resolutions. If I include the png texture in my game's spritesheet (I use only 1), convert the fnt to a txt file (so it won't look for the png file on import) and then do this:

str = "AvenirLtStdMd";
xml = stringToXML(Loader.resources[str].data);
texture = mySpriteSheet.textures[str];
BitmapText.registerFont(xml, texture);

...it all works perfectly when resolution is 1. However, when resolution is 2 the text is not rendering correctly, and the error seems to be with the font creation (I can see chunks of other parts of the spritesheet...implying an offset error of some sort).

Do I need to manually make any adjustments to the fnt file content? To the texture? Might this be a bug?

There should be some significant performance advantages to having all bitmap assets, including fonts, in a single spritesheet.

Cheers,

r o b

[n8isjack]

I am seeing the same issue. The font shows well, but the graphics are awful. Then I change resolution and the graphics are great and the font isn't even showing the right glyph.

const theGame = new PIXI.Application({
  resizeTo: window,
  autoResize: true,
  transparent: true
});

theGame.loader
  .add("sprites", dataURL)
  .add("BlackFont", core_font_fnt)
  .load(() => {
    render(() => <Game app={theGame} />, appDiv);
  });

[ivan.popelyshev]

Strange that nno one answered yet. I dont have anything to say about the problem.

Please post a minimal demo then, maybe people will act on it

[Rob Gordon]

n8isjack - check out the resolution parameter of PIXI.application to help address the quality of the bitmaptext rendering

My issue is with respect to including font textures in the same spritesheet that holds other game assets. It works at standard resolution, but fails at 2x resolution. I could try to cook up a minimal demo if that would help.

[Rob Gordon]

Ivan - let me ask a different question...is it even true that there would be a performance gain by having the font texture in the main spritesheet? 'cause if there is not, then I'm content to leave the texture files as separate documents. Thank you!

[n8isjack]

@Rob Gordon that is so simple I feel like a fool. It worked great.

Using PIXI.settings.RESOLUTION broke the bitmaptext.

Below works great!

// This is where I did it when it broke...
// PIXI.settings.RESOLUTION = window.devicePixelRatio;
PIXI.utils.skipHello();

sprite_data.meta.image = sprite_png;
let data64 = btoa(JSON.stringify(sprite_data));
let dataURL = `data:text/json;base64,${data64}`;

const theGame = new PIXI.Application({
  resizeTo: window,
  autoResize: true,
  transparent: true,
  // moving resoltion to here worked!!!
  resolution: window.devicePixelRatio
});

 

[ivan.popelyshev]

Just now, Rob Gordon said:

Ivan - let me ask a different question...is it even true that there would be a performance gain by having the font texture in the main spritesheet? 'cause if there is not, then I'm content to leave the texture files as separate documents. Thank you!

No, I dont think so. Pixi has multitexturing, usually up to 16 textures can be handled in the same batch

[ivan.popelyshev]

OH, "PIXI.settings.RESOLUTION" ...

I could just post it when you made that thread, but I thought

1. its too easy 

2. someone else should post it

Sorry next time I'll post all ideas even if its not my area of expertise

[Rob Gordon]

n8isjack - how you implemented resolution is what I had intended (sorry - should have pasted in some sample code).

ivan - if that's the case then I think I'll abandon this issue for now and leave my fonts external. I never have more than about 6 per game, plus the main spritesheet. Well under 16 textures. That said, I suspect there may be a small bug that may be worth troubleshooting sometime in the future.

Cheers all!