为方便大家群策群力,我们创建了一个 Facebook Instant Game?? 交流群: 群三638777518。 群二795963169。 群一814298516 。 欢迎同学们加入交流开发和运营经验。

概览 Facebook 提供多种功能,旨在让您的游戏在玩家的浏览器中获得出色表现,帮助您妥善处理各种窗口大小问题,以及在不中断游戏的情况下,让玩家和游戏能够在游戏进行期间使用 Facebook 功能,接受来自 Facebook 的互动。 布局优化 使用流动布局可以根据玩家的浏览器尺寸调整游戏的大小。启用此功能时,包含游戏的 iframe 可以填充浏览器窗口的整个可用宽度或高度。

应用内容如何在没有流动宽度和高度的情况下填充 Facebook 网页游戏的可用空间。

要启用流动布局,首先需要在应用面板内配置应用的设置。导航到应用的“设置”页面并找到“Facebook 应用”部分,如下图所示。

固定宽度 固定宽度设置为 No 时,包含游戏的 iframe 的宽度会设置为 100%。如果玩家更改其浏览器窗口的宽度,系统会左对齐您的内容并调整 iframe 的大小以填充页面。 固定宽度设置为 Yes 时,系统会强制 iframe 使用值为 760 像素的宽度。默认情况下,大多数浏览器中 iframe 的 元素拥有 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 事件执行此操作。 以下示例代码可用于定义

HTML 元素,您应将背景颜色设置为蓝色,并填充可用的浏览器尺寸。它将侦听 window.onresize 事件,并在调整浏览器大小后输出当前

尺寸。Fluid Layout HTML Example

处理 Flash 中的流动布局 如果要构建 Flash 应用,您需要将 标签初始尺寸的高度和宽度都设置为 100%。这会让 Flash 客户端能够填充整个可用空间。接下来,ActionScript 代码需要侦听并处理 stage 对象的 Event.RESIZE 事件。此事件在玩家每次更改 swf 大小时发送;请使用此事件相应设置用户界面元素的布局。 处理 Flash 或其他插件中的对话框和菜单弹出项 在基于 Flash 或其他插件的游戏运行时,玩家可能会与属于 Facebook 的用户界面元素互动,这有时会导致游戏被遮挡。这种情况有时是因为游戏执行的操作(例如调用“登录”对话框)而发生,有时是因为玩家与游戏的 Facebook 元素(例如 Messenger 窗口)互动而发生。 要妥善处理此情况,您需要创建应用的动态截图,然后使用此图片替代 元素。您需要在 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 网页游戏网址相关;例如,如果将加载的网址为 apps.facebook.com/yourgameXYZ… ?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 的浏览器处理游戏体验。

转载于:https://juejin.im/post/5b84e486e51d4538df02bd75

