PixiJS exporter

How it works

Packrat writes PixiJS's TexturePacker-style JSON Hash format and the image file for each atlas page. PixiJS's spritesheet loader turns the frame rectangle and trim metadata into named textures. For multiple pages, the first descriptor links the additional descriptors through meta.related_multi_packs.

API

PixiJS turns the JSON Hash frame records into a Spritesheet whose textures map is keyed by exported frame name. The relevant calls and types are:

Assets.load<Spritesheet>(dataFile: string): Promise<Spritesheet>;
new Sprite(texture: Texture): Sprite;
sheet.textures: Record<string, Texture>;
sprite.anchor: ObservablePoint;
sprite.position: ObservablePoint;
sprite.scale: ObservablePoint;
container.addChild(...children: ContainerChild[]): ContainerChild;
await app.init(
  options?: Partial<ApplicationOptions>): Promise<void>;
app.ticker.add(fn: TickerCallback<any>): Ticker;

PixiJS applies the packed rectangle and trim metadata when it builds each Texture. Use sheet.textures["player_0000"] to retrieve a frame texture; animation playback is an application concern.

Integrate

This PixiJS 8 example loads a descriptor, retrieves a named frame, and draws it without manually reading atlas coordinates:

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, antialias: false });
document.body.appendChild(app.canvas);

const atlas = await Assets.load("atlas.json");
const sprite = new Sprite(atlas.textures["player_0000"]);
sprite.anchor.set(0.5);
sprite.position.set(400, 300);
sprite.scale.set(2);
app.stage.addChild(sprite);
</script>
</body>

PixiJS handles the frame rectangle and trim metadata in the loaded texture. Advance through the named frame textures in your update loop to animate. Replace .png in the generated paths with the image extension selected for the export.

PixiJS exporter ​

How it works ​

API ​

Integrate ​

PixiJS exporter

How it works

API

Integrate