# melonJS

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

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

<GithubLink href="https://github.com/wvdsh/examples/tree/main/example-melonjs" />
<PlaytestLink href="https://wavedash.com/playtest/melonjs-example/3fa90e49-89d2-4725-aa41-644b7b74b0ca" />

melonJS 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-melonjs) uses Vite.

## Install dependencies

```bash
npm install melonjs
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 call `new 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 { Application, Stage, state as melonState, input, CANVAS } from "melonjs";

Wavedash.updateLoadProgressZeroToOne(0.3);

class PlayScene extends Stage {
    onResetEvent() {
        input.bindKey(input.KEY.UP, "up");
        input.bindKey(input.KEY.DOWN, "down");
    }
    update(dt) {
        // per-frame logic — return true if something needs redrawing
        return true;
    }
    draw(renderer) {
        renderer.setColor("#fff");
        renderer.fillRect(40, 40, 20, 80);
    }
}

new Application(1600, 900, { parent: "screen", scale: "auto", renderer: CANVAS });
melonState.set(melonState.PLAY, new PlayScene());
melonState.change(melonState.PLAY);

Wavedash.init({ debug: true });
```

Call `updateLoadProgressZeroToOne(...)` during async asset loading; `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);
```