Web 快速上手

纯 HTML5 游戏(PixiJS、Phaser、纯 Canvas、WebGL)接入方式:在 HTML 里放两个 <script>,然后从游戏里调用 window.FRVR.*。

1. 加载 SDK —— 本地开发用 dev 渠道

两个 <script> 标签都加到 HTML 的 <head> 里。不要加 async 或 defer —— SDK 必须在你任何游戏脚本之前就绪。请从 FRVR CDN 加载(不要自行托管):

<head>
  <script src="https://cdn.frvr.com/sdk/frvr-sdk.min.js"></script>
  <script src="https://cdn.frvr.com/sdk/frvr-channel-dev.min.js"></script>
  <!-- …你的脚本都在这之后 -->
</head>

dev 渠道包自带假的广告、内购、存储 provider,让你无需真实后端就能体验完整流程。

2. 配置 + 必填的生命周期回调

FRVR.lifecycle.* 回调是必填。SDK 在广告弹出(或渠道要求)时会调用它们,让你的游戏暂停主循环和音频。不接就是上线 bug —— 广告会盖着音乐响,游戏主循环会在插屏下继续跑。

<script>
  FRVR.config = {
    gameId: 'my-awesome-game',
  };

  // 【必填】—— 五个都要实现。即便某个回调在你游戏里是 no-op,
  // 也显式写出来,提醒自己以后回头处理。
  FRVR.lifecycle.onSuspend      = () => game.pauseLoop();
  FRVR.lifecycle.onResume       = () => game.resumeLoop();
  FRVR.lifecycle.onAudioSuspend = () => audio.mute();
  FRVR.lifecycle.onAudioResume  = () => audio.unmute();
  FRVR.lifecycle.onGamePause    = () => game.showPauseMenu();

  FRVR.init();
</script>

FRVR.init() 会装配全部模块(FRVR.ads、FRVR.tracker、FRVR.iap 等),此时尚未发起任何网络请求。

3. 启动游戏

引导器会在你加载期间显示渠道风格的启动画面:

<script>
  FRVR.bootstrapper.init()
    .then(() => loadGame(progress => FRVR.bootstrapper.setProgress(progress)))
    .then(() => FRVR.bootstrapper.complete());

  function loadGame(onProgress) {
    // …下载资源、预热音频等。期间多次调用 onProgress(0..1)。
    onProgress(1);
    return Promise.resolve();
  }
</script>

这就是一个完整的本地集成。之后按需调用任何模块(FRVR.ads、FRVR.iap、FRVR.tracker 等) —— 每个都有自己的页面和侧边栏里的在线 demo。

现在就试

下面这个 demo 通过 dev 渠道加载真实 SDK 并调用 FRVR.tracker。

在线示例:init 并上报一个事件

loading SDK…

最小完整模板

<!DOCTYPE html>
<html>
  <head>
    <title>My Game</title>
    <script src="https://cdn.frvr.com/sdk/frvr-sdk.min.js"></script>
    <script src="https://cdn.frvr.com/sdk/frvr-channel-dev.min.js"></script>
  </head>
  <body>
    <canvas id="game"></canvas>

    <script>
      FRVR.config = { gameId: 'my-awesome-game' };

      // 必填生命周期回调
      FRVR.lifecycle.onSuspend      = () => pauseLoop();
      FRVR.lifecycle.onResume       = () => resumeLoop();
      FRVR.lifecycle.onAudioSuspend = () => muteAudio();
      FRVR.lifecycle.onAudioResume  = () => unmuteAudio();
      FRVR.lifecycle.onGamePause    = () => showPauseMenu();

      FRVR.init();

      FRVR.bootstrapper.init()
        .then(() => loadGame(p => FRVR.bootstrapper.setProgress(p)))
        .then(() => FRVR.bootstrapper.complete());
    </script>
  </body>
</html>