Manually loading bitmap fonts and images

[TheMaskedFox]

I'm looking at switching away from CreateJS, but I've got one snag I need to resolve before I can feel comfortable making the switch.

 

I build my JS applications using Webpack, and one of the features I take advantage of is asset bundling.  Webpack will bundle things like images or text files into JS files that can optionally be asynchronously fetched.  Depending on my target platform, I can either release an all-in-one JS file, or I can release a main file with bundles that can be loaded asynchronously when needed (such as when loading the level they're used in).  What this means is that my app already has data urls for images and raw text or parsed DOM data for things like XML files.  I don't need PIXI to make requests for these, but I do need PIXI to use that data.

 

This leaves me with two questions:

 

CreateJS will let me create Image objects from data urls.  Is PIXI able to accept data urls when creating Textures or when making fromImage calls?

 

CreateJS exposes a BitmapFont object.  I can pass a png and fnt pair and get back an assembled bitmap font.  I don't see an equivalent in PIXI.  It looks like the only way to load a font is using PIXIs loader, but that doesn't work for me because my font assets are already in the browser.  I don't need PIXI to make an XHR request to fetch the files.  I just need it to accept the data I've already loaded and create the font.  Is there a way to do this?

 

Thanks.

 

[xerver]

Is PIXI able to accept data urls when creating Textures or when making fromImage calls?

 

Yes, of course. I recommend using the loader though, which is more full features and also supports data urls.

 

 

 

It looks like the only way to load a font is using PIXIs loader, but that doesn't work for me because my font assets are already in the browser.

 

That's not true, anything the loader does you can do manually. Just take a look at the bitmap font parser:

 

https://github.com/GoodBoyDigital/pixi.js/blob/master/src/loaders/bitmapFontParser.js

 

It is generally a better idea to use the parser so you don't repeat the code though. I don't understand why you think you can't use the loader when the data is already in the browser. Just pass data urls, or let the browser do its caching. It won't repeat already cached XHR requests (unless there is something like etag that makes it).

 

 

 

I don't need PIXI to make an XHR request to fetch the files.  I just need it to accept the data I've already loaded and create the font.  Is there a way to do this?

 

If you have data urls then just pass them in and the loader will parse them up for you. If you don't then when the loader does and XHR request the browser will just hand cached data to the loader, and not make the request; so it isn't a big deal.

[TheMaskedFox]

 

I don't understand why you think you can't use the loader when the data is already in the browser. Just pass data urls, or let the browser do its caching. It won't repeat already cached XHR requests (unless there is something like etag that makes it).

 

I think what I think because the PIXI docs don't say otherwise (and don't appear to document the individual loaders at all.)  I appreciate the help here.  Your response should give me enough to go on for some preliminary tests.  Thanks.

[xerver]

I think what I think because the PIXI docs don't say otherwise (and don't appear to document the individual loaders at all.)  I appreciate the help here.  Your response should give me enough to go on for some preliminary tests.  Thanks.

PIXI doesn't document browser behavior O.o the loader *will* create a XMLHttpRequest object and try to send it, it is up to the browser to decide if a HTTP request needs to happen. For data-uris, obviously it doesn't.

The loader is pretty well documented in source:

https://github.com/englercj/resource-loader

I tried to put comments everywhere so it should be easy to figure things out. If you have any other questions feel free to post here or on GitHub.

[mcolman]

this is kind of relevant to the problem I'm having now. I'm trying to load bitmap text and I'm using webpack. This means that webpack changes the file names completely, so I don't want pixi to try to automatically parse bitmap text when I load the xml file. Is this possible? How are ppl currently loading the xml file in this case?

Thanks!

[botmaster]

You can load anything with AJAX, the pixi loader is here only for convenience, if it doesn't fit what you need for a case then load your assets yourself using AJAX, xml, json, pictures, webservices, rest, soap, ect .... No limit what you can load with AJAX. Either write the whole code yourself or use jQuery.