Código Google: Desenvolvendo um jogo para a web usando Google Play game services

Desenvolvendo um jogo para a web usando Google Play game services

02/07/2013

Olá! Eu sou +Bruno Oliveira e estou no Google há cerca de dois anos e meio. Trabalhei com Android no Brasil por um tempo e agora estou na equipe de jogos do Android em Mountain View, California.
No Google I/O esse ano, lançamos uma série de APIs para jogos (Google Play game services). Essas APIs multi-plataforma permite integrar sign-in, achievements, leaderboards e cloud save em jogos para Android, iOS e para a web. Nesse post, vamos dar uma introdução rápida sobre como usar o Google Play game services para criar jogos na web usando HTML e Javascript.
Eu tenho um certo gosto por jogos retrô, de uma época em que cada pixel era muito importante porque o número total de pixels na tela era bem pequeno. Por esse motivo todo jogo que eu faço tem um pouco dessa influência (e também porque dizer que meus gráficos pixelados são "retrô" é uma boa desculpa para minha falta de habilidade artística!).
Como começar?
Vou usar como exemplo um jogo que escrevi recentemente, o Firewall Defense (esse é o momento no qual ao invés de ler o resto desse artigo, você vai acabar indo jogar o jogo, mas tudo bem, eu entendo -- mas não passe na minha frente no ranking dos high scores!).

Ok, vamos lá. Em primeiro lugar, temos que planejar como será o jogo. Além de planejar a parte de como jogá-lo, também temos que pensar em quais serão os achievements e os leaderboards que vamos adicionar.
No Firewall Defense, o jogador tem a missão de defender um firewall dos vírus malignos que tentarão destruí-lo. O jogador controla um retângulo branco (que, com alguma imaginação, claramente é um lançador de mísseis) usando o teclado e atira linhas brancas (que claramente são mísseis). Mas, para complicar mais as coisas, há também os pacotes de dados legítimos, que não devem ser destruídos. É importante pensar na progressão da dificuldade; um bom jogo começa fácil e progressivamente fica mais difícil. Por isso, escolhi fazer com que o ritmo de geração dos inimigos aumente conforme o jogador avança no jogo. Além disso, a velocidade dos inimigos também fica cada vez maior.
Com o gameplay desenhado, precisamos agora pensar onde o jogo será publicado. Uma opção prática é publicá-lo no Google App Engine. Foi o que fiz com o Firewall Defense. Assim, você terá uma URL para o seu jogo que será como nome-do-jogo.appspot.com.
Agora, vamos pensar nos achievements do jogo. Um achievement deve ser uma conquista não trivial, uma recompensa para o jogador que consegue fazer algo que exige precisão, velocidade ou determinação. Quando o jogador consegue atingir esse objetivo, dizemos que o achievement foi destravado (unlocked). Há dois tipos de achievement: os normais e os incrementais. Os normais são destravados uma única vez (por exemplo "Chegar ao Nível 40"), enquanto que os incrementais exigem um certo número de passos (por exemplo "Derrotar 100 inimigos").
Alguns exemplos de achievements normais do Firewall Defense:

Not a disaster: destruir um inimigo.

Cadet: atingir uma pontuação de 1000 pontos.

Soldier: atingir uma pontuação de 2000 pontos.

Captain: atingir uma pontuação de 3000 pontos.

Alguns exemplos de achievements incrementais:

Experience - Newbie: destruir 50 inimigos

Experience - Intermediate: destruir 100 inimigos

Frequent Player: jogar 20 jogos.

Serious Player: jogar 20 jogos conseguido pontuação de pelo menos 2000 pontos em cada.

Para leaderboards, teremos um único, que será o de pontuações globais. Jogos mais avançados poderiam ter um leaderboard para cada modalidade jogo, mas como temos uma única modalidade, não precisaremos de mais de um.
Uma vez decididos os achievements e leaderboards, devemos criar o projeto no Google Play Developer Console:

Clique no tab de jogos (ícone de joystick)

Clique em Add New Game.

Digite o nome do seu jogo e escolha uma categoria, e clique Continue.

Vá para a aba "2. Linked Apps"

Clique "Link a web app"

Digite a URL do seu jogo. Se você está usando o Google App Engine, por exemplo, poderia ser algo como http://nome-do-jogo.appspot.com/ (lembre de colocar a barra no final).

Clique em Continue

Agora devemos criar um OAuth2 Client ao app. Para isso clique no botão Authorize your app now.

Insira seu logotipo e novamente a URL do seu jogo.

Clique em Continue.

Digite novamente seu hostname e clique Create Client.

Seu Client ID aparecerá, será algo como 123456789012.apps.googleusercontent.com.

Guarde seu Client ID, pois você precisará dele em breve (não é necessário obter o Client Secret no nosso exemplo).

Agora temos que adicionar o seu computador local como origem Javascript. Para isso, vá para a aba "1. Game details" e vá para a parte mais inferior dessa tela. Você verá um título "API Console Project" e um link para o seu projeto no API Console. Clique nesse link

Uma vez no API console, clique na aba "API Access" e localize seu Client ID (que será o único existente). Clique em "Edit settings..."

Na caixa "Authorized Javascript Origins", adicione as seguintes URLs, uma por linha (substituindo nome-do-jogo pela sua URL verdadeira):http://nome-do-jogo.appspot.com
https://nome-do-jogo.appspot.com
http://localhost:8080/index.html

