Pixlland

Engine guide

Cocos

Cocos Creator web export

Cocos Creator exports Web Desktop / Web Mobile builds as a static folder. The SDK is one script tag in index.html plus a TypeScript module that proxies window.PixllandSDK.

1. Add the SDK to the build template

Edit Build Templates → web-desktop/index.html (create it from the defaults if absent) and inject:

<script src="https://pixlland.com/sdk/v1/pixlland.js" defer></script>

2. TypeScript wrapper

// assets/Scripts/Pixlland.ts
declare const window: any;

export class Pixlland {
  static async init(): Promise<void> {
    if (!window.PixllandSDK) return;
    await window.PixllandSDK.init();
  }
  static loadingFinished(): void {
    if (window.PixllandSDK) window.PixllandSDK.gameLoadingFinished();
  }
  static gameplayStart(): void {
    if (window.PixllandSDK) window.PixllandSDK.gameplayStart();
  }
  static gameplayStop(): void {
    if (window.PixllandSDK) window.PixllandSDK.gameplayStop();
  }
  static happyTime(dt: number): void {
    if (window.PixllandSDK) window.PixllandSDK.happyTime(dt);
  }
  static async commercialBreak(): Promise<void> {
    if (!window.PixllandSDK) return;
    await window.PixllandSDK.commercialBreak();
  }
}

3. Wire into a component

import { _decorator, Component } from 'cc';
import { Pixlland } from './Pixlland';
const { ccclass } = _decorator;

@ccclass('GameRoot')
export class GameRoot extends Component {
  async onLoad() {
    await Pixlland.init();
    Pixlland.loadingFinished();
    Pixlland.gameplayStart();
  }
  update(dt: number) {
    Pixlland.happyTime(dt);
  }
  onPlayerDied() {
    Pixlland.gameplayStop();
    Pixlland.commercialBreak().then(() => {
      Pixlland.gameplayStart();
    });
  }
}

Common pitfalls

  • Facebook Instant Games SDK. Cocos supports it natively but it doesn't run inside our iframe sandbox. Use Pixlland accounts instead.
  • Web Mobile vs Web Desktop. We serve the same artifact on both device classes. Pick the build that performs best — usually Web Mobile for touch-first games, Web Desktop for keyboard/mouse.
Cocos Creator · Pixlland Engines