Skip to content

PixiJS ​

Packrat writes TexturePacker-style JSON Hash. An atlas with several pages uses numbered JSON files linked by meta.related_multi_packs. PixiJS reads the trim metadata when it creates textures.

js
import { Application, Assets, Sprite } from "pixi.js"; // PixiJS 8
const app = new Application();
await app.init({ width: 800, height: 600, antialias: false });
document.body.appendChild(app.canvas);

const sheet = await Assets.load("atlas.json");
const sprite = new Sprite(sheet.textures["player_0000"]);
sprite.anchor.set(0.5);
sprite.position.set(400, 300);
app.stage.addChild(sprite);

Load every numbered JSON file to access all pages. The first file lists the others in meta.related_multi_packs. To animate, switch between the named textures in frame order. Serve the game and assets over HTTP.

See Sources and outputs for frame names, trimming, and effect maps.

Packrat documentation