即時遊戲快速入門

建立遊戲用戶端

應用程式現在已設定完成，您需要開始建立遊戲用戶端。遊戲用戶端必須在根目錄中有一個 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 來切換至更適合的情境。