Parse sprite sheet image using object

Loading the JSON for a spritesheet loads the image and creates frames automatically, but when using something like Webpack, it would be great to save a roundtrip request and build the spritesheet json data into the bundle.

Unfortunately, there’s no easy way to use PIXI’s built in spritesheet parser to make frames from the data when the image is loaded. A built-in method along the lines of PIXI.utils.framesFromData( jsonData, image or Texture ) would be quite helpful!

@danielberndt built a method to do this, and I adapted it use the built in spritesheetParser middleware, but this is easily broken if spritesheetParser changes.

import PIXI from "pixi.js";

export default function loadFromJson(name, pathToImage, data, resolution = parseInt(data.meta.scale, 10)) {

  var loader = new PIXI.loaders.Loader();

  PIXI.loaders.spritesheetParser().call(loader, {
      name: name,
      url: pathToImage,
      data: data,
      isJson: true,
      metadata: {}
    }, function(){ console.log('next', arguments, PIXI.utils.TextureCache); });

  return loader;
}

Usage:

import loadFromJson from "./loadFromJson.js";

var loader = loadFromJson(
  'spritesheet', 
  require("../spritesheets/spritesheet.png"), 
  require("../spritesheets/spritesheet.json")
);

function onAssetsLoaded(){
  var body = new PIXI.Sprite.fromFrame('body.png');
}
loader.load(onAssetsLoaded);

[GoodBoyDigital]

good shout @shshaw ! I think separating the parsers from the loaders is something we should look into!

[amorino]

The method from above doesn’t work anymore on 4.3.2 with webpack; and Pixi.js docs doesn’t have any reference to Pixi.loaders.spritesheetParser.

Is there any way to make this work for webpack?