Phaser

Phaser is JavaScript, so the SDK is used directly from your scenes.

1. Load the SDK before Phaser

<script src="/sdk/v1/hg-sdk.js"></script>
<script src="phaser.min.js"></script>
<script src="game.js"></script>

2. Set up the game in portrait

// at the end of game.js, after your scenes
const game = new Phaser.Game({
  type: Phaser.AUTO,
  backgroundColor: '#000000',
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 720,
    height: 1280,
  },
  scene: [MenuScene, GameScene],
});

3. Report when gameplay starts and stops

class MenuScene extends Phaser.Scene {
  constructor() { super('menu'); }
  create() {
    // no start screen of your own: the website shows the cover.
    // The first tap anywhere starts the game.
    this.input.once('pointerup', () => this.scene.start('game'));
    // while waiting, keep something moving: it's the cover's background
    const dot = this.add.circle(360, 640, 40, 0xffd23f);
    this.tweens.add({ targets: dot, scale: 1.25, duration: 600, yoyo: true, repeat: -1 });
  }
}

class GameScene extends Phaser.Scene {
  constructor() { super('game'); }
  create() {
    this.score = 0;
    HGSDK.gameplayStart();                   // gameplay starts
  }
  lose() {
    HGSDK.sendScore(this.score);             // optional: only if your game has a score
    HGSDK.gameplayStop();                    // gameplay stops
    this.scene.start('menu');
  }
}

If your game has a pause menu:

HGSDK.gameplayStop();    // when opening your pause menu
HGSDK.gameplayStart();   // when closing it

4. Ads (optional)

Your game doesn't load ads by itself: it asks the website and the website shows them on top, freezing and muting the game meanwhile. There are two kinds: break (between runs) and reward (the player chooses to watch it in exchange for something in the game). Don't report that gameplay stops or continues because of an ad: the SDK freezes and resumes your game on its own.

class GameScene extends Phaser.Scene {
  // …

  // Ad the player chooses to watch (for example, to revive)
  async offerRevive() {
    const { rewarded } = await HGSDK.showAd({ type: 'reward', name: 'revive' });
    if (rewarded) this.revive(); else this.gameOver();
  }

  // at another moment: to double their coins
  async offerDoubleCoins() {
    const { rewarded } = await HGSDK.showAd({ type: 'reward', name: 'double_coins' });
    if (rewarded) this.coins *= 2;
  }

  // replaces the lose() from step 3
  lose() {
    HGSDK.sendScore(this.score);
    HGSDK.gameplayStop();
    HGSDK.showAd({ type: 'break' });   // Ad between runs
    this.scene.start('menu');
  }
}

Several rewards: give each one its own name, a short label (up to 40 characters) that says which reward it is. Each await receives the answer of its own ad, so each reward handles its own result.

5. Recommended settings

• No start screen of your own: the website shows the cover. Start the game with the first tap anywhere.
• Don't save high scores with Local Storage: if your game has a score, the website saves the best of each signed-in player with sendScore.
• Sound: the SDK pauses and mutes your game's audio on its own, following the website's pause and sound button.

6. Test it

Upload the game folder (or its .zip) in Upload game and tap 🧪 Test before submitting. More details in Test and publish.