最佳化遊戲以便在 Facebook.com 上執行

概覽

Facebook 提供多種功能，旨在讓您的遊戲在玩家的瀏覽器中獲得出色表現，幫助您妥善處理各種視窗大小問題，以及在不中斷遊戲的情況下，讓玩家和遊戲能夠在遊戲進行期間使用 Facebook 功能，接受來自 Facebook 的互動。

佈局最佳化

使用流動佈局可以根據玩家的瀏覽器尺寸調整遊戲的大小。啟用此功能時，包含遊戲的 iframe 可以填充瀏覽器視窗的整個可用寬度或高度。

應用內容如何在沒有流動寬度和高度的情況下填充 Facebook 網頁遊戲的可用空間。

要啟用流動佈局，首先需要在應用皮膚內配置應用的設定。導航到應用的 “設定”頁面並找到“Facebook 應用”部分，如下圖所示。

固定寬度

固定寬度設定為 No 時，包含遊戲的 iframe 的寬度會設定為 100% 。如果玩家更改其瀏覽器視窗的寬度，系統會左對齊您的內容並調整 iframe 的大小以填充頁面。

固定寬度設定為 Yes 時，系統會強制 iframe 使用值為 760 畫素的寬度。預設情況下，大多數瀏覽器中 iframe 的 <body> 元素擁有 margin:8px ，因此除非執行覆蓋操作，否則內容寬度為 744 畫素。

固定高度

固定高度設定為 No 時，包含應用的 iframe 的寬度會設定為 100% 。調整瀏覽器視窗的大小時也會調整 iframe 的大小，並會在內容超出可用高度的情況下顯示捲軸。

固定高度設定為 Yes 時，會強制 iframe 使用您在應用皮膚中作為附加設定指定的高度值，該值以畫素為單位。

流動佈局

透過將固定設定設為 No 來啟用流動寬度和高度後，鑑於檢視內容的使用者可能隨時調整瀏覽器的大小，所以您開發的應用應能支援可變尺寸及動態大小調整。

應用應能夠縮放大小，以便能使用所有可用螢幕空間，並在需要時偵聽 JavaScript window.onresize 事件來動態調整佈局。在許多情況下， HTML 和 CSS 無需使用 JavaScript 即可處理動態佈局，但如果以絕對單位指定了元素大小，則可能需要在 window.onresize 事件期間執行程式碼。為避免螢幕閃爍或過於頻繁地調整佈局，建議每秒僅執行 30-60 次調整大小處理程式，或僅在大小更改超過某個閾值時執行。

HTML 示例

對於 HTML 應用，請將應用父元素的高度和寬度設定為 100%。如果需要調整 HTML 應用內任何使用者介面元素的位置，與在任何標準 HTML 頁面中執行的操作一樣，可以透過 window.onresize 事件執行此操作。

以下示例程式碼可用於定義 <div> HTML 元素，您應將背景顏色設定為藍色，並填充可用的瀏覽器尺寸。它將偵聽 window.onresize 事件，並在調整瀏覽器大小後輸出當前 <div> 尺寸。

<html>

<head>

<title>Fluid Layout HTML Example</title>

</head>

</div>

<script src="

FB.init({appId : 'APP ID',});

function echoSize() {

document.getElementById('output').innerHTML ="HTML Content Width: " + window.innerWidth +" Height: " + window.innerHeight;

console.log(window.innerWidth + ' x ' + window.innerHeight);

}

echoSize();

window.onresize = echoSize;

</script>

</body>

</html>

處理 Flash 中的流動佈局

如果要構建 Flash 應用，您需要將 <object> 標籤初始尺寸的高度和寬度都設定為 100%。這會讓 Flash 客戶端能夠填充整個可用空間。接下來，ActionScript 程式碼需要偵聽並處理 stage 物件的 Event.RESIZE 事件。此事件在玩家每次更改 swf 大小時傳送；請使用此事件相應設定使用者介面元素的佈局。

處理 Flash 或其他外掛中的對話方塊和選單彈出項

在基於 Flash 或其他外掛的遊戲執行時，玩家可能會與屬於 Facebook 的使用者介面元素互動，這有時會導致遊戲被遮擋。這種情況有時是因為遊戲執行的操作（例如呼叫“登入”對話方塊）而發生，有時是因為玩家與遊戲的 Facebook 元素（例如 Messenger 視窗）互動而發生。

