PixiJS is browser-native -- no build step required. Load the engine from a CDN, write your game in an ES module, and run it with wavedash dev.
Setup
Create a web/ folder with two files: index.html and main.js.
web/index.html
Load PixiJS 8 from CDN, add a container div, and include your module:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My PixiJS Game</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.js"></script>
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
#pixiCanvas { width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="pixiCanvas"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
web/main.js
Await the SDK, create your PixiJS app, fill the progress bar, then init() (which dismisses the Wavedash loading screen):
const WavedashJS = await window.WavedashJS;
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 ...
WavedashJS.updateLoadProgressZeroToOne(1);
WavedashJS.init({ debug: true });
app.ticker.add((ticker) => {
// ... game logic ...
});
window.WavedashJS is a Promise injected by wavedash dev. Using type="module" on the script tag gives you top-level await.
Call updateLoadProgressZeroToOne(...) with intermediate values during async asset loading. init() automatically signals load completion, so call it last.
wavedash.toml
game_id = "YOUR_GAME_ID_HERE"
upload_dir = "./web"
SDK features
Once initialized, WavedashJS exposes leaderboards, achievements, stats, and user data:
const user = WavedashJS.getUser();
await WavedashJS.uploadLeaderboardScore("high-scores", score, true);
WavedashJS.setAchievement("first_win");
await WavedashJS.storeStats();