# Babylon.js

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

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

<GithubLink href="https://github.com/wvdsh/examples/tree/main/example-babylonjs" />
<PlaytestLink href="https://wavedash.com/playtest/babylon-js-example/ae56d3a4-5f39-4b9c-974d-8ad188e82c84" />

Babylon.js 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-babylonjs) uses Vite.

## Install dependencies

```bash
npm install @babylonjs/core
npm install @wvdsh/sdk-js
```

`@babylonjs/core` provides all core engine classes (scenes, cameras, lights, meshes, and more). `@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 BABYLON.Engine(...)`, import `Wavedash` and call `init()` once your scene is up.

<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 BABYLON from "@babylonjs/core";

const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);

// ... camera, lights, meshes ...

const assetsManager = new BABYLON.AssetsManager(scene);
// Add tasks, e.g.:
// assetsManager.addMeshTask("level", "", "/assets/", "level.glb");

let totalTasks = 0;
let finishedTasks = 0;
assetsManager.onTaskSuccessObservable.add(() => {
  finishedTasks++;
  if (totalTasks > 0) Wavedash.updateLoadProgressZeroToOne(finishedTasks / totalTasks);
});
assetsManager.onFinish = () => {
  Wavedash.init({ debug: true });
};

totalTasks = assetsManager.tasks.length;
assetsManager.load();

engine.runRenderLoop(() => scene.render());
window.addEventListener("resize", () => engine.resize());
```

Methods, events, and payloads all autocomplete. `AssetsManager.onTaskSuccessObservable` fires for each completed task; divide by `tasks.length` to get a 0→1 progress value. `onFinish` fires once all tasks are done — call `init()` there. `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);
```