Docs

Getting started

Add the runtime to a PixiJS v8 game, load one animation and play it, in about ten lines.

1. Put the export in your build

Unzip your export into your game's static files. It holds the runtime, one folder per element and a weight report. Host them as they are: files inside the folders are referenced by name and must not be renamed.

public/
  greatsprites/            runtime.js, decode.js, transcoders/
  sprites/object-1/        element.json, still.png, win/, idle/
  weight-report.json

The export also has example.html: serve the folder over http and open it to see every element play.

2. Start the runtime once

import { Application } from 'pixi.js';
import { GreatSprites } from './greatsprites/runtime.js';

const app = new Application();
await app.init({ resizeTo: window });
const gs = await GreatSprites.init(app, { base: './greatsprites/' });

init checks which GPU-compressed format the device has. Call it once per application. base is where the greatsprites/ folder is served.

3. Load and play

const coin = await gs.object('./sprites/object-1/', { height: 160 });
coin.position.set(200, 300);   // the centre of the art
app.stage.addChild(coin);
await coin.play('win');

An element is a PixiJS display object: position, scale, add and remove it like any other. It rests on the first frame of its first clip until you play something.