小游戏快速入门

创建您的游戏客户端

现在您已设置好应用，接着需要开始创建游戏客户端。游戏客户端根目录下需要包含一个 index.html 文件。首先请添加下面的代码，导入小游戏 SDK。

<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

我们的 SDK 广泛使用 Promise 来实现异步功能。只有在 FBInstant.initializeAsync() 解析完成后，您才能与正在加载的用户界面互动。

FBInstant.initializeAsync()
  .then(function()
  // Start loading game assets here
);

游戏客户端不会一次性下载所有捆绑包（.zip 文件），而是会搜索待配置的根文件 (fbapp-config.json) 和主文件 (index.html)。之后，它将开始执行主文件中所含的逻辑，并开始从此处下载素材。开发者可以全权控制资产加载的顺序和时间。

在开始下载初始化游戏所需的素材后，您需要将加载进度告知 SDK，以便我们向玩家展示加载进度环。

var images = ['sprite1', 'sprite2', ...];
for (var i=0; i < images.length; i++) {
  var assetName = images[i];  
  var progress = ((i+1)/images.length) * 100;  
  game.load.image(assetName);

  // Informs the SDK of loading progress
  FBInstant.setLoadingProgress(progress);
}

// Once all assets are loaded, tells the SDK 
// to end loading view and start the game
FBInstant.startGameAsync()
  .then(function() {
  // Retrieving context and player information can only be done
  // once startGameAsync() resolves
  var contextId = FBInstant.context.getID();
  var contextType = FBInstant.context.getType();

  var playerName = FBInstant.player.getName();
  var playerPic = FBInstant.player.getPhoto();
  var playerId = FBInstant.player.getID();

  // Once startGameAsync() resolves it also means the loading view has 
  // been removed and the user can see the game viewport

  game.start();
});

如需详细了解 initializeAsync()、setLoadingProgress() 和 startGameAsync() 方法，请参阅 SDK 参考文档。

小游戏内容在 Facebook 基础设施上托管，因此，无需自行托管游戏内容或使用第三方服务。在准备好游戏进行测试后，将所有游戏文件打包为一个 .zip 文件。

请注意：index.html文件应位于此存档的根文件夹中，而不应位于任何子文件夹中。

上传 .zip 文件：

1. 在应用的面板上，点击网站托管功能选项。
2. 从下拉菜单中选择小游戏，然后点击+上传版本，即可将 .zip 文件上传到 Facebook 的托管服务中。
3. 选择 .zip 文件，添加有关版本更改的详细信息，然后点击上传
4. 仅需数秒时间，即可处理 .zip 文件。状态更改为“待命”时，点击“★”将构建版本推送到生产环境

现在，您可以用移动设备测试该构建版本了。在 Messenger 内的游戏列表中，您可以在开发中版块下看见已发布的构建版本。

为了加快开发流程，您可以通过图谱 API 从命令行上传构建版本，或者直接从开发服务器进行测试。详细了解关于测试、发布和分享小游戏的更多内容。

游戏环境一词指的是可以在其中玩游戏的任何环境。通常情况下，游戏环境是指 Facebook 帖子或小组等位置。

以下示例说明如何发送游戏环境更新及其在 Messenger 对话中的展示效果。

第 1 步：在配置文件中声明模板

为了声明自定义更新，您需要创建一个名为 fbapp-config.json 的配置文件，并将其放在捆绑包的根目录中，与 index.html 文件放在一起。

如需详细了解受支持的配置，请参阅基于捆绑包的配置部分。在本示例中，文件内容应该如下所示：

{
  "instant_games": {
    "platform_version": "RICH_GAMEPLAY",
    "custom_update_templates": {
      "play_turn": {
        "example": "Edgar played their move"
      }
    }
  }
}

第 2 步：使用 updateAsync 发送自定义更新

在配置文件中声明模板后，便可将模板用于填充 FBInstant.updateAsync 中的必填 template 字段。以下示例说明在井字棋游戏中如何通过这种调用告知对手轮到他们出棋。

// This will post a custom update. If the game is played in a messenger
// chat thread, this will post a message into the thread with the specified
// image and text message. And when people launch the game from this
// message, those game sessions will be able to access the specified blob
// of data through FBInstant.getEntryPointData().
FBInstant.updateAsync({
  action: 'CUSTOM',
  cta: 'Play',
  image: base64Picture,
  text: {
    default: 'Edgar played their move',
    localizations: {
      en_US: 'Edgar played their move',
      es_LA: '\u00A1Edgar jug\u00F3 su jugada!'
    }
  }
  template: 'play_turn',
  data: { myReplayData: '...' },
  strategy: 'IMMEDIATE',
  notification: 'NO_PUSH'
}).then(function() {
  // Closes the game after the update is posted.
  FBInstant.quit();
});

您可以在这里看到消息的展示效果：

有关自定义游戏环境更新的更多信息，请参阅我们的小游戏 SDK 参考文档。

如需获取有关最佳实践的信息，了解何时向其他玩家发送消息、何时向他们发送通知以及在游戏环境更新中添加哪些内容，请参阅我们的最佳实践导览。

请注意：游戏环境更新不会发送到 Messenger 以外的地方。通过使用 context.getType() 方法和检测 THREAD 来定制游戏体验非常有用。您可以使用 context.switchAsync、context.chooseAsync 或 context.createAsync，切换到更为合适的游戏环境。