Rob Gordon

BitmapFont from a SpriteSheet texture, possible resolution error

Recommended Posts

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

Share this post


Link to post
Share on other sites

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);
  });

Screen Shot 2020-04-02 at 07.35.00.png

Screen Shot 2020-04-02 at 07.35.30.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

@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
});

 

Share this post


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

Share this post


Link to post
Share on other sites

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!

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.