インスタントゲームクイックスタート

ゲームクライアントの作成

アプリの設定が終わったら、ゲームクライアントを作成する必要があります。ゲームクライアントのルートディレクトリには、index.htmlファイルを置く必要があります。まず、この行を追加してインスタントゲームSDKをインポートします。

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

FacebookのSDKでは、非同期機能にPromiseを幅広く使用しています。FBInstant.initializeAsync()を解決した後にのみ、読み込みUIとやり取りできるようになります。

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

Facebookのゲームクライアントでは、バンドル(.zipファイル)はまとめてダウンロードされません。代わりに、ルートで設定(fbapp-config.json)とメインファイル(index.html)を検索します。次に、メインファイルに含まれるロジックを実行し、そこからアセットのダウンロードを開始します。開発者は、読み込まれるアセットの順番とタイミングを詳細に管理できます。

ゲームの初期化に必要なアセットのダウンロード開始後は、Facebookがプレイヤーに読み込みリングを表示できるように、読み込みの進行状況を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のインフラストラクチャにホストされるため、独自のインフラにゲームのコンテンツをホストしたり、サードパーティーのサービスを使用する必要はありません。ゲームのテスト準備が整ったら、すべてのゲームファイルを1つの.zipファイルにパッケージ化します。

注: index.htmlファイルはこのアーカイブのサブフォルダではなくルートに配置してください。

.zipファイルをアップロードするには:

1. アプリのダッシュボードから、[ウェブホスティング]タブをクリックします。
2. ドロップダウンメニューから[インスタントゲーム]を選択し、[+バージョンをアップロード]をクリックして、.zipファイルをFacebookのホスティングサービスにアップロードします。
3. .zipファイルを選択し、バージョン変更に関する詳細情報を追加して、[アップロード]をクリックします。
4. .zipファイルの処理には数秒しかかかりません。状態がスタンバイに変わったら、[★]をクリックしてビルドを本番環境にプッシュします。

これで、ビルドをモバイル機器でテストできます。公開したビルドは、[開発中]セクションのMessengerのゲームリストに表示されるようになります。

開発プロセスを速めるには、グラフAPI経由でコマンドラインからビルドをアップロードする方法や、開発サーバーから直接テストする方法をお試しください。詳しくはインスタントゲームのテスト、公開、シェアをご覧ください。

コンテキトは、ゲームをプレイできる環境を定義します。通常、コンテキストでは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でカスタムアップデートを送信する

設定ファイルでテンプレートを宣言しておくと、FBInstant.updateAsyncの必須のtemplateフィールドを入力する際に使用できます。次は、三目並べの呼び出しの使用例です。相手の番になったことを相手に伝えます。

// 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のいずれかを使用して、より適したコンテキストに切り替えることができます。