# Cocos Creator

Export Cocos Creator games to the Web Mobile target and ship them to Wavedash.

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

<GithubLink href="https://github.com/wvdsh/examples/tree/main/example-cocos" />
<PlaytestLink href="https://wavedash.com/playtest/cocos-example/2396e4dc-cc0c-4ce5-922f-ed6ecd56be72" />

[Cocos Creator](https://www.cocos.com/en/creator) exports to the web through two built-in templates: **Web Desktop** and **Web Mobile**. For Wavedash, always use **Web Mobile** — the Desktop template is locked to a fixed-size container and will not resize to fit the Wavedash iframe.

## Pick the right build template

<Warning>
Build for **Web Mobile**, not Web Desktop. The Desktop template locks the game to a fixed-size `#GameDiv` (with `cc_exact_fit_screen="false"`) and ignores `window.resize`, so the canvas never fills the Wavedash iframe regardless of CSS. Web Mobile sets `exactFitScreen: true` and binds to the window — that's what you want.
</Warning>

In the Cocos Creator build panel:

1. **Build → New Build Task**
2. Platform: **Web Mobile**
3. Output directory: leave as `build/web-mobile`
4. Build

This produces a `build/web-mobile/` folder with `index.html` plus the Cocos runtime and your assets. Point `upload_dir` at that folder.

## SDK integration

Call the JavaScript SDK from any Cocos component. A common place is the `start()` lifecycle hook on your root scene component — by the time it runs, the scene is loaded and visible, so it's a good point to signal load-complete to Wavedash.

<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 { _decorator, Component } from 'cc';
const { ccclass } = _decorator;

declare global {
  interface Window {
    Wavedash: any;
  }
}

@ccclass('Game')
export class Game extends Component {
  start() {
    const Wavedash = window.Wavedash;
    if (!Wavedash) return;

    try {
      // By the time a component's start() runs, Cocos has already loaded the
      // running scene, so report 1.0 here. If you drive your own loading scene
      // (e.g. assetManager.loadBundle / bundle.load with an onProgress callback),
      // call updateLoadProgressZeroToOne(finished / total) from there instead,
      // then init() once loading completes.
      Wavedash.updateLoadProgressZeroToOne(1.0);
      Wavedash.init({ debug: true });
    } catch (e) {
      console.warn('[wavedash] init failed:', e);
    }
  }
}
```

Any SDK call works the same way — `Wavedash.setAchievement("first_win", true)`, `Wavedash.requestStats()`, and so on. See the [Functions reference](/sdk/functions) for the full list.

## wavedash.toml

```toml
game_id = "YOUR_GAME_ID_HERE"
upload_dir = "./build/web-mobile"
entrypoint = "index.html"
```

<Note>
The Cocos `build/` directory is a compiler output and usually isn't committed to source control. Build from Cocos Creator once before running `wavedash dev` or `wavedash build push`.
</Note>