Schnellstart für Instant Games

Deinen Spiel-Client erstellen

Nachdem nun die App eingerichtet ist, musst du deinen Spiele-Client erstellen. Der Spiele-Client muss im Stammverzeichnis über eine index.html-Datei verfügen. Beginne mit dem Import des Instant Games-SDK, indem du diese Zeile hinzufügst.

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

Unser SDK nutzt Promises umfassend für asynchrone Funktionen. Du kannst erst mit der ladenden Benutzeroberfläche interagieren, nachdem FBInstant.initializeAsync() aufgelöst wird.

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

Unser Spiele-Client lädt dein Bundle (.zip-Datei) nicht in einem Rutsch herunter. Stattdessen sucht er im Stammverzeichnis nach Konfiguration (fbapp-config.json) und Hauptdatei (index.html). Daraufhin beginnt er mit der Ausführung der in der Hauptdatei enthaltenen Logik und lädt die Elemente von dort herunter. Als Entwickler kannst du festlegen, wann und in welcher Reihenfolge die Elemente geladen werden.

Sobald die zum Initialisieren des Spiels erforderlichen Elemente heruntergeladen wurden, musst du das SDK über den Ladefortschritt informieren, damit es dem Spieler das Ladesymbol anzeigen kann.

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

Weitere Informationen zu den Methoden initializeAsync(), setLoadingProgress() und startGameAsync() findest du in der SDK-Referenz.

Inhalte von Instant-Spielen werden auf Facebook-Infrastruktur gehostet. Du musst den Spieleinhalt also nicht in deinem eigenen Server hosten oder Drittanbieterdienste verwenden. Wenn das Spiel zum Testen bereit ist, verpacke alle Spieldateien in einer einzelnen ZIP-Datei.

Hinweis: Die index.html-Datei sollte sich im Stammverzeichnis dieses Archivs und nicht in einem Unterordner befinden.

Hochladen der ZIP-Datei:

1. Klicke im Dashboard der App auf den Tab Web Hosting
2. Wähle aus dem Dropdown-Menü Instant Game, klicke auf +Version hochladen, um die ZIP-Datei auf den Hosting-Service von Facebook hochzuladen.
3. Wähle die ZIP-Datei aus, füge Details zu den Versionsänderungen hinzu und klicke auf Hochladen.
4. Die Bearbeitung der ZIP-Datei sollte nur ein paar Sekunden dauern. Wenn der Status zu „Standby“ wechselt, klicke auf „★“, um den Build an die Produktion zu übergeben.

Du kannst den Build nun auf deinem Mobilgerät testen. Der veröffentlichte Build erscheint nun in der Spieleliste im Messenger im Abschnitt In Entwicklung.

Um den Entwicklungsprozess zu beschleunigen, kannst du deinen Build über die Befehlszeile der Graph API hochladen oder direkt über den Entwicklungsserver Tests durchführen. Erfahre mehr über das Testen, Veröffentlichen und Teilen deines Instant Game.

Kontext definiert eine Umgebung, in der ein Spiel gespielt werden kann. Einfacher ausgedrückt beschreibt der Kontext Dinge wie einen Facebook-Beitrag oder eine Gruppe.

Das unten stehende Beispiel zeigt, wie wir ein Kontext-Update senden können und wie dieses in einer Messenger-Unterhaltung aussieht.

Schritt 1: Deklariere Vorlagen in einer Konfigurationsdatei

Um benutzerdefinierte Aktualisierungen zu deklarieren, musst du eine Konfigurationsdatei mit dem Namen fbapp-config.json erstellen und sie gemeinsam mit deiner index.html-Datei im Stammverzeichnis deines Bundles ablegen.

Weitere Informationen zu unterstützten Konfigurationen findest du im Abschnitt zur Bundle-basierten Konfiguration. Für unser Beispiel sollten folgende Dateiinhalte vorhanden sein:

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

Schritt 2: Sende eine benutzerdefinierte Aktualisierung mit updateAsync

Sobald deine Vorlage in deiner Konfigurationsdatei deklariert ist, kannst du das erforderliche template-Feld in FBInstant.updateAsync damit ausfüllen. So wird der Aufruf in Tic-Tac-Toe verwendet, um dem Gegner mitzuteilen, dass er am Zug ist.

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

Hier siehst du, wie die Nachricht aussieht:

Weitere Informationen zu benutzerdefinierten Kontext-Updates findest du in unserer Referenz zum Instant Games-SDK.

Einen Leitfaden mit Best Practices, in dem du erfährst, wann du Nachrichten an Spieler senden solltest und welche Inhalte diese Updates enthalten sollten, findest du in den Kategorien Best Practices.

Hinweis: Kontext-Updates werden nicht außerhalb von Messenger gesendet. Es empfiehlt sich, dein Erlebnis mithilfe der context.getType()-Methode anzupassen und THREAD zu ermitteln. Mit context.switchAsync, context.chooseAsync oder context.createAsync kannst du zu einem passenderen Kontext wechseln.