Anhand dieses Tutorials erstellst du schrittweise dein erstes Instant Game. Es ist eine rundenbasierte Version des klassischen Spiels „Tic-Tac-Toe“ (auch bekannt als „Drei gewinnt“). Es verwendet die Spiele-Updates und einen Spiele-Bot. |
Nach dem Vorgang Deine App einrichten bist du bereit, die ersten Schritte zu unternehmen:
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>
Wichtige Hinweise:
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:
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.
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" } } } }
Durch die Konfiguration einer benutzerdefinierten Aktualisierungsvorlage können wir jeder benutzerdefinierten Aktualisierung eine ID zuweisen und so die Analyse optimieren. Vorlagen-IDs müssen für alle Spiele zugewiesen werden.
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.
Der Spiele-Bot gibt deinem Spiel einen wirkungsvollen Kanal, um den Spieler zu einer erneuten Interaktion zu bewegen. Lies unseren Leitfaden zur Spiele-Bot-Einrichtung, um einen Spiele-Bot zu erstellen.
Nachdem du nun weißt, wie dein Instant Game und dein Spiele-Bot erstellt und konfiguriert werden, sieh dir die folgenden Anleitungen an: