Feature Request: caching bitmap fonts in client? about pixijs

[bigtimebuddy]

Oh, that makes much more sense. Yeah, a dump in localStorage is probably it though there's a 5mb limit you'll likely bump up against. 20 fonts, depending on the size might approach that limit. Pixi doesn't have an easy way to extract the font, so you might need to add something there. Another approach is to use @pixi/node to generate and cache fonts server-side. Which could give you the right mix of on-demand but easy-ish request.

[reececomo]

(i.e. save it to a Blob?)

[bigtimebuddy]

I'm confused by this. On-the-fly BitmapFont objects are cached when you create them. Maybe I don't understand what you're asking?

[reececomo]

Fair, I thought it would be more obvious given the context provided above (preloading/loading files), but I can see why "caching" is a dangerous word around here 😆

I'm talking about caching the generated texture in the browser across browser page requests. As you know, when we provide an image or .fnt file those are cached on the client (checked against a backend, and skipped on a 304 Not Modified header). This would be some mechanism to save the texture/not generate it again if unchanged.

Same question/feature request could apply for any large generated textures that should ideally be persisted semi-permanently.

---

alternative would be something we could run programmatically during webpack?

// fonts.js
const myFontStyle = new PIXI.BitmapFont(/* ... */);
myFontStyle.save('MyFont1.fnt');

No major issue if not - just trying to avoid manage ~20 .fnt files x 6 language scripts (latin, cyrillic, arabic, etc.)

[reececomo]

I'm talking ...dump it in localStorage kind of territory.

[reececomo]

Nice!

Pixi doesn't have an easy way to extract the font, so you might need to add something there.

I guess that's the main bit - if only there was some fast way to dump the texture + "spritesheet json" to a .fnt file (or as a json/blob)

[bigtimebuddy]

Here's an example @reececomo: https://jsfiddle.net/bigtimebuddy/jzL5814f/

Essentially, you take all the data from the BitmapFont object and convert it into an XML that could be used later with BitampFont.install.

Hope that helps.

I'm going to close this issue as this is likely not something we are going to add to Pixi. I suggest you develop it as a plugin for the handful of folks that might want to export their dynamic fonts.

[reececomo]

Rad, thanks for the example!

[reececomo]

Thanks again for the example @bigtimebuddy, it's looking promising for bulk exports (across languages!).

Running into two issues when trying to load back the generated .fnt files, it's failing to load the base64'd data.

Steps to reproduce:

Example file: example.fnt

Assets.load('assets/font/bitmap/example.fnt'); // paraphrasing, but its roughly this

What's going wrong?

• For some reason the .fnt files try to load assets relative to the .fnt file: "http://localhost:8089/assets/font/bitmap/<DATA_BLOB>"
• When I implemented a custom loader, it fails to load the base64'd data url.

❌ Custom loader:

I thought this might be solved with a custom loader, but the base64'd data that the custom loader receives is different than what's exported/in the file. URL encoding maybe?

const customLoader = {
  extension: ExtensionType.LoadParser,
  name: 'myFontDataBlobLoader',
  test: (url: string) => url.includes('assets/font/bitmap/data:image/png;base64'),
  async load(src: string) {
    return new Promise((resolve, reject) => {
      const dataUrl = src.split('assets/font/bitmap/')[1]!; // Get just the data url

      const img = new Image();
      img.crossOrigin = 'anonymous';
      img.src = dataUrl;
      img.onerror = reject;
      img.onload = () => resolve(Texture.from(img));
    });
  },
};

extensions.add(customLoader);

Apologies if this is really obvious, we're hitting niche territory

[reececomo]

Here is what is coming through as the url / src for the custom loader:

• url-example1.txt

Differences summary: "It starts the same, but it diverges about halfway in"

It starts the same, but it diverges about halfway in:

Resulting image:

✅ Original export:

❌ URL received by the loader:

[reececomo]

Related? #5199 (comment)