Clique Update.

Agora podemos criar os achievements e o leaderboard. Volte para o Google Play Developer Console, selecione o seu jogo e vá para a aba Achievements. Siga as instruções na interface para adicionar cada um dos achievements do seu jogo, prestando atenção a quais deles devem ser normais e quais devem ser incrementais.
Depois, vá para a aba Leaderboards e crie os leaderboards que o seu jogo usará. No meu caso, criei somente um, chamado "High Scores".
Observe que cada achievement e cada leaderboard tem um ID, que é uma string alfanumérica que parece com "Cfwj331afs3rsdkj_Gc". Copie cada uma dessas strings para um arquivo de texto para usar no passo seguinte.
Agora podemos desenvolver o jogo em HTML e Javascript. Convém colocar os IDs em constantes globais no começo do Javascript:
var gameservices = {};
// IDs (obtidos do Google Play Developer Console)
gameservices.CLIENT_ID = "123456789012.apps.googleusercontent.com";
gameservices.LEADERBOARD_ID = "CfaIhZQOW-vgzFAIQAJ";
gameservices.ACHIEVEMENTS = {
KILL_ENEMY: "CgkIhZGW-vgbEIQQAz", MEU_ACHIEVEMENT: "CgkIhZGW-vgbEAIEBk", MEU_OUTRO_ACHIEVEMENT: "CgkIhFDW-vgbEAIQAo"
} ...etc.
Agora, precisamos inicializar a API como descrito nas instruções.
$(document).ready(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
});
E adicionar o botão de Sign In no HTML do jogo:
<div id="sign_in_bar">
     <div id="sign_in_button">
        <span class="g-signin"
              data-callback="onSignInResult"
              data-clientid="123456789012.apps.googleusercontent.com"
              data-cookiepolicy="single_host_origin"
           data-requestvisibleactions="http://schemas.google.com/AddActivity"
              data-scope="https://www.googleapis.com/auth/games">
        </span>
     </div>
  </div>
Agora escrevemos a função que será chamada quando o sign-in tiver sucesso:
gameservices.onSignInResult = function(authResult) {
if (authResult['access_token']) {    $('#sign_in_bar').hide(); // esconde o botão de sign-in    gameservices.signedIn = true;
   // carrega a API:
   gapi.client.load("games", "v1", gameservices.onApiLoaded);
}
else if (authResult['error']) {
   // sign in falhou.    gameservices.signedIn = false;
   $('#sign_in_bar').show(); // mostra o botão de sign-in
}
}
A função onApiLoaded será chamada quando a API estiver pronta para usar:
gameservices.onApiLoaded = function() { // podemos começar o jogo!
}
Agora podemos começar o jogo!
Durante o jogo, quando quisermos enviar uma pontuação para o servidor, basta fazer a seguinte chamada:
var score = ...; // pontuação do jogador if (gameservices.signedIn) {
var req = gapi.client.games.scores.submit({
   leaderboardId: gameservices.LEADERBOARD_ID, score: score });
req.execute();
}
Durante o jogo, quando desejarmos destravar um achievement, podemos fazer a seguinte chamada:
var achId = ... // ID do achievement aqui. if (gameservices.signedIn) { // cache local, para evitar chamar a API repetidamente:
if (!gameservices.achievements[achId].unlocked) {
   gameservices.achievements[achId].unlocked = true;
   var req = gapi.client.games.achievements.unlock({ achievementId: achId });
   req.execute(function(resp) {
     if (resp) {
       gameservices.achievements[achId].unlocked = true;
       if (resp.newlyUnlocked) {          // mostra popup para o usuário dizendo que o achievement foi          // destravado (por exmeplo, um <div> semitransparente)          // ...        }
     }
   }); } }
De maneira semelhante, para incrementar um achievement incremental, podemos fazer desta forma:
var steps = ... // calcular quantos passos incrementar; var achId = ... // ID do achievement aqui. if (gameservices.signedIn) {
var req = gapi.client.games.achievements.increment({
   achievementId: achId,
   stepsToIncrement: steps
});
req.execute(function(resp) {
   if (resp && resp.newlyUnlocked) {
       ach.unlocked = true;
       // mostrar o popup de "achievement destravado" para o usuário
     }
   }
});
}
Não esqueça de fornecer um botão de sign-out para que o usuário possa desconectar sua conta do jogo (implementado conforme instruções):
function desconectaUsuario() {
if (!gameservices.signedIn) return;
var access_token = gapi.auth.getToken();
var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' +
   access_token.access_token;

gameservices.signedIn = false;

// Perform an asynchronous GET request.
$.ajax({
   type: 'GET',
   url: revokeUrl,
   async: false,
   contentType: "application/json",
   dataType: 'jsonp',
   success: function(nullResponse) {
     gameservices.onSignInResult(false);
   },
   error: function(e) {
     console.log(e);
     alert("Failed to disconnect. You can also do this manually at " +
         "https://plus.google.com/apps.");
   }
});
}
Espero que esse post tenha sido útil para mostrar um pouco sobre como a API web do Google Play game services funciona. Para informações mais detalhadas, não deixe de consultar a documentação das API REST e a documentação geral sobre Google Play game services.
Um abraço! Ou, numa saudação melhor, "Live long and develop!"
+Bruno Oliveira Developer Relations, Android