# PixiJS

Build a PixiJS game with your bundler of choice and ship it to Wavedash.

Source: https://docs.wavedash.com/engines/pixi

<GithubLink href="https://github.com/wvdsh/examples/tree/main/example-pixi" />
<PlaytestLink href="https://wavedash.com/playtest/pixijs-example/274e876b-db2d-4500-afa1-268d1e07fb31" />

PixiJS works with any JavaScript bundler — Vite, Webpack, Rollup, esbuild, Parcel, and others. This page covers the generic setup. [The example repo](https://github.com/wvdsh/examples/tree/main/example-pixi) uses Vite.

## Install dependencies

```bash
npm install pixi.js
npm install @wvdsh/sdk-js
```

`@wvdsh/sdk-js`'s default export is the live, fully-typed Wavedash SDK singleton.

## Wire up `Wavedash.init()`

In the file where you create your `Application`, import `Wavedash`, initialize the app, then call `init()` once it's running.

<Urgent>
**Calling `Wavedash.init()` is required.** Your game stays hidden behind the Wavedash loading screen until you do. Call it once your game is ready to play.
</Urgent>

```typescript
import Wavedash from "@wvdsh/sdk-js";
import * as PIXI from "pixi.js";
import { Assets } from "pixi.js";

const container = document.getElementById("pixiCanvas");
const app = new PIXI.Application();
await app.init({ background: 0x111111, resizeTo: container, antialias: true });
container.appendChild(app.canvas);

// ... game objects on app.stage ...

const assets = [
  { alias: 'sprite', src: '/assets/sprite.png' },
  // add more assets here
];
await Assets.load(assets, (p) => {
  Wavedash.updateLoadProgressZeroToOne(p);
});
Wavedash.init({ debug: true });

app.ticker.add((ticker) => {
  // ... game logic ...
});
```

PixiJS v8's `app.init()` is async — await it before appending the canvas or adding stage objects. `Assets.load` accepts an optional progress callback as its second argument; pass your asset list and a callback that forwards `p` (0→1) to `updateLoadProgressZeroToOne`. `init()` automatically signals load completion, so call it last.

## wavedash.toml

Point `upload_dir` at your bundler's output directory. For Vite and most other bundlers that's `./dist`.

```toml
game_id = "YOUR_GAME_ID_HERE"
upload_dir = "./dist"
```

## Local development

Produce a build, then run `wavedash dev` to serve it through the Wavedash sandbox.

## SDK features

Once initialized, `Wavedash` exposes leaderboards, achievements, stats, and user data:

```javascript
const user = Wavedash.getUser();

const lb = await Wavedash.getLeaderboard("high-scores");
await Wavedash.uploadLeaderboardScore(lb.data.id, score, true);

Wavedash.setAchievement("first_win", true);
```