即時遊戲快速入門

本教學會引導您建立您的第一個即時遊戲:經典的回合制遊戲「井字過三關」。我們會用到遊戲更新遊戲 Bot
您可以下載下方的原始碼:

示範原始碼 (Github)

SDK 前置步驟

設定應用程式後,您便可以開始操作:

建立您的遊戲客戶端

應用程式設定完成後,您現在需要開始建立遊戲用戶端。遊戲用戶端必須在根目錄中加入 index.html 檔案。請先加入此行程式碼,以匯入即時遊戲 SDK。

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

重要事項

  1. 請勿下載 SDK 並將之加入您的套件內,因為接下來的步驟可能會拒絕此動作。
  2. 這是在 Facebook 建立遊戲的新方式,而且不支援 Graph API。

我們的 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.switchAsynccontext.chooseAsynccontext.createAsync 切換到更合適的遊戲情境。

(可選)設定遊戲 Bot 以再次吸引玩家

遊戲 Bot 可為您的遊戲提供有效的渠道,以與玩家重新互動;如要建立遊戲 Bot,請查看遊戲 Bot 設定指南

後續步驟

了解如何建立及配置即時遊戲遊戲 Bot 後,請務必參閱下方指南: