优化游戏以便在 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>

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 网页游戏网址相关；例如，如果将加载的网址为

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 的网页浏览器的链接，如果您的游戏已在 Facebook Gameroom 中上架，页面还会显示 Gameroom 客户端的链接。

如果您不想将玩家引导至这一页面，可以将 替换 WebGL 不支持的体验 设置为 “是”，禁用重定向。如果执行这一操作，您必须针对不支持 WebGL 的浏览器处理游戏体验。

为方便大家群策群力，我们创建了一个 Facebook Instant Game 交流群： 814298516 。欢迎同学们加入交流开发和运营经验。

ITPub博客

Facebook Instant Game 优化游戏以便在 Facebook.com 上运行