Pixi.js: Parse sprite sheet image using object

Created on 2 Sep 2016 · 6Comments · Source: pixijs/pixi.js

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);

💾 v4.x (Legacy) 📢 Accepting PRs

Source