Démarrage rapide des Jeux instantanés

Créer votre jeu client

Maintenant que votre app est configurée, vous devez commencer à créer le client de votre jeu. Ce dernier doit avoir un fichier index.html dans le répertoire racine. Commencez par importer le SDK Instant Games en ajoutant cette ligne.

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

Notre SDK fait largement appel à des objets Promise pour les opérations asynchrones. Vous ne pourrez interagir avec l’IU de chargement qu’une fois FBInstant.initializeAsync() résolu.

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

Notre client de jeu ne télécharge pas votre pack (fichier .zip) d’un seul coup. Il recherche plutôt la racine de la configuration (fbapp-config.json) et le fichier principal (index.html). Il commence ensuite à exécuter la logique contenue dans le fichier principal, puis télécharge les ressources à partir de là. En tant que développeur, vous pouvez contrôler entièrement l’ordre et l’heure selon lesquels charger vos ressources.

Dès que vous commencez à télécharger les ressources nécessaires à l’initialisation du jeu, vous devez informer le SDK de la progression du chargement afin que nous puissions montrer le cercle de chargement aux joueurs.

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();
});

Pour en savoir plus sur les méthodes initializeAsync(), setLoadingProgress() et startGameAsync(), consultez le document de référence sur le SDK.

Le contenu des jeux instantanés est hébergé sur l’infrastructure Facebook, vous n’avez donc pas besoin d’héberger le contenu de votre jeu sur votre propre infrastructure ou d’utiliser des services tiers. Une fois le jeu prêt pour les tests, compressez l’ensemble de ses fichiers dans un fichier .zip unique.

Remarque : le fichier index.html doit être placé à la racine de cette archive et non dans un sous-répertoire.

Pour importer le fichier .zip :

1. Dans le tableau de bord de l'app, cliquez sur l'onglet Hébergement web.
2. Sélectionnez Jeu instantané dans le menu déroulant et cliquez sur +Télécharger la version pour importer le fichier .zip sur le service d’hébergement de Facebook.
3. Choisissez le fichier.zip, ajoutez des informations sur les changements de version et cliquez sur Télécharger.
4. Le traitement du fichier .zip ne devrait prendre que quelques secondes. Dès que l’état indique En attente, cliquez sur « ★ » pour lancer le programme en production.

Vous pouvez à présent tester le développement sur votre appareil mobile. Le programme publié s’affichera dans la liste des jeux, dans Messenger, sous une section intitulée En développement.

Pour accélérer la phase de développement, vous pouvez importer votre version depuis la ligne de commande via l’API Graph ou effectuer des tests directement depuis votre serveur de développement. En savoir plus sur Test, publication et partage de votre jeu instantané

Le mot Contexte définit tous les environnements dans lesquels il est possible de jouer à un jeu. Fréquemment, le contexte identifie des éléments, comme une publication ou un groupe Facebook.

L’exemple ci-dessous indique comment envoyer une mise à jour de contexte et à quoi elle ressemblera dans une conversation Messenger.

Étape 1 : déclarer les modèles dans un fichier de configuration

Pour déclarer vos mises à jour personnalisées, vous devez créer un fichier de configuration appelé fbapp-config.json et le placer à la racine de votre pack avec votre fichier index.html.

Pour en savoir plus sur les configurations prises en charge, consultez la section sur la configuration basée sur un pack. Dans le cadre de cette démonstration, le contenu du fichier doit se présenter comme suit :

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

Étape 2 : Envoyer une mise à jour personnalisée avec updateAsync

Après avoir déclaré votre modèle dans votre fichier de configuration, vous pouvez l’utiliser pour renseigner le champ template obligatoire de FBInstant.updateAsync. Voici comment l’appel est utilisé dans le Morpion pour indiquer à l’adversaire que c’est son tour.

// 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();
});

Voici un aperçu du message :

Pour en savoir plus sur les mises à jour personnalisées du contexte, consultez notre section Référence concernant le SDK Instant Games.

Pour en savoir plus sur les meilleures pratiques, notamment quand envoyer des messages à d’autres joueurs, quand leur envoyer une notification et quel contenu inclure dans ces mises à jour, consultez la section Recommandations.

Remarque : les mises à jour de contexte ne sont pas envoyées en dehors de Messenger. Il peut être utile de personnaliser votre expérience en utilisant la méthode context.getType() et en détectant THREAD. Vous pouvez basculer vers un contexte plus approprié à l’aide de context.switchAsync, context.chooseAsync ou context.createAsync.