loading series of base64 images with PIXI.loader

[Giedrius]

We are trying to load a series of data-URI images using base64 like this:

 PIXI.loader
            .add("c_fillT_S", "data:image/png;base64,iVBORw0...")
            .add("c_fillT_M", "data:image/png;base64,iVBORw...")
            .add("c_fillT_L", "data:image/png;base64,iVBORf...")
            .load(callback)

We need to embedd those small images, so I am not considering importing external files at this moment. I did some debugging and saw, that loader tries to extract file name and directory from that data-URI and of course it's not working. The app breaks not on assigning these textures to sprites but on rendering the scene. Am I doing something wrong? Thanks!

[ivan.popelyshev]

it should work. Can you give more info please?

[b10b]

Semi-related question .... do you know of a way to "dump" a file loader (a loader with a list of files) back to a pure-code loader like @Giedrius example (a loader with a list of data uris)?

Almost like a post-project packaging tool to facilitate bundling an entire game to a single file.  I realise this a crime against caching, but single-file is a requirement of some rich media standards.

[Giedrius]

for example we are loding this PNG file in base64:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC

while debugging I noticed that it goes into prepareUrl method which splits the dataURI into two parts:

1. directory: "image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////"
2. file: "9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC"

we used Texture.from("data:image/png;base64,..."); before and it worked fine.

 

It's strange, but when pasting this dataUri in pixi playground - it works just fine, so the problem is somewhere in my code!

[ivan.popelyshev]

that's interesting, I gave the link to guys in the know

[Giedrius]

I found the problem. The problem is that my loader loads textures and calls the callback function to create sprites long after the scene has loaded. And here I face problems - if I am creating a sprite from the loaded texture - I get an "Uncaught TypeError: Cannot read property 'x' of undefined" (it does not have defaultAnchor property). I've found out that I need to set empty texture first, like this:

this.item = new Sprite(Texture.EMPTY);
this.addChildAt(this.item, 0);

and then, if I try to set the loaded texture:

this.item.texture = this.settings.textures.c_fillT_S.texture;

It does set the texture, but as a result BatchRenderer elements array has plenty of "null" items and if try to render  that thing - I get the following errors:  

Uncaught TypeError: Cannot read property '0' of null  at BatchRenderer.packGeometry (core.es.js:11542) 

Uncaught TypeError: Cannot read property '_texture' of null at BatchRenderer.flush (core.es.js:11398)

[ivan.popelyshev]

Congratulations! You've found a real bug. We have EMPTY as default param, but because of the bug it actually crashes, yeah, defaultAnchor.

[ivan.popelyshev]

Wait.. you its not constructor problem. Did you pass something that is not "undefined" ,"null", did you pass just an object without "defaultAnchor" property?

[xerver]

A running playground that reproduces this problem would be really helpful for trying to track down what is going on here. You can choose the pixi version using the "settings" button to get your exact version.

[Giedrius]

Hi guys, I couldn't reproduce the problem in simple pixi app scenario. It works like magic in simple case. So the problem is somewhere in my current implementation.

@ivan.popelyshev I pass empty texture, just like I wrote before. Now I see that it has defaultAnchor property, so it's fine.

this.item = new Sprite(Texture.EMPTY);

then I add it to the container and force render - all fine. Then I set the real texture, as base64, loaded with PIXI.loader:

this.item.texture = this.settings.textures.c_fillT_S.texture;
this.item.anchor.set(0.5);
this.item.scale.set(scale_factor);
this.item.tint = gray100;

do some tweaking and force render again and it breaks in packGeometry method:

var uvs = element.uvs;  <--- uvs is  null. (element is Sprite)
float32View[index++] = uvs;   <-- Cannot read property 0 of null

That is all I can tell for now, will update once I will find out!