Appearance
PixiJS exporter
Output
Packrat writes a standard PixiJS/TexturePacker-style JSON Hash descriptor beside each atlas page image:
text
atlas.json atlas.pngIntegrate
Load the JSON with PixiJS's normal spritesheet/asset loader and retrieve textures by frame name from the loaded spritesheet.
Let PixiJS consume the frame, sourceSize, and spriteSourceSize metadata; do not treat a trimmed frame rectangle as the original sprite size.
Minimal browser program
This is a complete PixiJS 8-style page. Replace player_0001 with a frame name that exists in your atlas:
html
<!doctype html>
<body>
<script type="module">
import { Application, Assets, Sprite } from
"https://cdn.jsdelivr.net/npm/pixi.js@8.19.0/dist/pixi.mjs";
const app = new Application();
await app.init({ width: 800, height: 600, background: "#111722" });
document.body.appendChild(app.canvas);
const atlas = await Assets.load("atlas.json");
const sprite = new Sprite(atlas.textures["player_0001"]);
sprite.anchor.set(0.5);
sprite.position.set(400, 300);
sprite.scale.set(2);
app.stage.addChild(sprite);
</script>
</body>