本教學會引導您建立您的第一個即時遊戲:經典的回合制遊戲「井字過三關」。我們會用到遊戲更新和遊戲 Bot。 |
設定應用程式後,您便可以開始操作:
應用程式設定完成後,您現在需要開始建立遊戲用戶端。遊戲用戶端必須在根目錄中加入 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
檔案必須放在此封存檔案的根目錄中,不能放在其他的子資料夾內。
如要上載壓縮檔案:
您現在可以使用流動裝置測試建立檔案。您可前往 Messenger 內遊戲清單的開發中部分,以查看已發佈的建立檔案。
若要加快開發程序,您可以透過 Graph API 從指令行上載建立檔案,或是直接使用開發伺服器進行測試。進一步了解與測試、發佈與分享即時遊戲相關的資訊。
遊戲情境一詞指的是可以玩遊戲的任何環境。一般情況下,遊戲情境是指 Facebook 帖子或群組等物件。
以下範例將展示如何傳送遊戲情境更新資料,以及這項資料在 Messenger 看起來的樣子。
如要宣告您的自訂更新資料,您必須建立稱為 fbapp-config.json
的配置檔案,並將之與 index.html
檔案一起放在套件的根目錄下。
若要進一步了解受支援的配置,請參閱套件式配置章節。在本示範中,檔案內容將如下所示:
{ "instant_games": { "platform_version": "RICH_GAMEPLAY", "custom_update_templates": { "play_turn": { "example": "Edgar played their move" } } } }
透過自訂更新範本配置,我們便可為每項特定自訂更新資料指派編號,進而提高分析的準確度。您必須為所有遊戲指派範本編號。
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
切換到更合適的遊戲情境。
遊戲 Bot 可為您的遊戲提供有效的渠道,以與玩家重新互動;如要建立遊戲 Bot,請查看遊戲 Bot 設定指南。