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.
