Оптимизация игр для 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 прямо в приложение, чтобы люди могли пользоваться ими, не прерывая игровой процесс.

Оптимизация макета

"Резиновый" макет позволяет развернуть окно игры согласно размерам браузера пользователя. Благодаря этой функции формы iframe, содержащие вашу игру, заполнят всю доступную ширину и (или) высоту окна браузера.

Так ваше приложение заполняет макет веб-игры Facebook с "резиновой" шириной и длиной или с фиксированными значениями.

Чтобы воспользоваться "резиновым" макетом, сначала нужно настроить параметры на Панели приложений. Откройте страницу настроек своего приложения и найдите раздел "Приложение на Facebook" (см. изображение ниже).

Настройка "резинового" макета в Панели приложений.

Фиксированная ширина

Если для фиксированной ширины задать значение No, то ширина формы iframe, содержащей вашу игру, составит 100%. В этом случае, если игроки поменяют ширину окна браузера, материалы приложения будут выровнены по левому краю, а форма iframe заполнит страницу.

Если для фиксированной ширины будет задано значение Yes, форма iframe всегда будет иметь ширину 760 пикселей. По умолчанию элемент <body> формы 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, это можно сделать с помощью события window.onresize, как и в случае с любой другой страницей HTML.

Следующий код определяет элемент HTML <div>, задает синий цвет фона и заполняет доступное пространство в окне браузера. Он реагирует на событие 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 будет реагировать на событие Event.RESIZE для объекта stage. Это событие наступает каждый раз, когда игрок меняет размер swf. С его помощью вы сможете менять расположение элементов пользовательского интерфейса.

Работа с диалоговыми окнами или всплывающими меню во Flash и других плагинах

Вполне возможно, что в игре, созданной во Flash или другом плагине, игрок будет нажимать элементы интерфейса Facebook, которые могут закрыть собой игру. Иногда это происходит из-за определенных событий в игре (например, при появлении диалога входа) или потому, что игрок пользуется элементами Facebook рядом с окном игры (например, в окне Messenger).

Во избежание подобных проблем рекомендуем создать динамический снимок экрана приложения, а затем заменить им элемент <object>. Эта замена займет не более 200 мс. Она позволит корректно отображать диалоговые окна и оставить хорошее впечатление у игроков.

Лучше всего создать во Flash-коде функцию, которая сделает снимок экрана в JPEG или другом компактном формате, затем перекодирует эту строку в Base64, а потом сделает паузу в игре. Далее нужно будет перенести эту функцию в JavaScript, назвав ее, например, exportScreenshot (во Flash используется функция flash.external.ExternalInterface.addCallback). Также создайте функцию, которая возобновляет игру при возвращении фокуса.

Затем в коде JavaScript напишите прослушивающую функцию, которая будет вызываться, когда игра делает паузу или возобновляется, и зарегистрируйте ее на Facebook. Для этого отправьте функцию в FB.init() в виде параметра hideFlashCallback. Прослушивающая функция получит словарь параметров с ключом с именем state. Если игру нужно скрыть, ключ будет иметь значение opened. В этом случае прослушивающая функция должна вызвать метод exportScreenshot Flash-приложения, создать URL, используя данные изображения, перекодированные в Base64, и назначить его значением параметра src элемента img. Таким образом элемент, содержащий ваше приложение, будет убран с экрана с помощью метода FB.Canvas.hideFlashElement в SDK для JavaScript и заменен этим img. Если словарь параметров, переданный прослушивающей функции, не имеет значения state: "opened", верните Flash-приложение на экран с помощью метода FB.Canvas.showFlashElement.

При желании можно экспортировать измененный снимок экрана. Для этого уменьшите его в 4 раза (изображение станет размытым) или затемните, чтобы снимок переместился на задний план. Благодаря этому пользователь переключит свое внимание с игры на появившийся элемент интерфейса.

Исключение перезагрузок с помощью `urlhandler`

Метод SDK для JavaScript FB.Canvas.setUrlHandler() регистрирует обратный вызов, благодаря чему игра не перезапускается, если человек нажимает в интерфейсе Facebook элемент, нажатие которого обычно приводит к перезагрузке игры. Примеры:

все новости в Тиккере;
закладки;
запросы из раскрывающегося списка закладок;
уведомления о запросах.

Например, если человек нажимает новость в Тиккере о том, что его друг сделал определенное достижение в вашей игре, по умолчанию он будет переадресован на URL этого достижения. Вместо этого ваша игра может зарегистрировать обратный вызов, чтобы показать достижение непосредственно в приложении.

Обратный вызов будет содержать поле, в котором указан путь URL относительно URL веб-игры Facebook вашего приложения. Например, пусть открывался бы следующий URL:

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, задайте для параметра WebGL в настройках веб-игр Facebook значение "Да". Это позволит Facebook оптимизировать обработку элементов WebGL для игроков.

Если браузер игрока не поддерживает WebGL, при попытке доступа к игре откроется показанная ниже страница. На ней будут ссылки на веб-браузеры, совместимые с WebGL, а также (если игра доступна в Facebook Gameroom) ссылка на клиент Gameroom.

Если вы не хотите перенаправлять игроков на эту страницу, задайте для параметра Не использовать WebGL при несовместимости значение "Да". В этом случае вам нужно будет настроить отображение игры в браузерах, которые не поддерживают WebGL.