Inicio rápido de los juegos instantáneos

Crear un cliente de juego

Ahora que ya configuraste tu aplicación, necesitas empezar a crear tu cliente de juego. El cliente de juego debe tener un archivo index.html en el directorio raíz. Para empezar, importa el SDK de juegos instantáneos agregando esta línea:

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

El SDK usa objetos promise ampliamente para efectos de funcionalidad asincrónica. Solo podrás interactuar con la interfaz de usuario de carga después de que se resuelva FBInstant.initializeAsync().

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

Nuestro cliente de juego no descargará tu paquete (archivo .zip) de una sola vez. En cambio, buscará la configuración (fbapp-config.json) y el archivo principal (index.html) en la raíz. Posteriormente, comenzará a ejecutar la lógica contenida en el archivo principal y empezará a descargar los activos desde allí. Como desarrollador, tienes el control completo del orden y la hora en que se descargan los activos.

Una vez que comienza la descarga de los activos necesarios para inicializar el juego, debes informar al SDK sobre el progreso de carga para que podamos mostrar el anillo de carga a los jugadores.

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

Para obtener más información sobre los métodos initializeAsync(), setLoadingProgress() y startGameAsync(), consulta la referencia del SDK.

El contenido de los juegos instantáneos se aloja en la infraestructura de Facebook, de modo que no necesitas alojar el contenido del juego por tu cuenta ni usar servicios de terceros. Una vez que el juego esté listo para probarse, comprime todos los archivos del juego en un único archivo .zip.

Note: El archivo index.html debe estar en el directorio raíz de este archivo y no en una subcarpeta.

Para subir el archivo .zip:

1. En el panel de la aplicación, haz clic en la pestaña Alojamiento web.
2. Selecciona Juego instantáneo en el menú desplegable y haz clic en +Subir versión para subir el archivo .zip al servicio de alojamiento de Facebook.
3. Elige el archivo .zip, agrega detalles sobre los cambios de la versión y haz clic en Subir.
4. El procesamiento del archivo .zip solo debería tardar unos segundos. Cuando el estado cambie a "Modo de espera", haz clic en "★" para enviar la compilación a la fase de producción.

Ahora puedes probar la compilación en tu dispositivo móvil. La compilación publicada aparecerá en la lista de juegos de Messenger, en la sección En desarrollo.

Para acelerar el proceso de desarrollo, puedes subir tu compilación desde la línea de comandos a través de la API Graph o probarla directamente desde el servidor de desarrollo. Obtén más información sobre cómo probar, publicar y compartir tu juego instantáneo.

El contexto es cualquier entorno en el que se pueda jugar un juego. Por lo general, el contexto representa entornos como una publicación o un grupo de Facebook.

En el ejemplo siguiente, se muestra cómo enviar una actualización de contexto y el aspecto que tendrá en una conversación de Messenger.

Paso 1: Declarar las plantillas en un archivo de configuración

Para declarar tus actualizaciones personalizadas, necesitas crear un archivo de configuración llamado fbapp-config.json y colocarlo en la raíz de tu paquete, junto con tu archivo index.html.

Para obtener más información sobre las configuraciones admitidas, consulta la sección de configuración basada en paquetes. Para fines de esta demostración, el contenido del archivo debe ser el siguiente:

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

Paso 2: Enviar una actualización personalizada con updateAsync

Una vez que la platilla se haya declarado en el archivo de configuración, podrás usarla para completar el campo obligatorio template en FBInstant.updateAsync. Así se usa la llamada en el juego "tres en línea" para comunicar al oponente que es su 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();
});

El mensaje se verá de la siguiente manera:

Para obtener más información sobre las actualizaciones en contextos personalizados, consulta la referencia del SDK para juegos instantáneos.

Si deseas orientación sobre cuándo enviar mensajes o notificaciones a otros jugadores y cuál es el contenido más adecuado para estas actualizaciones, entre otros temas, consulta la sección de prácticas recomendadas.

Nota: Las actualizaciones en contexto no se envían fuera de Messenger. Quizá te convenga adaptar tu experiencia con el método context.getType() y detectar THREAD. Puedes cambiar a un contexto más adecuando mediante context.switchAsync, context.chooseAsync o context.createAsync.