# Kaplay

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

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

<GithubLink href="https://github.com/wvdsh/examples/tree/main/example-kaplay" />
<PlaytestLink href="https://wavedash.com/playtest/kaplay-example/329c459a-b55f-4397-9e9b-765459daae20" />

[Kaplay](https://kaplayjs.com/) works with any JavaScript bundler — Vite, esbuild, Rollup, Parcel, and others. This page covers the generic setup. [The example repo](https://github.com/wvdsh/examples/tree/main/example-kaplay) uses Vite.

## Install dependencies

```bash
npm install kaplay
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 `kaplay(...)`, 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 kaplay from "kaplay";

Wavedash.updateLoadProgressZeroToOne(0.3);

const canvas = document.getElementById("wavedash-target");
const k = kaplay({ canvas, width: 1600, height: 900, letterbox: true });

// ...load sprites, define scenes...

Wavedash.updateLoadProgressZeroToOne(1);
Wavedash.init({ debug: false });
```

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, P2P multiplayer, and more. The Kaplay example uses P2P for online Pong — broadcasting paddle positions on an unreliable channel and game events on a reliable channel:

```javascript
// Broadcast paddle position to all peers (unreliable channel)
Wavedash.broadcastP2PMessage(0, false, paddleStatePacked);

// Announce a goal to all peers (reliable channel)
Wavedash.broadcastP2PMessage(1, true, goalEventPacked);
```

See the [multiplayer](/multiplayer) and [leaderboards](/sdk/leaderboards) guides for the full API.