Pack a set of images into a single spritesheet along its json description file. (CLI version)

npm install @pencil.js/spritesheet

import spritesheet from "@pencil.js/spritesheet";
import { writeFileSync } from "fs";

// List of files to pack
const files = ["image1.png", "image2.jpg", "image3.gif"];
const options = {
    outputFormat: "png",
};
// Call the async function and extract the json and image values
(async () => {
    const { json, image } = await spritesheet(files, options);
    // Write the files (for example)
    writeFileSync("spritesheet.png", image);
    writeFileSync("spritesheet.json", JSON.stringify(json));
})();

The methods accept two arguments.

You can specify some options on the second argument.

spritesheet returns a Promise for an Object containing a json and image field.

The returned JSON file is composed of two parts:

• meta - Global data about the generated file
• frames - Set of all frames/spites with path as key

Each frames gives data about itself:

• frame - The x, y position on the whole image and w, h for the size
• rotated - Tell is the sprite have been rotated (not yet supported)
• trimmed - Tell is the sprite have been cropped
• spriteSourceSize - The relative x, y position and w, h size
• sourceSize - The original w, h size

Want to display your generated spritesheet easily on a browser canvas ? Checkout Pencil.js the nice 2D drawing library.

MIT