要妥善處理此情況，您需要建立應用的動態截圖，然後使用此圖片替代 <object> 元素。您需要在 200 毫秒內執行此替代操作。此操作會讓對話方塊正確顯示，並帶來更愉悅的使用者體驗。

執行此操作的最佳方法是，在 Flash 程式碼內建立帶有截圖（截圖為 JPEG 格式或其他適合圖片樣式的壓縮格式）的函式，並在使用 Base64 編碼該字串後暫停遊戲。根據需要向 JavaScript 暴露該函式（或可將該函式命名為 exportScreenshot 之類），例如，在 Flash 中，您將使用 flash.external.ExternalInterface.addCallback 函式來執行暴露操作。同時暴露在遊戲重獲焦點後恢復遊戲的函式。

接下來，在 JavaScript 程式碼中，編寫要在遊戲失去或重獲焦點時呼叫的偵聽程式函式，透過將其作為 hideFlashCallback 引數傳遞給 FB.init() ，以便在 Facebook 環境中註冊該函式。隨後會向偵聽程式傳遞引數字典，其中包含稱為 state 的鍵，如果應該隱藏遊戲，該鍵會設定為 opened 。在這種情況下，偵聽程式應呼叫 Flash 應用的 exportScreenshot 方法，然後使用經過 Base64 編碼的圖片資料建立資料網址，並使該網址成為 img 元素的 src ；它應使用 JS SDK 中的 FB.hideFlashElement 方法將應用包含的元素移動到畫面以外，並使用該 img 替換。如果傳遞給偵聽程式的引數字典沒有 state: "opened" ，那麼使用 FB.Canvas.showFlashElement 使 Flash 應用重返畫面。

為了讓截圖展示淡出效果，您需要匯出經過改動的截圖，使其取樣率降至 1/4 大小（顯示為模糊圖片）或調暗其色調。這會讓玩家更容易發現焦點已從遊戲轉移到遊戲上彈出的使用者介面元素上。

透過設定 urlhandler 避免重新載入

使用 JavaScript SDK 的 FB.Canvas.setUrlHandler() 方法可註冊幫助遊戲妥善處理以下情況的回撥：使用者點選了 Facebook Chrome 內通常會導致遊戲重新載入的某處連結。示例包括：

所有快訊動態

書籤

來自書籤下拉選單的請求

請求通知動態。

例如，當使用者點選關於好友在遊戲中獲得某項成就的快訊動態時，在預設情況下，他們的瀏覽器會跳轉至該成就的網址。但您的遊戲可以選擇註冊用於在應用程式內顯示成就的回撥。

呼叫該回撥時會使用包含網址路徑的欄位，該路徑與應用的 Facebook 網頁遊戲網址相關；例如，如果將載入的網址為

?fb_source=canvas_ticker

&fb_ticker_mod=achievement

&fb_action_types=games.achieves

，將使用如下字典引數呼叫您的回撥

{

path: "/achievements/cheevo1.php?fb_source=canvas_ticker&fb_ticker_mod= achievement&fb_action_types=games.achieves"

}

請注意，對 FB.Canvas.setUrlHandler() 的每次呼叫都會替代之前設定的呼叫（如果之前已設定）。另外，僅會傳送指向 Facebook 遊戲的連結（即，以 apps.facebook.com/your_app/ 開頭）進行內聯處理。

在不支援的瀏覽器中處理 WebGL

如果您的 Facebook 網頁遊戲使用 WebGL，則應在應用設定中將“Facebook 網頁遊戲”下的 WebGL 設定為 “是”。這使 Facebook 可以最佳化玩家的 WebGL 體驗。

如果玩家使用的瀏覽器不支援 WebGL，他們將在嘗試訪問您的遊戲時看到下列頁面。此頁面會顯示相容 WebGL 的網頁瀏覽器的連結，如果您的遊戲已在中上架，頁面還會顯示 Gameroom 客戶端的連結。

如果您不想將玩家引導至這一頁面，可以將 替換 WebGL 不支援的體驗 設定為 “是”，禁用重定向。如果執行這一操作，您必須針對不支援 WebGL 的瀏覽器處理遊戲體驗。

為方便大家群策群力，我們建立了一個 Facebook Instant Game 交流群： 814298516 。歡迎同學們加入交流開發和運營經驗。

Facebook Instant Game 最佳化遊戲以便在 Facebook.com 上執行