Sign in to follow this  
Giedrius

loading series of base64 images with PIXI.loader

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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!

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.