Comments (11)
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.
from pixijs.
(i.e. save it to a Blob
?)
from pixijs.
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?
from pixijs.
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.)
from pixijs.
I'm talking ...dump it in localStorage kind of territory.
from pixijs.
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)
from pixijs.
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.
from pixijs.
Rad, thanks for the example!
from pixijs.
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
from pixijs.
Here is what is coming through as the url
/ src
for the custom loader:
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:
from pixijs.
Related? #5199 (comment)
from pixijs.
Related Issues (20)
- V8 Bug! HOT 2
- Bug: Pixi 7 errors: Argument of type '...' is not assignable to parameter of type 'DisplayObject' HOT 9
- Bug: Remove filter again (container.filters = null) throws error
- Bug: getLocalBounds doesn't return correct values after removing a child
- Bug: Pixi 8 - WebGL: INVALID_ENUM: activeTexture: texture unit out of range
- Bug: GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size HOT 1
- Feature request: Drag events
- Bug: Can't `await` `Application.init` from top level if bundled using vite HOT 2
- Feature Request: Is it possible to split a texture after exceeding the maximum texture size? HOT 1
- Bug: V8 graphics tint applied in a weird way HOT 3
- Bug: V8 MSDF text rendering quality
- Bug: npm run build: error TS2503: Cannot find namespace 'PixiMixins'
- Bug: Error: Unable to auto-detect a suitable renderer.
- Bug: too many active WebGL contexts on this page Safari HOT 1
- Bug: use round cap,blendmode not work
- Bug: CPU100% in OpenGL mode on a big map when computer does not have GPU even the graph is static HOT 2
- Bug: Error occurs when uninstalling a bitmap font with characters containing a space
- Bug: When Application is proxied by Vue 3(ref), an error occurs when rendering graphics
- Bug: about PIXI.Assets:imageResource can not loaded as canvasSource in ios v14.5,perhaps some old ios version
- Feature-Request: V8 support sub-Textures when creating BitmapFont objects HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixijs.