Início rápido nos Jogos Instantâneos

Criar o cliente de seu jogo

Agora que seu aplicativo está configurado, é preciso iniciar a criação do cliente do jogo. O cliente do jogo precisa ter um arquivo index.html no diretório raiz. Comece importando o SDK dos Jogos Instantâneos adicionando esta linha.

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

Nosso SDK faz uso extensivo de Promessas para funcionalidade assíncrona. Você só será capaz de interagir com a interface do usuário de carregamento depois que a FBInstant.initializeAsync() for resolvida.

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

Nosso cliente de jogos não baixará seu pacote (arquivo .zip) todo de uma só vez. Em vez disso, pesquisará na raiz para ver a configuração (fbapp-config.json) e no arquivo principal (index.html). Em seguida, iniciará a execução da lógica contida no arquivo principal e iniciará o download dos ativos. Como desenvolvedor, você tem controle total sobre a ordem e a hora em que seus ativos serão carregados.

Depois que iniciar o download dos ativos necessários para inicializar o jogo, informe ao SDK sobre o andamento do carregamento, para exibirmos o anel de carregamento aos jogadores.

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 ver mais informações sobre os métodos initializeAsync(), setLoadingProgress() e startGameAsync(), consulte a Referência do SDK.

O conteúdo dos Jogos instantâneos é hospedado na infraestrutura do Facebook, por isso não é preciso hospedar o conteúdo do jogo no seu próprio servidor ou usar servidores de terceiros. Quando o jogo estiver pronto para ser testado, compacte todos os arquivos em um único arquivo .zip.

Nota: o arquivo index.html deverá estar na raiz desse arquivo, e não em uma subpasta.

Para carregar o arquivo .zip:

1. No painel do aplicativo, clique na guia Hospedagem na web.
2. Selecione Jogo Instantâneo no menu suspenso, clique em +Carregar versão para carregar o arquivo .zip no serviço de hospedagem do Facebook.
3. Escolha o arquivo .zip, adicione detalhes sobre as alterações na versão e clique em Carregar.
4. O arquivo .zip deverá levar alguns segundos para ser processado. Quando o estado mudar para "Em espera", clique em "★" para enviar a compilação para produção.

Agora você pode testar a compilação em seu dispositivo móvel. A compilação publicada agora estará visível na lista de jogos no Messenger, em uma seção chamada Em desenvolvimento.

Para acelerar o processo de desenvolvimento, você pode carregar sua compilação da linha de comando pela Graph API ou testar diretamente em seu servidor de desenvolvimento. Saiba mais sobre Como testar, publicar e compartilhar um Jogo Instantâneo.

O contexto define qualquer ambiente em que um jogo pode ser utilizado. É comum que o contexto identifique coisas como um grupo ou uma publicação no Facebook.

O exemplo abaixo mostra como enviar uma atualização de contexto e como ela será exibida em uma conversa no Messenger.

Etapa 1: Declarar modelos em um arquivo de configuração

Para declarar suas atualizações personalizadas, é preciso criar um arquivo de configuração chamado fbapp-config.json e colocá-lo na raiz do pacote, junto com o arquivo index.html.

Para mais informações sobre as configurações compatíveis, consulte a seção Configuração baseada em pacote. Para esta demonstração, o conteúdo do arquivo deve ser o seguinte:

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

Etapa 2: Enviar uma atualização personalizada com updateAsync

Depois que seu modelo tiver sido declarado no seu arquivo de configuração, você poderá ser utilizado para preencher o campo template obrigatório em FBInstant.updateAsync. Veja a seguir como a chamada é utilizada no Jogo-da-velha para avisar ao oponente que é a vez dele.

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

A mensagem ficará assim:

Para mais informações sobre atualizações personalizadas de contexto, consulte nossa Referência do SDK dos Jogos Instantâneos.

Para ver as melhores práticas, incluindo quando enviar mensagens a outros jogadores, quando notificá-los e qual o conteúdo a ser incluído nessas atualizações, consulte nosso guia de Melhores práticas.

Nota: as atualizações de contexto não são enviadas fora do Messenger. Pode ser útil personalizar sua experiência utilizando o método context.getType() e detectando THREAD. É possível passar para um contexto mais apropriado usando context.switchAsync, context.chooseAsync ou context.createAsync.