# PlayCanvas

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

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

<GithubLink href="https://github.com/wvdsh/examples/tree/main/example-playcanvas" />
<PlaytestLink href="https://wavedash.com/playtest/playcanvas-example/40198a10-f3c6-456e-a76d-be9224a4568f" />

PlayCanvas 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-playcanvas) uses Vite.

## Install dependencies

```bash
npm install playcanvas
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 `new pc.Application(...)`, import `Wavedash` and call `init()` once your game is ready.

<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 pc from "playcanvas";

const canvas = document.getElementById("renderCanvas");
const app = new pc.Application(canvas);
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
window.addEventListener("resize", () => app.resizeCanvas());

// ... camera, lights, entities ...

app.on('preload:progress', (fraction: number) => {
  Wavedash.updateLoadProgressZeroToOne(fraction);
});

app.preload(() => {
  Wavedash.init({ debug: true });
  app.start();
});
```

`app.preload` downloads all assets flagged as "preload" in the asset registry; `preload:progress` fires with a 0→1 fraction as each one lands. Call `init()` in the `preload` completion callback, then `app.start()`. `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_clear", true);
```