SBC - Proceedings of SBGames 2012 Tutorials Introdução ao Desenvolvimento de Games com GWT e HTML5 Ely Fernando do Prado Departamento de Computação, Universidade Federal de São Carlos (UFSCar) - São Carlos, SP - Brasil Figura 1: Logotipos do Google Web Toolkit e do HTML 5. Resumo games são adicionados ao site de pesquisa do Google em comemoração a alguma data ou evento especial, e O advento da tecnologia do HTML 5 tem aberto um são jogáveis no próprio site. novo mercado de jogos para internet, onde os usuários Graças a grande experiência alcançada pelos podem interagir com o game através de diferentes engenheiros da Google no setor de aplicações ricas equipamentos, como computadores, tablets e celulares para internet, foi criado por eles o framework Google sem a necessidade de instalação prévia da aplicação ou Web Toolkit (GWT), que tem facilitado muito criação mesmo algum plug-in. Por outro lado o framework de aplicações complexas na web, incluindo os jogos. Google Web Toolkit tem se mostrado uma boa O objetivo deste tutorial é apresentar o framework alternativa para desenvolvimento de aplicações ricas GWT como uma alternativa para o desenvolvimento de para internet, utilizando a linguagem Java para gerar jogos para internet. Para isso será apresentado como se códigos HTML, CSS e JavaScript. Assim este trabalho dá o desenvolvimento de um jogo nesta tecnologia, tem por objetivo apresentar o framework GWT como sendo um jogo com poucas funcionalidades, porém o solução para o desenvolvimento de jogos para internet suficiente para dar os primeiros passos neste em HTML5, demonstrando todos os passos necessários framework. para codificação de um game loop, animações e interação com o usuário. 2. HTML 5 Keywords: GWT, HTML5, Jogos, Canvas O padrão HTML5 complementa as capacidades das normas existentes no HTML com vários novos Authors’ contact: recursos. Embora o HTML5 seja um padrão web de [email protected] propósito geral, muitos dos novos recursos são destinados diretamente para tornar a Web um lugar 1. Introdução melhor para aplicações web com estilo desktop. Dentre os novos recursos estão a capacidade das Atualmente estamos presenciando um grande aplicações executarem em modo off-line e de crescimento na demanda por jogos para internet. Outro armazenar dados localmente no computador ou acontecimento que está em bastante evidencia hoje é o dispositivo. Um recurso importante, especialmente surgimento e amadurecimento do HTML 5, que tem quando se trata de desenvolvimento de jogos é o possibilitado a criação de jogos que rodam direto no elemento Canvas, que oferece uma tela de desenho 2D, navegador de maneira leve e prática. permitindo o desenho de formas gráficas, imagens e A principal motivação para este tutorial é o grande texto em tempo de execução. Outros recursos crescimento no mercado de jogos para internet. O disponibilizados pelo HTML5 são para permitir que surgimento do HTML 5 permitiu que passássemos a arquivos de mídia (áudio e vídeo) sejam executados no desenvolver aplicações complexas para internet, sem navegador sem necessidade de plug-in externo, ter que depender de algum plug-in específico. Além também há elementos para carregamento de dados de disso, aplicações desta natureza podem ser executadas forma assíncrona e apoio para eventos de arrastar e em qualquer dispositivo que possua internet, como soltar. Além dos recursos citados, a especificação computadores, tablets e celulares de qualquer sistema HTML5 define inúmeros outros acréscimos, mas operacional atual. muitas destas especificações, bem como a Um bom exemplo que tem alcançado bastante especificação do HTML5 em si, estão ainda em sucesso entre o público são os jogos adicionados no definição, de modo que na versão final os seus detalhes logotipo do Google, chamados doodles. Os doodles podem variar. (Taivalsaari e Mikkonen, 2011) XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 28 SBC - Proceedings of SBGames 2012 Tutorials Para o desenvolvimento de jogos o HTML por si só Já que GWT compila código Java para JavaScript, não é suficiente. O HTML é uma linguagem de é importante questionarmos quais são as vantagens de marcação, que permite incluir elementos em uma se desenvolver a aplicação em Java com GWT, ao página, como campos de formulário, texto, imagens, invés de escrever diretamente em código JavaScript. A canvas, etc. Mas todos esses elementos são estáticos. vantagem mais óbvia está no fato de GWT criar Para superar as limitações do HTML podemos utilizar JavaScript perfeitamente compatível com os diferente o Javascript, pois a ação toda precisa ser escrita em navegadores, sendo assim não precisamos escrever uma linguagem de programação. Javascript é uma estruturas condicionais para cuidar das diferenças do linguagem de programação poderosa, com sintaxe navegadores. Mas Dwyer, 2008, ainda faz a seguinte baseada em C++, porém com suporte apenas parcial à afirmação: “há três áreas específicas em que o GWT orientação a objetos. Javascript é uma linguagem supera o JavaScript: escalabilidade, suporte à interpretada, sendo assim sua velocidade de execução e refatoração, e familiaridade.”. Isso se deve ao fato de sua compatibilidade depende da máquina GWT utilizar a linguagem Java, que apesar de seu interpretadora que o navegador possui. (Nörnberg, nome sugerir o contrário, Java tem mais diferenças 2011) com JavaScript do que igualdades. 3.1 Ambiente de Desenvolvimento 3. Google Web Toolkit Como o framework GWT executa sobre a O framework GWT (Google Web Toolkit) foi plataforma Java, você pode preparar seu ambiente de criado para facilitar o desenvolvimento de aplicações desenvolvimento nos principais sistemas operacionais ricas para web fornecendo uma camada de abstração, disponíveis (Windows, Linux ou MacOS), porém é que esconde os detalhes do Javascript e também as necessário ter instalado o Kit de Desenvolvimento Java diferenças entre os ambientes específicos dos em seu computador. Além disso, é requisito básico ter navegadores. Toda aplicação é escrita utilizando a feito download e descompressão do Google Web linguagem Java, e o framework GWT traduz este Toolkit SDK. Ambas ferramentas citadas podem ser código em JavaScript, DHTML e CSS. Ao efetuar esta encontradas nos links a seguir: compilação são geradas versões especificas da Java SE Development Kit (JDK): aplicação para cada tipo de navegador, tornando a http://java.sun.com/javase/downloads/ aplicação compatível com os mais variados ambientes, Google Web Toolkit SDK: e também com as diferentes versões desses https://developers.google.com/web-toolkit/download navegadores. (Smeets, Boness e Bankras, 2009) Apesar de não ser um pré-requisito, é bastante Seu objetivo é permitir o desenvolvimento interessante utilizar uma IDE de desenvolvimento. produtivo de aplicações Web de alto desempenho sem Dentre as principais IDEs utilizadas para que o desenvolvedor necessite ser um especialista nas desenvolvimento de aplicações Java, podemos destacar peculiaridades de cada navegador, XMLHttpRequest e o Eclipse que possui um plug-in oficial da Google para JavaScript trabalhar com GWT. Tanto a IDE como o plug-in para GWT é um framework essencialmente para o lado desenvolver em GWT podem ser encontrados no link a do cliente (cliente-side) e dá suporte à comunicação seguir: com o servidor através de RPCs (Remote Procedure IDE Eclipse: Calls). Ele não é um framework para aplicações http://www.eclipse.org/downloads/ clássicas da web, pois deixa a implementação da Google Plugin for Eclipse: aplicação web parecida com implementações em http://dl.google.com/eclipse/plugin/4.2 desktop. Para quem está habituado a desenvolver Para este tutorial foi utilizado a versão 4.2 do aplicações desktop, especialmente na linguagem Java Eclipse, apelidada de Juno. se sente familiarizado com o uso do framework GWT. Para configurar o plug-in do GWT no Eclipse, (Geary, 2008) basta clicar no menu do Eclipse “Help”, logo em O GWT é utilizado por muitos produtos do Google, seguida em “Install New Software”. Depois clique no incluindo o Google Wave e Google AdWords. Tem botão “Add” e digite no campo “Location” o endereço sido utilizado também para a construção de jogos para http://dl.google.com/eclipse/plugin/4.2 e clique em internet, como por exemplo, a versão web do jogo “Ok”. Marque os itens “Google Plugin for Eclipse”, Angry Birds. “GWT Designer for GPE” e “SDKs”.Clique no botão GWT é de código aberto, totalmente gratuito, e “Next”, aguarde o download ser terminado e clique em utilizado por milhares de desenvolvedores ao redor do “Finish”. mundo. Está disponível sob a Licença Apache v. 2.0, Com essas etapas, o Eclipse está preparado para ser concedendo-lhe uma licença perpétua, mundial, não utilizado com ferramente de desenvolvimento para o exclusiva, sem nenhum custo, isenta de royalties, framework GWT. direitos autorais irrevogáveis para reproduzir, preparar trabalhos derivados, publicamente exibir, executar publicamente, sublicenciar e distribuir o trabalho. XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 29 SBC - Proceedings of SBGames 2012 Tutorials 3.2 Objeto Canvas 3.3.1 Principais métodos O objeto Canvas representa o elemento de mesmo nome do HTML 5, e pode ser utilizado para setFillStyle(String fillStyleColor) processamento de gráficos em tempo de execução. Argumento: Uma característica importante deste elemento é que ele fillStyleColor: cor como uma String no formato consegue redimensionar seu conteúdo para adequar à CssColor. resolução do navegador do usuário. Pode ser executado Descrição: