load pixi.js sprite sheet jsons via webpack

load-from-json.js

`
this allows you to use all of webpack's goodness to load your sprites.

here's some benefits:
 - saving one roundtrip since webpack's json-loader will inline the json data into the script. Thus it doesn't need to be loaded from the server first
 - use a lot of the file-loader power and beyond to create cache-busting urls, and apply image-minification via e.g. image-webpack-loader
`

import PIXI from "pixi.js";

export default function loadFromJson(name, pathToImage, data, resolution = parseInt(data.meta.scale, 10)) {
  PIXI.loader.add(name, pathToImage, res => {
   
   // code mostly taken from here: https://github.com/pixijs/pixi.js/blob/039200b46d7840f065faa50739e4b98f69678db4/src/loaders/spritesheetParser.js
   
    const frames = data.frames;
    const frameKeys = Object.keys(frames);

    let frameIndex = 0;

    while (frameIndex < frameKeys.length) {
      const frame = frames[frameKeys[frameIndex]];
      const rect = frame.frame;

      if (rect) {
        let size = null;
        let trim = null;

        if (frame.rotated) {
          size = new PIXI.Rectangle(rect.x, rect.y, rect.h, rect.w);
        } else {
          size = new PIXI.Rectangle(rect.x, rect.y, rect.w, rect.h);
        }

        //  Check to see if the sprite is trimmed
        if (frame.trimmed) {
          trim = new PIXI.Rectangle(
            frame.spriteSourceSize.x / resolution,
            frame.spriteSourceSize.y / resolution,
            frame.sourceSize.w / resolution,
            frame.sourceSize.h / resolution
          );
        }

        // flip the width and height!
        if (frame.rotated) {
          const temp = size.width;
          size.width = size.height;
          size.height = temp;
        }

        size.x /= resolution;
        size.y /= resolution;
        size.width /= resolution;
        size.height /= resolution;

        PIXI.utils.TextureCache[frameKeys[frameIndex]] = new PIXI.Texture(res.texture.baseTexture, size, size.clone(), trim, frame.rotated);
      }
      frameIndex++;
    }
  });
}

usage.js

import loadFromJson from "./load-from-json";

loadFromJson("bunny_walk", require("./sprites/bunny_walk.png"), require("./sprites/bunny_walk.json"));

PIXI.loader.once("complete", () => {
  // ... do your stuff as usual
})

This could be made simpler by utilizing Pixi's internal spritesheetParser(), the JSON's data just has to be augmented to it thinks it's coming from a PIXI loader. I also having it returning a loader instead of just loading on the PIXI's loader instance to allow for finer control.

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(){});

  return loader;
}

Usage:

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

function onAssetsLoaded(){
  console.log('Everything loaded!');

  var body = new PIXI.Sprite( PIXI.Texture.fromFrame('body.png') ),
         eyes = new PIXI.Sprite( PIXI.Texture.fromFrame('eyes.png') );

}
loader.load(onAssetsLoaded);

Added an issue on PIXI's repo to build this functionality in: pixijs/pixijs#2906

Ah lovely! Thanks for sharing :)

Thanks for sharing :)，This is really useful to solve my problem~