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

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.