Build

針對在 Facebook.com 上執行的遊戲最佳化

The Web Games on Facebook and Facebook Gameroom platforms are no longer available for new submissions. This documentation is intended solely for developers with existing games. To learn more, read our blog post.

為了讓遊戲在玩家的瀏覽器中充分發揮效能，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 應用程式中的任何用戶介面元素，您可透過 window.onresize 事件進行，如同處理任何一個普通 HTML 頁面一樣。

以下程式碼範例會定義 <div> HTML 元素、將背景色彩設為藍色，並填滿可用的瀏覽器尺寸。範例中的程式碼還會接聽 window.onresize 事件，並在調整瀏覽器大小時印出目前的 <div> 尺寸。

<html>
  <head>
    <title>Fluid Layout HTML Example</title>
  </head>
  <body style="margin:0; padding:0; border:0; background-color:#000000">
    <div id="allContent" style="background-color: #0000FF; height:100%">
      <div id="output" style="color: #FFFFFF;" />
    </div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
      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 程式碼中編寫一個接聽程式函數，用於在遊戲失去或重新得到焦點時進行呼叫，並將這個函數傳遞至 FB.init() 做為 hideFlashCallback 參數，在 Facebook 環境中進行登錄。接聽程式會接收到一個參數字典，其中包含稱為 state 的金鑰，如果您應該隱藏遊戲，則應將該金鑰設為 opened。在此情況下，接聽程式應呼叫 Flash 應用程式的 exportScreenshot 方法，並使用 Base64 編碼影像資料建立資料網址，再將該網址設為 img 元素的 src；接聽程式應使用 JS SDK 中的 FB.Canvas.hideFlashElement 方法，將應用程式的包含元素移至畫面外，並以該 img 取代此包含元素。如果傳遞至該接聽程式的參數字典沒有 state: "opened"，請改用 FB.Canvas.showFlashElement，讓 Flash 應用程式回到畫面中。

建議您將已修改的螢幕截圖匯出，向下取樣為 1/4 大小（會顯示為模糊圖像），或加深顏色，讓它看起來像是淡入背景。這會讓玩家更清楚焦點不在遊戲身上，而是在彈出的用戶介面元素上。

設定 urlhandler，避免重新載入

JavaScript SDK 的 FB.Canvas.setUrlHandler() 方法會登錄回呼，讓遊戲能夠順利處理用戶點擊 Facebook Chrome 連結時發生的情況（通常會導致重新載入遊戲）。舉例如下：

  • 所有即時動態
  • 書籤
  • 書籤下拉式清單的要求
  • 「要求通知」動態。

舉例來說，當用戶點擊朋友遊戲成就的即時動態時，瀏覽器預設會前往該成就的網址。遊戲可改為選擇登錄回呼，以在應用程式內顯示成就。

呼叫回呼時，會提供包含網址路徑（相對於應用程式的 Facebook 網頁遊戲網址）的欄位；例如，如果原本要載入的網址是

http://apps.facebook.com/yourgameXYZ/achievements/cheevo1.php
  ?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 用戶端連結（若您的遊戲已在 Facebook Gameroom 發佈）。

如果您不想將玩家重新導向此頁面，只要將覆寫 WebGL 不受支援的體驗設為「是」，就可以停用重新導向功能。如果您這樣做，則必須針對不支援 WebGL 的瀏覽器，處理您的遊戲體驗。