# Phaser

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

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

<GithubLink href="https://github.com/wvdsh/examples/tree/main/example-phaser" />
<PlaytestLink href="https://wavedash.com/playtest/phaser-example/19409519-0ad0-4765-8b49-f4b0fbccd6b4" />

Phaser 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-phaser) uses Vite.

## Install dependencies

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

The default export is the live, fully-typed Wavedash SDK singleton.

## Wire up `Wavedash.init()`

Call `Wavedash.init()` from Phaser's `postBoot` callback — it fires after the first scene is up, which is the right moment to dismiss the Wavedash loading screen.

<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 { AUTO, Game } from "phaser";

const config: Phaser.Types.Core.GameConfig = {
  type: AUTO,
  width: 1024,
  height: 768,
  parent: "game-container",
  scene: [Boot, Preloader, MainMenu, MainGame, GameOver],
  callbacks: {
    postBoot: () => Wavedash.init({ debug: true }),
  },
};

const StartGame = (parent: string) => new Game({ ...config, parent });

export default StartGame;
```

Methods, events, and payloads all autocomplete. Wire `Wavedash.updateLoadProgressZeroToOne(...)` to Phaser's load progress event inside your `Preloader` scene, then call `init()` from `postBoot` once Phaser is fully up:

```typescript
// src/scenes/Preloader.ts
import Wavedash from "@wvdsh/sdk-js";

export class Preloader extends Phaser.Scene {
  preload() {
    this.load.on('progress', (p: number) => {
      Wavedash.updateLoadProgressZeroToOne(p);
    });

    // this.load.image(...), this.load.audio(...), etc.
  }
}
```

`init()` automatically signals load completion, so call it last (in `postBoot`, after all scenes have booted).

## 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);
```