Inicio rápido para juegos instantáneos

Crear el cliente del juego

Ahora que tu aplicación está configurada, debes empezar a crear el cliente de tu juego, que debe tener un archivo index.html en el directorio raíz. En primer lugar, añade la línea siguiente para importar el SDK de juegos instantáneos.

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

Nuestro SDK utiliza ampliamente los objetos Promise para la funcionalidad asíncrona. Podrás interactuar con la interfaz de usuario de carga únicamente cuando FBInstant.initializeAsync() se resuelva.

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

Nuestro cliente de juego no descargará tu paquete (el archivo .zip) de inmediato, sino que buscará la raíz de la configuración (fbapp-config.json) y el archivo principal (index.html). A continuación, empezará a ejecutar la lógica que se incluye en el archivo principal y a descargar los activos que este contiene. Como desarrollador, puedes controlar el orden y el tiempo en el que se cargan los activos.

Cuando se empiecen a descargar los activos necesarios para inicializar el juego, debes informar al SDK sobre el progreso de carga para que podamos mostrar el indicador del estado de la 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 juegos instantáneos se aloja en la infraestructura de Facebook, por lo que no es necesario que alojes el contenido del juego en tu propio servidor o que recurras a un servicio de terceros. Una vez que el juego esté listo para probarse, comprime todos sus archivos en un único archivo .zip.

Nota: El archivo index.html debe encontrarse en la raíz de este archivo (no en una subcarpeta).

Para subir el archivo .zip:

1. Desde 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, añade los detalles sobre los cambios de la versión y haz clic en Subir.
4. El archivo .zip solo debería tardar unos segundos en procesarse. Cuando el estado cambie a “En pausa”, haz clic en "★" para enviar la compilación a producción.

Ahora puedes probar la compilación en tu dispositivo móvil y podrás ver en Messenger la compilación publicada en la lista de juegos, en la sección En desarrollo.

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

El término contexto define cualquier entorno en el que se puede jugar a un juego. El contexto identifica, normalmente, aspectos como una publicación o un grupo de Facebook.

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

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

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

Para obtener más información sobre las configuraciones admitidas, consulta la sección Configuración basada en el paquete. Para 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 el método updateAsync

Cuando hayas declarado la plantilla en el archivo de configuración, puedes usarla para rellenar el campo obligatorio template del método FBInstant.updateAsync. A continuación, se muestra cómo se usa la llamada en el juego de tres en raya para indicar 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 aspecto que tendrá el mensaje es el siguiente:

Para obtener más información sobre las actualizaciones de contexto personalizadas, revisa la referencia del SDK de juegos instantáneos.

Si quieres conocer las prácticas recomendadas, incluido cuándo enviar mensajes a otros jugadores, cuándo enviarles notificaciones y el mejor contenido que se puede incluir en estas actualizaciones, consulta la guía Prácticas recomendadas.

Nota: Recuerda que estas actualizaciones no se envían fuera de Messenger. Quizá te resulte útil usar el método context.getType() y detectar el extremo THREAD para adaptar tu experiencia. Asimismo, también puedes cambiar a un contexto más apropiado mediante los métodos context.switchAsync, context.chooseAsync o context.createAsync.