Avvio rapido per Giochi istantanei

Crea il tuo client di gioco

Dopo aver configurato la tua app, devi iniziare a creare il tuo client di gioco. Il client di gioco deve presentare un file index.html nella directory root. Inizia importando l'SDK dei giochi istantanei aggiungendo questa riga.

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

Il nostro SDK fa ampio uso dei costrutti promise per le funzionalità asincrone. Potrai interagire con l'interfaccia utente di caricamento sono dopo la risoluzione di FBInstant.initializeAsync().

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

Il nostro client di gioco non scarica il tuo bundle (file .zip) in una sola operazione. Ricerca invece l'elemento root per la configurazione (fbapp-config.json) e il file principale (index.html). A questo punto, verrà avviata l'esecuzione della logica contenuta nel file principale, quindi inizierà il download delle risorse. In qualità di sviluppatore, hai il pieno controllo dell'ordine e dell'ora di caricamento delle risorse.

Dopo aver avviato il download delle risorse necessarie all'inizializzazione del gioco, devi indicare all'SDK il processo di caricamento in modo da consentirci di mostrare l'anello di caricamento ai giocatori.

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

Per ulteriori informazioni sui metodi initializeAsync(), setLoadingProgress() e startGameAsync(), consulta il Riferimento all'SDK.

I contenuti di Giochi istantanei sono ospitati sull'infrastruttura Facebook, quindi non hai bisogno di ospitare i contenuti del gioco o di usare servizi di terzi. Quando il gioco è pronto per il test, crea un pacchetto di tutti i file del gioco con un singolo file .zip.

Nota: il file index.html deve trovarsi nella root dell'archivio e non in una sottocartella.

Per caricare il file .zip:

1. Dalla dashboard gestione app, clicca sulla tab Hosting web
2. Seleziona Gioco istantaneo dal menu a discesa, clicca su +Carica versione per caricare il file .zip sul servizio di hosting di Facebook.
3. Seleziona il file .zip, aggiungi dettagli sulle modifiche alla versione e clicca su Carica
4. Dovrebbero essere necessari solo pochi secondi per elaborare il file .zip. Quando lo stato cambia in Standby, clicca su "★" per portare la build in produzione

Ora puoi testare la build sul tuo dispositivo mobile. La build pubblicata sarà visibile nella lista dei giochi in Messenger, sotto la sezione chiamata In sviluppo.

Per velocizzare il processo di sviluppo, puoi caricare la build dalla riga di comando tramite l'API Graph o testare direttamente dal tuo server di sviluppo. Scopri di più Test, pubblicazione e condivisione di un gioco istantaneo.

Il termine contesto indica qualsiasi ambiente in cui può essere usato il gioco. Comunemente, il contesto identifica elementi come un post o un gruppo su Facebook.

L'esempio qui sotto mostra come inviare un aggiornamento di contesto e l'aspetto che avrà in una conversazione su Messenger.

Passaggio 1: dichiarazione dei modelli su un file di configurazione

Per dichiarare gli aggiornamenti personalizzati, è necessario creare un file di configurazione chiamato fbapp-config.json e posizionarlo nella root del bundle, insieme al file index.html.

Per maggiori informazioni sulle configurazioni supportate, fai riferimento alla sezione sulla configurazione basata sul bundle. Per questa demo, il contenuto del file dovrebbe essere il seguente:

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

Passaggio 2: Invio di un aggiornamento personalizzato con updateAsync

Una volta che il tuo modello è stato dichiarato nel file di configurazione, puoi usarlo per popolare il campo template obbligatorio in FBInstant.updateAsync. Ecco come viene usata la chiamata nel gioco del tris per dire all'avversario che è il suo turno.

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

Ecco come apparirà il messaggio:

Per ulteriori informazioni sugli aggiornamenti di contesto personalizzati, consulta il nostro Riferimento dell'SDK dei giochi istantanei.

Per le best practice, incluso quando inviare messaggi ad altri giocatori, quando notificarli e quali contenuti includere in questi aggiornamenti, consulta la nostra guida sulle Best practice.

Nota: gli aggiornamenti dei contesti non vengono inviati all'esterno di Messenger. Potrebbe essere utile personalizzare la tua esperienza usando il metodo context.getType() e rilevando THREAD. Puoi passare a un contesto più pertinente usando context.switchAsync, context.chooseAsync o context.createAsync.