vite-spritesheet-plugin

vite-spritesheet-plugin

Generate large spritesheets to save on network. Supports SVG, PNG, JPEG.

Output files are rasterized as PNG or JPEG.

Usage

Include this in your Vite plugin configuration.

Configuration

Configuration options are as follows:

interface PluginOptions {
    /**
     * List of patterns to search for assets
     */
    patterns: {
        /**
        * Root directory to search for assets.
        */
        rootDir: string
        /**
        *  Glob expression to match assets.
        *  @default *.{png,gif,jpg,bmp,tiff,svg}
        */
        glob?: string
    }[]

    options?: Partial<{
        /**
        * Format of the output image
        * @default "png"
        */
        outputFormat: "png" | "jpeg"

        /**
        * Output directory
        * @default "atlases"
        */
        outDir: string

        /**
        * Added pixels between sprites (can prevent pixels leaking to adjacent sprite)
        * @default 1
        */
        margin: number

        /**
        * Remove file extensions from the atlas frames
        * @default false
        */
        removeExtensions: boolean

        /**
        * The Maximum width and height a generated image can be
        * Once a spritesheet exceeds this size a new one will be created
        * @default 4096
        */
        maximumSize: number

        /**
        * maxrects-packer options
        * See https://soimy.github.io/maxrects-packer/
        * Currently does not support `allowRotation` option
        */
        packerOptions: Omit<IOption, "allowRotation">
    }>
}

Then to import the spritesheets, use

import { atlases } from "virtual:spritesheets-jsons";

Example usage with pixi.js

import { Texture, Spritesheet, Sprite } from "pixi.js";
import { atlases } from "virtual:spritesheets-jsons";

const textures: Record<string, Texture> = {};

for (const atlas of atlases) {
    const texture = await Texture.fromURL(atlas.meta.image);
    const spriteSheet = new Spritesheet(texture, atlas);
    await spriteSheet.parse();

    for (const frame in spriteSheet.textures) {
        textures[frame] = spriteSheet.textures[frame];
    }
}

const sprite = new Sprite(textures["file_name"]);