Jump to content

Loading atlases and spine animations from base64 assets.


Recommended Posts

Hi everyone,

I am making a project which will have assets inlined as base64 streams, however I am stuck don't know how to load them. Thing is, that I use webpack to inline all of the assets into single html file and I can use them by importing at the top of my js file, like so

import atlas_texture from 'assets/atlas.png;
import atlas_json from 'assets/atlas.json;

I can load individual png images, however the issue is that because I get my assets in base64 format, I don't know how I can feed them to PIXI.Loader so it can load them and make textures from json. When I try to load the atlas, I do the following

import atlas_texture from 'assets/atlas.png;
import atlas_json from 'assets/atlas.json;

loader.add(atlas_json).load(() => {
	console.log("yey it's loaded")

but I get following error

Uncaught Error: No url passed to add resource to loader.
    add resource-loader.esm.js:1976
    App index.ts:63
    onload (index):37

Because I can't pass json, I have that issue both when trying to laod atlas spritesheets and also when I try to load spine animations.

After a long research I found some workaround for loading altas spritesheets, however it is not perfect and it doesn't solve the issue with loading spine.

Code is following:

import atlas_texture from 'assets/atlas.png;
import atlas_json from 'assets/atlas.json;

loader.add({url: atlas_texture, name: 'texture'}).load(() => {
  const  sheet = new Spritesheet(
  sheet.parse((...args) => {
    console.log(sheet.textures); // it loaded correctly

It only loads image, and then in the load part constructs spritesheet based on the json I provide. However, compared to traditional loading way, when in load function I would already have access to my textures, now I need to spend extra steps making that textres in load, which is also async.

As under the hood Loader tries to download resources that I provide a path to, I was wondering maybe there is a way to tell Loader that it does not have to download anything and json is already provided. However I could not find anything like that in forums. Also, in that case new issue appears because in .json file Loader will see that it needs atlas.png, which does not exist in the build and insead I have base64 string. If only there was a way to do something like this it would be amazing.

loader.add(atlas.json, 'base64.image') // so it knows which image to use with which json to construct atlas

and also

loader.add(spine_atlas.json, 'base64.atlast_image') // so it knows which image to use with which json to construct spine animation


Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...