Jogos em HTML5: Explore o mobile e física
Introdução
Este livro é continuação de minha obra anterior, Desenvolva jogos com HTML5 Canvas e JavaScript (*). Nela, introduzi a tecnologia Canvas do HTML5 e, principalmente, guiei o leitor pelos conceitos mais básicos envolvidos na criação de jogos em 2D: sprites, loops de animação, input do usuário e outros, sem depender de algum framework específico. Agora, para este novo livro, eu assumo que você já tenha esse conhecimento básico.
O que nós, você e eu, iremos fazer aqui é aprofundar nossos caminhos em algumas coisas mais específicas (leia-se frameworks), que são:
- Apache Cordova: inicialmente chamado PhoneGap, consiste em uma plataforma para a geração de aplicações HTML5 em diversos sistemas operacionais móveis (Android, iOS, Windows Phone etc.). Uma mesma base de código, usando as tecnologias web, rodando como apps em todos esses sistemas!
- Hammer.js: biblioteca que detecta gestos comuns em telas sensíveis ao toque, como pinças, rotações e outros, complementando o suporte do HTML5.
- Box2dWeb: a fantástica engine de simulação física Box2D, criada em C++ por Erin Catto, foi portada para inúmeras outras linguagens, inclusive, claro, JavaScript. Espero que só este fato já faça valer a pena a leitura deste livro para você, pois é a mesma API (conjunto de classes e métodos) para C++, Java, JavaScript e outros.
Não que eu pretenda que este livro esteja totalmente amarrado ao outro mas, para facilitar, vou pegar muitos códigos criados anteriormente e reutilizá-los (aprendi no meu jardim de infância da programação que é para isto que serve a orientação a objetos). Não se preocupe, caso não tenha lido a primeira obra. Darei uma recapitulada. Se você não a leu, será como mais um frameworkzinho que você está usando.
O livro está dividido em duas partes: Mobile e Física. Na primeira parte, estão os capítulos:
- *. Instalação do Apache Cordova: este framework permite transformar páginas HTML em apps para diversos sistemas operacionais móveis. Aqui explico o que é o Cordova, como funciona e sua instalação passo a passo. Ele se apoia em muitos outros programas que você deverá ter instalados em sua máquina de desenvolvimento.
- *. Criando o primeiro projeto: você aprenderá todo o ciclo de criação de um app Cordova, desde a configuração do projeto até a geração do pacote APK do Android assinado para distribuição.
- *. Eventos touch: conheceremos a especificação e a API do HTML5 para tratamento de eventos touchscreen. Aprenderemos a verificar as coordenadas, a cruzá-las com algum objeto no Canvas e como fazer para o jogador deslocar sprites arrastando-os com o dedo.
- *. Incrementando o jogo de nave: o jogo de guerra espacial que criamos no primeiro livro ganhará duas versões mobile: na primeira, a nave será controlada tocando botões na tela; na segunda, o jogador terá que inclinar o dispositivo móvel na direção em que ele quer que a nave se mova. Para isso, teremos que fazer a leitura do acelerômetro do aparelho. Também conheceremos a API de multimídia do Cordova, que permitirá o uso de som em aparelhos cuja webview nativa não suporta a API de áudio do HTML5.
- *. Interações avançadas com Hammer.js: você aprenderá a usar este framework para detectar gestos de pinça, rotação, deslocamentos e outros. Aqui, criaremos controles para movimentar um taco de bilhar, que será usado em um projeto prático de jogo na segunda parte do livro.
Na segunda parte, é feita uma introdução dos fundamentos do Box2dWeb e, em seguida, guio o leitor na construção de um jogo de bilhar, mostrando como unir a lógica de física com a lógica de negócios e de interação com o jogador:
- *. Introdução ao Box2dWeb: conceitos básicos desta engine de física. Criação do mundo físico, corpos, fixtures e gravidade.
- *. Configuração e movimento de corpos: crie corpos de diversos formatos, configure sua elasticidade e atrito, aplique forças e impulsos para movimentá-los.
- *. Iniciando o jogo de bilhar: construiremos um jogo utilizando a Box2dWeb para controlar os movimentos com física realista. Programaremos os sprites, posicionaremos as bolas na mesa e simularemos uma tacada, vendo-as se espalharem pelo cenário.
- *. Interação com o jogador e lógicas de negócio: incorporamos ao jogo os controles criados com o Hammer.js e executaremos lógicas de acordo com os eventos que ocorrerem, como fazer uma bola encaçapada desaparecer ou retornar ao seu ponto inicial, caso seja a bola branca.
- *. Simulações internas: usaremos o Box2dWeb puramente em memória para testar diversas jogadas que o computador pode realizar.
- *. Finalizando o jogo: determinaremos qual variedade de bilhar será implementada, e aplicaremos suas regras para selecionar a melhor tacada automática e para arbitrar o andamento do jogo.
O jogo de bilhar pode ser jogado agora mesmo em seu celular ou tablet, no endereço:
http://gamecursos.com.br/livro2/
Procure jogá-lo com o dispositivo móvel na posição paisagem (deitado). Para jogar:
- Coloque 2 dedos na área circular e gire
- Puxe a seta azul para regular a força
- Clique Pow!
Você deve acertar a branca na bola da vez indicada na tela; qual você encaçapa é indiferente. Ganha o jogo quem encaçapar a bola 9.
Todos os códigos, imagens e sons de jogos deste livro podem ser baixados em:
https://github.com/EdyKnopfler/games-js-2/archive/master.zip
O jogo de bilhar é disponibilizado sob a licença GNU, não sendo permitido o uso de seu código em aplicações comerciais. Os outros códigos e exercícios estão disponíveis sob a licença Apache, estes, sim, podendo ser usados comercialmente.
Você também precisará dos materiais do meu livro anterior:
http://github.com/EdyKnopfler/games-js/archive/master.zip
Continuo à disposição no Google Groups, onde já presto suporte aos leitores:
http://groups.google.com/forum/#!forum/livro-jogos-html5-canvas
A instalação do Apache Cordova é um bocado trabalhosa. No primeiro capítulo, tratarei desse assunto exaustivamente. No entanto, reconhecendo a necessidade de uma demonstração prática para tantos detalhes, gravei uma rápida videoaula como material complementar, na qual demonstro uma instalação do framework em ambiente Windows. Acesse o vídeo em:
https://www.youtube.com/watch?v=Rf85Y0iNJIE
Prepare-se! Desejo-lhe uma ótima leitura e ainda mais ótimas experiências futuras com a programação de games!
Sumário
- 1 - Instalando o Apache Cordova
- 1.1 - O que é o Cordova e o que tem a ver com o PhoneGap
- 1.2 - Instalando os prerrequisitos
- 1.3 - Considerações específicas de sistema operacional
- 1.4 - Testando a conexão com o dispositivo
- 2 - Criando o primeiro projeto
- 2.1 - O projeto Cordova
- 2.2 - O arquivo config.xml
- 2.3 - Configurando o Android para depuração USB
- 2.4 - Rodando o projeto padrão
- 2.5 - Um pequeno projeto do zero: animação com o Canvas
- 2.6 - Um polyfill para requestAnimationFrame
- 2.7 - Gerar pacote APK assinado para o Android
- 2.8 - Considerações finais
- 3 - Eventos touch
- 3.1 - Arrastando um objeto
- 3.2 - Controlando a direção
- 3.3 - Toque em Canvas responsivo
- 4 - Incrementando o jogo de nave
- 4.1 - Revisão das classes do jogo
- 4.2 - Esqueleto do projeto
- 4.3 - API de som do Cordova
- 4.4 - Criando um controle direcional
- 4.5 - Precisão com múltiplos dedos
- 4.6 - API do acelerômetro do Cordova
- 4.7 - Adaptando o Canvas ao tamanho da tela
- 5 - Interações avançadas com Hammer.js
- 5.1 - Conhecendo o Hammer.js
- 5.2 - Barra de ajuste de força
- 5.3 - Rotacionando um taco de bilhar
- 5.4 - Animando a tacada
- 6 - Introdução ao Box2dWeb
- 6.1 - Um primeiro tutorial
- 6.2 - Objetos fundamentais
- 6.3 - Animação do mundo físico
- 7 - Configurações e movimento de corpos
- 7.1 - Formas
- 7.2 - Movimentando corpos
- 7.3 - Propriedades físicas
- 8 - Iniciando o jogo de bilhar
- 8.1 - Preparação do projeto
- 8.2 - Primeiros sprites
- 8.3 - As bolas de bilhar
- 8.4 - Executando a tacada
- 8.5 - Ângulo da trajetória
- 9 - Interação com o jogador e lógicas de negócio
- 9.1 - Controles da tacada
- 9.2 - Executando a tacada no ângulo correto
- 9.3 - Posicionando o taco
- 9.4 - Tratamento das colisões
- 10 - Simulações internas
- 10.1 - Realizando várias simulações a partir do início
- 10.2 - Salvando e recuperando o estado do mundo físico
- 10.3 - Executando a tacada em tempo curto
- 10.4 - Tratador de colisões para a simulação
- 11 - Finalizando o jogo
- 11.1 - Regras do Bola 9
- 11.2 - Mostradores
Instalando o Apache Cordova
Está preparado? Neste capítulo, você tomará contato com o que eu considero uma das ideias mais brilhantes para o desenvolvimento de software. Tudo o que foi feito no primeiro livro, rodando em navegadores desktop, se tornará realidade em dispositivos móveis. Ao longo deste livro, iremos criar versões móveis do jogo de nave, simular partidas de bilhar, além de diversos exercícios com telas touch e física.
Preciso avisar-lhe: para isto se tornar realidade, você terá que instalar várias ferramentas em seu computador. Este primeiro capítulo é dedicado a ensiná-lo como fazer isso. Pode ser que, como desenvolvedor, você já tenha uma ou mais delas. Em todo caso, pegue um café e um prato de biscoitos, ponha uma música relaxante e vamos começar.
1.1 - O que é o Cordova e o que tem a ver com o PhoneGap
Se eu lhe perguntar: qual plataforma de software roda em qualquer dispositivo moderno, não importando seu tamanho físico, velocidade, memória... Java? Talvez, mas existe uma outra: a web. Uma página web pode ser criada para todos os dispositivos imagináveis. Como a tecnologia Canvas faz parte do padrão atual da web (HTML5), podemos dizer o mesmo de jogos criados com ele.
Por que, portanto, não utilizar as tecnologias da web para desenvolvimento móvel?
Em 2008, a Nitobi (hoje adquirida pela Adobe) começou a trabalhar no PhoneGap, um sistema que empacota páginas HTML na forma de apps para diversas plataformas móveis. Não há mágica: são, na realidade, aplicações híbridas, nas quais o componente nativo de renderização web de cada plataforma é usado para processar o conteúdo em formato web. Sendo apps nativas, podem ser distribuídas nas lojas de aplicativos e rodar localmente.
Em 2011, o projeto foi doado à Fundação Apache, onde passou a chamar-se Cordova. A Adobe adquiriu a Nitobi logo em seguida e deu foco especial à manutenção do projeto, passando a oferecer um serviço de geração de apps em nuvem, o Adobe PhoneGap Build (https://build.phonegap.com/), mantendo o nome original. Este serviço, no entanto, é oferecido gratuitamente apenas para projetos de código livre. Por esta razão é que dou preferência, neste livro, à instalação local da biblioteca base.
Mas não se engane: não se trata apenas de um simples renderizador. A WebView padrão de cada plataforma é estendida com APIs JavaScript para acesso a diversos recursos dos dispositivos, como telefone, contatos, câmera, acelerômetro, GPS, sistema de arquivos e outros. Enfim, uma plataforma completa para desenvolvimento de apps, tendo como base ─ mas não se limitando ─ ao formato web.
1.2 - Instalando os prerrequisitos
A partir da versão 3.0, o Cordova traz uma interface de linha de comando, a Cordova CLI (Command Line Interface). É muito prática de se usar, porém utiliza internamente diversas outras ferramentas conhecidas por desenvolvedores de software.
A seguir, as ferramentas, seus links para download e o devido porquê.
Node.js
Engine de execução de código JavaScript, sobre a qual a CLI roda. Esta será instalada como um plugin do Node.js. A CLI, em si, é uma aplicação JavaScript do Node.js.
Para Windows e Mac OS X são fornecidos instaladores. No Linux, você deve extrair o arquivo compactado para o local de sua preferência e configurar o path de seu sistema (mais detalhes na seção *) para enxergar a subpasta bin, onde se encontra o executável do Node.js e o utilitário npm.
O npm serve para baixar extensões do Node.js, das quais uma é o Cordova CLI. Para instalá-lo, digite o seguinte em um terminal ou prompt de comando:
npm install -g cordova
Neste ponto, o Cordova CLI está instalado, mas ainda temos trabalho até poder gerar um app para uma determinada plataforma.
Apache Ant
http://ant.apache.org/bindownload.cgi (sim, é "bindownload" tudo junto)
Ferramenta de automação bem conhecida por desenvolvedores Java, é requerida pela CLI na hora de gerar projetos Android nativos. Se esta ferramenta não estiver instalada, você verá mensagens de erro na hora de adicionar a plataforma Android ao seu projeto Cordova.
Vá ao endereço indicado e role a página para encontrar os links da versão atual (Current Release of Ant). Você novamente terá que extrair os arquivos e configurar a subpasta bin no path do seu sistema.
Git
A partir da versão 3.0, as diferentes APIs do Cordova foram quebradas em plugins, que devem ser baixados e instalados nos devidos projetos. Quem se encarrega desses downloads é o Git, conhecida ferramenta de gerenciamento de repositórios (como o GitHub). O Cordova também cuida de chamá-lo no momento da instalação de um plugin.
SDKs
- Android (requer Java SDK): primeiro http://www.oracle.com/technetwork/pt/java/javase/downloads, depois http://developer.android.com/sdk/
- iOS: http://developer.apple.com/programs/ios/
- Windows Phone: http://developer.windowsphone.com/
Software Development Kits das diversas plataformas, usados para compilar os componentes nativos. Estes são só alguns exemplos, veja a lista completa em http://goo.gl/NkIfhK. Vou dar o exemplo da configuração de um ambiente Android, mas quero que você tenha em mente que este link traz detalhes sobre a configuração em cada plataforma suportada pelo Cordova.
Ou seja, não há nenhuma mágica: se o Cordova é capaz de gerar apps para diversas plataformas, é porque foi criada a comunicação com cada um dos SDKs nativos. Você pode instalar todos, ou somente aqueles que deseja usar. Neste livro, focarei no Android.
O Android SDK requer o SDK da plataforma Java (Oracle JDK) para funcionar. Programadores Java já o têm instalado no computador; se não é o seu caso, dirija-se à primeira URL indicada e role a tela para encontrar o JDK 7. Infelizmente, enquanto escrevo este livro, a plataforma Android ainda não suporta o Java 8.
Após instalado o JDK, você deve configurar a variável de ambiente JAVA_HOME (*), apontando para a pasta onde ele está instalado, por exemplo: C:\Program Files\Java\jdk1.7.0.
O SDK do Android em si pode ser baixado de duas formas: ADT Bundle e stand-alone. Para desenvolvimento com o Cordova CLI, usaremos o stand-alone (se você já desenvolve para Android com o ADT, não precisa baixar, pode usar a SDK integrada). Para baixá-lo, clique no link Get the SDK for an existing IDE e em seguida em Download the stand-alone ....
Após instalar o Android SDK, configure no path as subpastas tools e platform-tools (esta última ainda a ser instalada). Inicie um terminal ou prompt de comando (no Windows, como administrador) e digite:
android
Será aberto o SDK Manager, onde você terá que fazer o download dos itens marcados nas figuras * e *: Platform-tools, Build-tools e SDK Platform da API 19 do Android:
APIs Android
No momento em que finalizo este livro, o Cordova não dá suporte à API 20 do Android. Você pode tentar posteriormente atualizar o Cordova e verificar qual SDK Platform ele está suportando.
Emuladores vs. dispositivos reais
O Android SDK possui um emulador. Para usá-lo, você deve instalar pelo menos uma System Image de uma determinada API no SDK Manager (há uma instalada na figura *). No entanto, o emulador é muito lento. Pode ter desempenho aceitável para testar apps comuns, em máquinas com processadores rápidos e bastante memória.
No caso de jogos, procure utilizar um dispositivo real para testá-los.
1.3 - Considerações específicas de sistema operacional
Windows
Para testar jogos em dispositivos conectados no Windows, é preciso instalar um driver USB. Há uma lista em http://developer.android.com/tools/extras/oem-usb.html#Drivers. Após instalar o driver, procure reiniciar a máquina.
Muito provavelmente você sabe como configurar o path do sistema operacional ou criar a variável de ambiente JAVA_HOME, no entanto, deixo aqui registrados os passos:
- Clique com o botão direito em
Computadore escolhaPropriedades. - À esquerda da tela, escolha
Configurações Avançadas do Sistema. - Clique no botão
Variáveis de Ambiente.
Para acrescentar uma pasta ao path:
- Procure em uma das listas a variável
PATHe clique emEditar. - Acrescente um ponto e vírgula ao final dos caminhos e insira o novo.
Linux
No Linux, é preciso configurar uma permissão de acesso via USB para aparelhos de determinado fabricante:
- Conecte seu dispositivo ao computador pelo cabo USB.
- Abra o terminal e digite o comando
lsusb. Procure na saída do comando o seu dispositivo e anote o primeiro código hexadecimal. Ele corresponde ao código do fabricante:
- Edite como administrador o arquivo:
sudo gedit /etc/udev/rules.d/51-android.rules
- Insira a linha (pode ser ao final do arquivo, caso ele já exista):
SUBSYSTEM=="usb", ATTRS{idVendor}=="22b8", MODE="0666"
Isto define uma regra dando ao sistema a permissão de acesso aos dispositivos daquele fabricante.
- Mude a permissão do arquivo para
644:
sudo chmod 644 /etc/udev/rules.d/51-android.rules
No caso, o 6 representa as permissões de leitura e gravação (4 + 2) ao usuário corrente (que é o administrador, devido ao uso do sudo); o 4, a permissão de leitura para o grupo a que o usuário pertence; e o outro 4, a permissão de leitura aos outros usuários.
- Mude o proprietário do arquivo para o administrador (root):
sudo chown root /etc/udev/rules.d/51-android.rules
As variáveis de ambiente podem ser configuradas editando-se como administrador o seguinte arquivo (e reiniciando a máquina depois):
sudo gedit /etc/environment
Ao contrário do Windows, os diretórios são separados por dois-pontos:
Após realizar todas as edições, reinicie a máquina.
1.4 - Testando a conexão com o dispositivo
Em qualquer caso (Windows ou Linux), podemos testar se o SDK consegue "conversar" com o celular ou tablet.
Abra um prompt de comando ou terminal e dê o comando adb devices. Este é um comando do Android SDK que lista os aparelhos conectados:
Se aparecerem vários pontos de interrogação ou a indicação "no permissions", confira os passos citados para seu sistema operacional. Mais detalhes podem ser obtidos em http://developer.android.com/tools/device.html, e em http://goo.gl/42Xila podemos ver uma descrição detalhada de como configurar o acesso ao dispositivo móvel no Linux.
Se seu dispositivo aparece como "device" após o comando adb devices, abra uma cerveja! Estamos prontos para finalmente começar a usar o Apache Cordova. Já temos as ferramentas necessárias para trazer para o mundo mobile todas as experiências que somos capazes de criar com o HTML5. Para dar continuação ao processo, já no próximo capítulo, você aprenderá a criar projetos e rodá-los em seu celular ou tablet, e poderá ver animações em Canvas funcionando. Em breve nossos esforços se transformarão em jogos reais e divertidos.
Sugestão de leitura
Apache Cordova 3 Programming, de John M. Wargo (*).
Dados do produto
- Número de páginas:
- Data publicação:
