PlayCanvas — Wavedash Docs

Load PlayCanvas from a CDN and ship an ES-module game to Wavedash with no build step.

PlayCanvas 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 PlayCanvas from CDN, add a <canvas>, and include your module:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My PlayCanvas Game</title>
    <script src="https://cdn.jsdelivr.net/npm/playcanvas@latest/build/playcanvas.min.js"></script>
    <style>
      html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
      canvas { width: 100%; height: 100%; display: block; }
    </style>
  </head>
  <body>
    <canvas id="renderCanvas"></canvas>
    <script type="module" src="./main.js"></script>
  </body>
</html>

`web/main.js`

Await the SDK, create your PlayCanvas app, fill the progress bar, then init() (which dismisses the Wavedash loading screen):

const WavedashJS = await window.WavedashJS;

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 ...

WavedashJS.updateLoadProgressZeroToOne(1);
WavedashJS.init({ debug: true });

app.start();

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_clear");
await WavedashJS.storeStats();