Parcel Transformer for Spritesheets

() This transformer handles spritesheets as generated by tools like Texture Packer, for use with PixiJS.

It handles both single and multi-pack (linked) spritesheets.

Getting Started

Install it with your favorite package manager: yarn add -D parcel-transformer-spritesheet or npm i -D parcel-transformer-spritesheet.

Then include it in your .parcelrc. In this example, the spritesheets and images are in the images/ directory.

{
  "extends": ["@parcel/config-default"],
  "transformers": {
    "images/*.json": ["parcel-transformer-spritesheet"]
  },
  "packagers": {
    "*.json": "@parcel/packager-raw-url"
  }
}

In your game or app, you can then include spritesheets like so:

const interfaceImages = new URL("../images/interface.json", import.meta.url);
await PIXI.Assets.load({
  alias: ["interface"],
  src: interfaceImages.pathname,
});