优化游戏以便在 Facebook.com 上运行相关推荐

  1. python五子棋游戏15*15_在STM32上运行五子棋小游戏(15x15)

    本程序算法资料来自下面网站. ----https://www.cnblogs.com/buptzym/archive/2012/06/20/2556052.html---- 先定义一个数组 用于存储整 ...

  2. 某游戏在华为鸿蒙,部分安卓游戏在华为鸿蒙 OS 上运行,被识别成使用 PC 端模拟器...

    5 月 14 日消息 华为在 2019 年开发者大会上正式推出了鸿蒙 OS 系统,并首先应用在智慧屏等产品上,并于 2020 年开发者大会上宣布为智能手机升级支持鸿蒙 HarmonyOS 2.0.华为 ...

  3. 谁有m55啊?帮忙测试一下我的这个游戏是否能在m55上运行。高分相送!

    游戏在这里下载: http://jjlin.wx-e.com/zuopin/Plane.zip 高分相送. 欢迎访问我的主页: http://jjlin.wx-e.com/

  4. 甲骨文发布适用于 MongoDB 的 Oracle Database API;Chrome 和 Edge 互相“拉踩”;树莓派驱动程序现可在 Android 上运行 | 开源日报

    整理 | 宋彤彤 责编 | 屠敏 开源吞噬世界的趋势下,借助开源软件,基于开源协议,任何人都可以得到项目的源代码,加以学习.修改,甚至是重新分发.关注「开源日报」,一文速览国内外今日的开源大事件吧! ...

  5. 安卓程序打包到安卓手机上运行Android程序

    1.Android程序打包 Android程序开发完成后,如果要发布别人使用,就需要将自己的程序打包成正式的Android安装包文件(Android  Application Package,简称AP ...

  6. 树莓派可以玩linux游戏吗,如何在树莓派上玩经典PC游戏

    Raspberry Pi提供了令人难以置信的游戏和其他软件库.您可能知道它为模拟其他平台奠定了良好的基础,但是您知道它可以运行复古的PC软件吗? 在Windows之前,就有MS-DOS.可以通过几种不 ...

  7. Unity 3D中的内存管理与优化游戏运行性能的经验

    Unity3D在内存占用上一直被人诟病,特别是对于面向移动设备的游戏开发,动辄内存占用飙上一两百兆,导致内存资源耗尽,从而被系统强退造成极差的体验.类似这种情况并不少见,但是绝大部分都是可以避免的.虽 ...

  8. linux如何运行windows游戏,如何在Linux上运行Windows应用程序和游戏 互联网技术圈 互联网技术圈...

    在本教程中,我将向您介绍如何在Linux中运行Windows应用程序和游戏.您可能知道,Microsoft Windows使用DirectX来运行游戏.因此,在Windows平台上玩一些需要Direc ...

  9. Mac/Win上运行Switch游戏(亲测可用)

    目录 1.概述 2.准备阶段 3.NS模拟器 4.运行游戏 5.声明 1.概述 本文阐述了如何在Mac(支持m1,m2芯片)/Win上运行Switch游戏.核心思想为在采用NS模拟器运行游戏.本文具体 ...

最新文章

  1. java正则表达式:查找所有{XXX}
  2. php制作表格生成器,php表格生成图片.doc
  3. BZOJ2038: [2009国家集训队]小Z的袜子(hose)
  4. 【机器学习经典算法源码分析系列】-- 逻辑回归
  5. 如何化身BAT面试收割机?不吃透都对不起自己
  6. 诗歌rails之获取本地ip地址
  7. 值得关注!2021音视频人才成长路线图发布了
  8. 记一次2048小游戏开发
  9. JAVA练习55-最小的k个数
  10. 密封槽设计标准_密封槽设计标准
  11. c语言切蛋糕题编程,切蛋糕问题.ppt
  12. ORACLE导出表数据-dmp文件
  13. java word中插入图片_在Word文档中插入图片
  14. 独家爆料:创宇云与小鸟云的故事
  15. 食物语服务器什么时候维护,食物语无法登录游戏怎么办_食物语无法登录游戏解决方法介绍_游戏吧...
  16. 中关村科金李超:多元融合成为音视频技术发展新风向
  17. VueUse 中文文档:Components 组件
  18. 高通滤波器与带通滤波器
  19. 杨澜:25岁后女孩子必需要懂14件事
  20. 利用Flask动态展示Pyechats图表

热门文章

  1. python中幂运算_python的幂运算
  2. js之鼠标的拖曳效果
  3. linux smb 连上 断开,linux – 如何在客户端断开连接后阻止samba持有文件锁?
  4. 蓝噪声取样(Blue noise sampling) 相关知识
  5. HTML横向二级导航
  6. NR 物理资源(pointA,PRB,CRB之间关系)
  7. 代付系统/代付系统源码/支付宝代付系统/API代付系统
  8. 面向大规模流量活动的高可用架构实践
  9. 算法学习:图的深度优先遍历(DFS)
  10. sql sever使用