即時遊戲快速入門

建立您的遊戲客戶端

應用程式設定完成後，您現在需要開始建立遊戲用戶端。遊戲用戶端必須在根目錄中加入 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 架構上所代管的，所以您不必在您自己的架構上或使用第三方服務來代管遊戲內容。一旦遊戲準備好執行測試，請將所有遊戲檔案套裝為單一壓縮檔案。

請注意：index.html 檔案必須放在此封存檔案的根目錄中，不能放在其他的子資料夾內。

如要上載壓縮檔案：

1. 前往應用程式管理中心，並點擊網頁代管標籤頁
2. 從下拉式選單選擇即時遊戲，接著點擊+ 上載版本，然後您就可以將壓縮檔案上載到 Facebook 的代管服務。
3. 選取壓縮檔案，並加入有關版本變更的詳情，然後點擊上載
4. 之後，系統會處理該檔案，這只需要幾秒鐘的時間。當狀態變成「待命」時，請點擊「★」按鈕，將建立檔案推向生產階段。

您現在可以使用流動裝置測試建立檔案。您可前往 Messenger 內遊戲清單的開發中部分，以查看已發佈的建立檔案。

若要加快開發程序，您可以透過 Graph 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 切換到更合適的遊戲情境。