Быстрое начало работы с Моментальными играми

Создание игрового клиента

Теперь приложение настроено, и нужно создать игровой клиент. В корневом каталоге игрового клиента должен быть файл index.html. Для начала добавьте эту строку, чтобы импортировать SDK Моментальных игр.

<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

Наш SDK активно использует обещания для асинхронной работы. Вы сможете взаимодействовать с пользовательским интерфейсом скачивания только после разрешения FBInstant.initializeAsync().

FBInstant.initializeAsync()
  .then(function()
  // Start loading game assets here
);

Наш игровой клиент не будет одновременно скачивать весь ваш пакет (файл .zip). Сначала он найдет файл конфигурации (fbapp-config.json) и главный файл (index.html) в корневом каталоге, а затем начнет скачивание объектов согласно логике главного файла. Как разработчик вы можете полностью контролировать порядок и время загрузки своих объектов.

Во время скачивания объектов, необходимых для инициализации игры, вы должны информировать SDK о ходе этой процедуры, чтобы мы могли показывать игрокам индикатор скачивания.

var images = ['sprite1', 'sprite2', ...];
for (var i=0; i < images.length; i++) {
  var assetName = images[i];  
  var progress = ((i+1)/images.length) * 100;  
  game.load.image(assetName);

  // Informs the SDK of loading progress
  FBInstant.setLoadingProgress(progress);
}

// Once all assets are loaded, tells the SDK 
// to end loading view and start the game
FBInstant.startGameAsync()
  .then(function() {
  // Retrieving context and player information can only be done
  // once startGameAsync() resolves
  var contextId = FBInstant.context.getID();
  var contextType = FBInstant.context.getType();

  var playerName = FBInstant.player.getName();
  var playerPic = FBInstant.player.getPhoto();
  var playerId = FBInstant.player.getID();

  // Once startGameAsync() resolves it also means the loading view has 
  // been removed and the user can see the game viewport

  game.start();
});

Дополнительную информацию о методах initializeAsync(), setLoadingProgress() и startGameAsync() см. в справке по SDK.

Материалы моментальных игр размещаются в инфраструктуре Facebook, поэтому собственное пространство для хостинга или услуги сторонних поставщиков вам не потребуются. Когда игра будет готова к тестированию, запакуйте ее в один файл ZIP.

Обратите внимание, что файл index.html должен находиться в корневой папке этого архива.

Чтобы загрузить ZIP-файл, выполните перечисленные ниже действия.

1. На панели приложения откройте вкладку Веб-хостинг.
2. В раскрывающемся меню выберите Моментальная игра и нажмите Загрузить версию, чтобы загрузить ZIP-файл в хостинговый сервис Facebook.
3. Выберите ZIP-файл, добавьте информацию об изменениях в версии и нажмите Загрузить.
4. Обработка ZIP-файла занимает буквально несколько секунд. Когда файл получит статус "В ожидании", нажмите кнопку ★, чтобы отправить сборку в производство.

После этого вы сможете протестировать ее на мобильном устройстве. Опубликованная сборка будет добавлена в ваш список игр в Messenger в раздел В разработке.

Чтобы ускорить процесс разработки, можно загрузить сборку из командной строки через API Graph или протестировать ее непосредственно на сервере разработки. Подробнее см. в разделе Тестирование, публикация и доступ к Моментальной игре.

Под контекстом подразумевается любая среда, в которой запускается игра. Как правило, контекст игры — это публикация или группа на Facebook и т. п.

В примере ниже показано, как отправить обновление контекста и как оно выглядит в переписке Messenger.

Шаг 1. Объявление шаблонов в файле конфигурации

Чтобы объявить индивидуально настроенные обновления, создайте файл конфигурации fbapp-config.json и добавьте его в корневой каталог пакета вместе с файлом index.html.

Подробнее о поддерживаемых конфигурациях см. в разделе Пакетная конфигурация. Для этой демонстрации файл должен быть таким:

{
  "instant_games": {
    "platform_version": "RICH_GAMEPLAY",
    "custom_update_templates": {
      "play_turn": {
        "example": "Edgar played their move"
      }
    }
  }
}

Шаг 2. Отправка индивидуально настроенного обновления с параметром updateAsync

Объявленный в файле конфигурации шаблон можно использовать для заполнения обязательного поля template в FBInstant.updateAsync. Например, в игре "Крестики-нолики" этот вызов используется, чтобы сообщить сопернику, что сейчас его очередь ходить.

// This will post a custom update. If the game is played in a messenger
// chat thread, this will post a message into the thread with the specified
// image and text message. And when people launch the game from this
// message, those game sessions will be able to access the specified blob
// of data through FBInstant.getEntryPointData().
FBInstant.updateAsync({
  action: 'CUSTOM',
  cta: 'Play',
  image: base64Picture,
  text: {
    default: 'Edgar played their move',
    localizations: {
      en_US: 'Edgar played their move',
      es_LA: '\u00A1Edgar jug\u00F3 su jugada!'
    }
  }
  template: 'play_turn',
  data: { myReplayData: '...' },
  strategy: 'IMMEDIATE',
  notification: 'NO_PUSH'
}).then(function() {
  // Closes the game after the update is posted.
  FBInstant.quit();
});

Вот как выглядит сообщение:

Дополнительную информацию об индивидуально настроенных обновлениях контекста см. в справке по SDK Моментальных игр.

Ознакомьтесь с нашими рекомендациями по отправке сообщений и уведомлений игрокам.

Обратите внимание, что обновления контекста можно отправлять только в Messenger. Для индивидуальной настройки интерфейса можно использовать метод context.getType() и обнаруживать объекты THREAD. Для переключения на более подходящий контекст используйте context.switchAsync, context.chooseAsync или context.createAsync.