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: na maioria dos navegadores atuais, porém em versões Define a cor de preenchimento dos elementos antigas de navegadores ele não é aceito, por se tratar de que forem desenhados em seguida. uma tecnologia recente. fillRect (double x, double y, double w, double h) 3.2.1 Principais métodos Argumentos: x: posição horizontal do canto superior setCoordinateSpaceWidth (int width) esquerdo do retângulo Argumento: y: posição vertical do canto superior esquerdo width: largura em pixels do retângulo Descrição: w: largura do retângulo Define a largura do espaço interno do Canvas, h: altura do retângulo fazendo com que independente da resolução Descrição: do dispositivo do usuário, as coordenadas dos Desenha um retângulo. objetos sejam sempre as mesmas. drawImage (ImageElement image, double dx, double setCoordinateSpaceHeight(int height) dy) Argumento: Argumentos: height: altura em pixels image: imagem no formato de um objeto Descrição: ImageElement Define a altura do espaço interno do Canvas. dx: posição horizontal do canto superior esquerdo da imagem setWidth (String width) dy: posição vertical do canto superior esquerdo Argumento: da imagem width: largura do objeto, em unidades de CSS Descrição: (por exemplo: "10px", "1em") Desenha uma imagem previamente carregada. Descrição: Define a largura do objeto Canvas na página. 3.4 Objeto Timer
setHeight(String height) O objeto Timer é um temporizador, que tem por Argumento: finalidade fazer chamada automática a um método height: altura do objeto, em unidades de CSS qualquer em um tempo pré-programado. (por exemplo: "10px", "1em") Descrição: 3.4.1 Principais métodos Define a altura do objeto Canvas na página. scheduleRepeating (int periodMillis) setFocus(boolean focused) Argumento: Argumento: periodMillis: o tempo de espera em focused: indica se o objeto receberá o foco ou se milissegundos entre cada repetição da chama perde o foco. do método. Descrição: Descrição: Indica o objeto como focado ou não focado. Ativa um temporizador que decorre Apenas um objeto da página pode ter o foco repetidamente com um tempo determinado. por vez, e este é o que receberá todos os eventos de teclado. 4. Desenvolvimento de Projeto
3.3 Objeto Context2d Para facilitar a compreensão das ferramentas aqui citadas, será descrito neste capitulo um guia passo a O objeto Context2d faz referência ao elemento de passo de como se dá o desenvolvimento de um jogo em mesmo nome do HTML 5. Refere-se ao contexto de HTML 5 utilizando o framework GWT. renderização, podendo ser utilizado para desenhar formas e imagens no objeto Canvas.
XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 30 SBC - Proceedings of SBGames 2012 Tutorials
4.1 Projeto Inicial utilizado para depuração do código em tempo de desenvolvimento, e não será solicitado quando o Para criar uma nova aplicação GWT no Eclipse, usuário acessar a aplicação final compilada. basta clicar no menu “File -> New -> Project”. Todo esse processo de configuração do projeto Selecione o tipo de projeto “Google -> Web poderia ser simplificado apenas deixando a opção Application Project” e clique em “Next”. Digite o “Generate project sample code” marcada, porém isso nome do projeto e o nome do pacote padrão. faria com que fosse gerada uma série de códigos Desmarque a opção “Use Google App Engine” e desnecessários para nossa aplicação. também “Generate project sample code” para que não Como o objetivo deste projeto é desenvolver um seja criada nenhuma classe de exemplo no projeto, jogo em HTML 5, sua codificação deve ser iniciada deixando assim o projeto apenas com as configurações com o acréscimo de um elemento Canvas e definição iniciais básicas. Por fim clique no botão “Finish”. de seus parâmetros. Primeiro deve ser feita uma O próximo passo após a criação do projeto é criar verificação se o navegador do usuário dá suporte ao um novo Módulo GWT clicando o botão direito do elemento Canvas do HTML 5. Depois devem ser mouse no projeto e depois na opção “New->Other”. removidas a margem e a barra de rolagem da página. Selecione o item “Google Web Toolkit->Module” e Por fim são definidos o tamanho e a resolução do clique em “Next”. Informe o nome do pacote e do elemento Canvas e logo em seguida adiciona-o na modulo, preferencialmente coloque o mesmo nome de página do usuário, conforme mostrado no quadro 1. pacote mencionado na criação do projeto e clique em Finish. public class Main implements EntryPoint { Em seguida configure uma classe java como ponto private Canvas canvas; de entrada do sistema. Para isso, clique com o botão private Context2d context; direito do mouse no pacote “client”, que foi criado private static final int WIDTH = 800; automaticamente na criação do módulo. Vá em “New- private static final int HEIGHT = 600; >Other”, selecione o item “Google Web Toolkit- @Override >Entry Point Class” e clique no botão “Next”. public void onModuleLoad() { Preferencialmente digite o nome da classe como canvas = Canvas.createIfSupported(); “Main” e clique em “Finish”. if (canvas == null) { Um recurso importante no projeto é a pasta ‘war’, RootPanel.get().add( onde estarão localizados todos os recursos externos do new Label("Navegador sem suporte ao projeto como imagens, folhas de estilo e arquivos Canvas")); HTML. Nesta pasta também deverá estar uma página return; HTML que irá iniciar a aplicação. Para criar este } arquivo clique com o botão direito do mouse na pasta Window.setMargin("0px"); war e depois em “New->Other” e selecione o item Window.enableScrolling(false); “Google Web Toolkit->HTML Page”. Digite o nome canvas.setWidth(Window.getClientWidth() + "px"); do arquivo como ‘index’ e clique em “Finish”. canvas.setHeight(Window.getClientHeight() Por fim, é necessário fazer uma pequena + "px"); configuração para que o aplicativo inicialize o módulo //define resolução do objeto canvas corretamente. Supondo que o módulo criado se chame canvas.setCoordinateSpaceWidth(WIDTH); ‘jogo’, abra o arquivo ‘jogo.gwt.xml’ localizado no canvas.setCoordinateSpaceHeight(HEIGHT); pacote principal e adicione um apelido ao módulo //adiciona o elemento na interface editando sua tag inicial como: RootPanel.get().add(canvas); context = canvas.getContext2d();
aba “source” na parte inferior do Eclipse e editar a
linha mencionada, que é a terceira linha do código. 4.2 Game Loop Edite também o arquivo index.html localizado na
pasta war, para que sua chamada ao módulo gwt, na Os jogos são dirigidos por um loop que executa sexta linha, fique da seguinte forma: uma série de tarefas a cada frame, construindo a ilusão
de um mundo animado. No caso de um jogo que roda a um frame devem ser feitas em 33,3 milissegundos. (Rabin, 2012). Após essas tarefas podemos executar o aplicativo, Para conseguir executar este loop no tempo porém não será mostrado nada no navegador ainda, previsto, pode-se utilizar o objeto Timer, o qual pois teremos que codificar a classe Main. controlará o tempo de execução de cada frame. A Ao abrir a aplicação pela primeira vez é solicitada a principio as duas tarefas executadas pelo frame serão instalação de um plugin no navegador. Este plugin é desenvolvidas nos métodos “update” e “draw”. O
XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 31 SBC - Proceedings of SBGames 2012 Tutorials
método “update” é responsável pode atualizar a recursos da orientação em objetos para desenvolver seu posição dos objetos do jogo, assim como as game. Uma boa metodologia é criar uma classe java transformações necessárias para prover os efeitos de para cada tipo funcionalidade, pensando nas técnicas animação. O método “draw” é responsável por de reuso que a linguagem disponibiliza. renderizar as imagens no objeto canvas. Pode-se ver a Desta forma, para criar um objeto retangular que estrutura de um game loop no Quadro 2, onde o será desenhado no jogo, pode-se definir atributos método “update” ainda não possui nenhuma encapsulados para determinar sua posição nos eixos funcionalidade efetiva e o método “draw” apenas pinta horizontal e vertical, além de declarar um método uma cor de fundo no objeto canvas. O restante do capaz de fazer a detecção da colisão entre outro código será demonstrado nos próximos capítulos. retângulo. O resultado desta Classe Java pode ser visto no Quadro 3. public class Main implements EntryPoint { private Canvas canvas; public class Retangulo { private Context2d context; private int x; private static final int WIDTH = 800; private int y; private static final int HEIGHT = 600; private int height; private Timer timer; private int width;
@Override public Retangulo(int x, int y, int height, public void onModuleLoad() { int width) { canvas = Canvas.createIfSupported(); this.x = x; this.y = y; if (canvas == null) { this.height = height; RootPanel.get().add(new this.width = width; Label("Navegador sem suporte ao Canvas")); } return; } public int getX() {return x; } Window.setMargin("0px"); public void setX(int x) { Window.enableScrolling(false); this.x = x; canvas.setWidth(Window.getClientWidth() + } "px"); public int getY() {return y; } canvas.setHeight(Window.getClientHeight() public void setY(int y) { + "px"); this.y = y; canvas.setCoordinateSpaceWidth(WIDTH); } canvas.setCoordinateSpaceHeight(HEIGHT); public int getHeight() { RootPanel.get().add(canvas); return height; context = canvas.getContext2d(); } public void setHeight(int height) { timer = new Timer() { this.height = height; @Override } public void run() { public int getWidth() { update(); return width; } } }; public void setWidth(int width) { timer.scheduleRepeating(33); this.width = width; } } public boolean colide(Retangulo c) { public void update() { if ((c.getX()+c.getWidth() >= getX()) //lógica do jogo && (c.getX() <= getX() + this.width) && (c.getY() + c.getHeight() >= getY()) draw(); && (c.getY() <= getY() + this.height)){ } return true; public void draw() { } else { //desenha o fundo return false; CssColor cor; } cor = CssColor.make("rgba(0,50,255,1)"); } context.setFillStyle(cor); } context.fillRect(0, 0, WIDTH, HEIGHT); } Quadro 3 – Objeto Retangulo } Quadro 2 – Game Loop Desta forma já podemos construir toda a lógica do jogo. Como a ideia é apenas apresentar a tecnologia, 4.3 Animação iremos demonstrar o desenvolvimento de um jogo simples, apenas com as classes Main e Retangulo. Já que GWT permite a codificação da aplicação na Assim a estrutura do jogo deve ficar igual à mostrada linguagem Java, nada mais justo que tirar proveito dos na figura 2.
XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 32 SBC - Proceedings of SBGames 2012 Tutorials
private Retangulo bola = new Retangulo(0, 0, 25, 25); private int dirX = 3; private int dirY = 3;
@Override public void onModuleLoad() {...
public void update() { bola.setX(bola.getX()+dirX); bola.setY(bola.getY()+dirY); if (bola.getX()+bola.getWidth()>=WIDTH) { dirX *= -1; } if (bola.getX()<=0) { dirX *= -1; Figura 2 – Exemplo de imagens } if (bola.getY()<=0) { O escopo do projeto ficará então como sendo um dirY *= -1; jogo onde o usuário irá controlar uma plataforma, a } qual irá rebater uma bola em movimento. A partir deste if (base.colide(bola)) { exemplo o desenvolvedor poderá facilmente estender dirY *= -1; suas funcionalidades para tornar o jogo parecido com } um Pong ou Breakout mostrados na figura 3. Podem if (bola.getY()+bola.getHeight()>=HEIGHT) ser utilizados gráficos com ótima qualidade já que as { Window.alert("Você Perdeu!"); imagens que serão inseridas são no formato PNG, bem bola.setX(0); diferente do que se tinha na época em que esses dois bola.setY(0); jogos citados foram criados. dirX = Math.abs(dirX); dirY = Math.abs(dirY); }
draw(); } public void draw() { //desenha fundo CssColor cor; cor = CssColor.make("rgba(0,50,255,1)"); Figura 3 – Jogos Pong (1972) e Breakout (1976) context.setFillStyle(cor); context.fillRect(0, 0, WIDTH, HEIGHT); Para continuar o desenvolvimento, deve ser declarado dois atributos retângulo na classe Main, um //desenha bola e base para a plataforma base e outro para a bola. Também cor = CssColor.make("rgba(0,255,50,1)"); declare atributos para armazenar a direção a qual a bola context.setFillStyle(cor); deverá se movimentar. A cada frame, incremente a context.fillRect(bola.getX(), posição da bola para dar a ilusão de movimento, e bola.getY(), bola.getWidth(), bola.getHeight()); desenhe os dois retângulos na tela. context.fillRect(base.getX(), Sobre a movimentação da bola, é importante que base.getY(), base.getWidth(), ela mude de direção sempre que colidir com alguma base.getHeight()); das extremidades da tela, ou mesmo com a plataforma } base também. Algumas estruturas condicionais podem } realizar esta tarefa, além de fazerem a validação, caso a Quadro 4 – Animação bola encontre a extremidade inferior da tela informando ao usuário que ele perdeu o jogo. 4.4 Interação por Teclado Considerando os critérios mencionados, a classe Main deverá ficar conforme está mostrado no quadro 4. Em se tratando de interação do usuário com o jogo, uma das formas muito utilizadas é a interação por public class Main implements EntryPoint { teclado. No exemplo apresentado neste tutorial, vamos private Canvas canvas; controlar a plataforma base com as setas do teclado private Context2d context; para direita e para esquerda. Para esta tarefa foram private static final int WIDTH = 800; declaradas duas variáveis booleanas, as quais indicarão private static final int HEIGHT = 600; o estado de cada tecla. Também foi criado um método private Timer timer; chamado ‘initKeyHandlers’ responsável por inicializar
a captura das ações de pressionar alguma tecla private Retangulo base = new Retangulo(350, 550, 25, 100);
XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 33 SBC - Proceedings of SBGames 2012 Tutorials
(KeyDownHandler) e de soltar alguma tecla (KeyUpHandler). 4.5 Interação por Mouse e Toque Através das variáveis de estado para as setas esquerda e direta do teclado, podemos movimentar a Frequentemente o teclado pode não ser a única plataforma base nesses mesmos sentidos. Esta tarefa é forma utilizada para interação do usuário com o jogo, realizada no método “update” conforme pode ser visto podendo este utilizar o mouse ou até mesmo o toque no Quadro 5. em dispositivos que disponibilizam tal entrada. Quando estamos tratando de um jogo para internet, public class Main implements EntryPoint { temos que ter a consciência de que este aplicativo pode ... ser acessado por uma diversa quantidade de dispositivos, como computadores, celulares, tablets e private boolean keyLeft = false; até mesmo videogames. Portanto, tratar outros tipos de private boolean keyRight = false; entrada, como mouse ou toque passa a ser uma exigência do jogo, caso queira ter compatibilidade com @Override todos esses dispositivos. public void onModuleLoad() { ... No framework GWT, o mouse e o toque são tratados por métodos distintos. Sendo assim, vamos initKeyHandlers(); criar um método chamado initMouseHandlers, para canvas.setFocus(true); cuidar destes tipos de entrada. A intenção é } movimentar a plataforma base do jogo de acordo com a posição do mouse ou do toque. Muito cuidado ao public void initKeyHandlers() { atribuir a posição da base, pois o objeto Canvas estará canvas.addKeyDownHandler( na resolução 800x600 independente da resolução e new KeyDownHandler() { tamanho do navegador, porém o mouse ou toque @Override retornarão a posição relativa ao dispositivo. Sendo public void onKeyDown(KeyDownEvent event) assim deve ser realizado um calculo de conversão { int key = event.getNativeKeyCode(); como mostrado no Quadro 6. if (key == 37) { keyLeft = true; public class Main implements EntryPoint { } else if (key == 39) { ... keyRight = true; @Override } public void onModuleLoad() { } ... }); initMouseHandlers(); canvas.addKeyUpHandler( } new KeyUpHandler() { @Override public void initKeyHandlers() {... public void onKeyUp(KeyUpEvent event) { public void initMouseHandlers() { int key = event.getNativeKeyCode(); canvas.addMouseMoveHandler(new if (key == 37) { MouseMoveHandler() { keyLeft = false; @Override } else if (key == 39) { public void onMouseMove( keyRight = false; MouseMoveEvent event) { } int x = event.getX(); } x = x*WIDTH/Window.getClientWidth(); }); base.setX((x-base.getWidth()/2)); } } }); public void update() { canvas.addTouchMoveHandler( ... new TouchMoveHandler() { if ((keyLeft) && (base.getX()>0)) { @Override base.setX(base.getX()-10); public void onTouchMove(TouchMoveEvent } event) { if ((keyRight) && int x = (base.getX()+base.getWidth() XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 34 SBC - Proceedings of SBGames 2012 Tutorials 4.6 Imagens A última etapa deste tutorial se refere ao uso de imagens no jogo, ao invés de simplesmente desenhar formas geométricas. É aconselhável que seja usado o formato de imagens PNG, devido ao seu ótimo algoritmo de compressão. Desenhe no editor de imagens de sua preferência uma figura para a bola, na largura de 25px e altura de 25px. Depois desenhe uma figura para a plataforma base com largura de 100px e altura de 25px. Salve ambas figuras na pasta ‘war’ do seu projeto. Para utilizar as imagens, deverá ser declarado na classe Main, objetos do tipo ImageElement, os quais terão funcionalidade de carregar as imagens para que sejam desenhadas no objeto Canvas. O código para tal Figura 4 – Exemplo de imagens tarefa pode ser visto no Quadro 7. 5. Perspectivas public class Main implements EntryPoint { ... O objetivo deste tutorial foi apresentar o framework GWT como alternativa para o desenvolvimento de private ImageElement imgBola = jogos para internet. Percebemos que este jogo pode ser ImageElement.as(new implementado com facilidade e que o framework GWT Image("bola.png").getElement()); proporciona um bom ambiente de desenvolvimento e private ImageElement imgBase = uma boa organização do código. ImageElement.as(new A partir dos conceitos demonstrados aqui, este jogo Image("base.png").getElement()); pode ser estendido, aumentando sua complexidade e @Override melhorando sua jogabilidade. Com os recursos public void onModuleLoad() {... proporcionados pela programação orientação a objetos, public void initKeyHandlers() {... pode-se criar uma aplicação com muitas linhas de public void initMouseHandlers() {... código, sem perder a organização do projeto. Estes public void update() {... recursos também proporcionam a utilização de técnicas de reuso do código, como encapsulamento, herança e public void draw() { outros. //desenha fundo Apesar do HTML 5 ser uma tecnologia recente já é CssColor cor; possível desenvolver jogos com qualidade e a cor = CssColor.make("rgba(0,50,255,1)"); tendência é melhorar ainda mais, tanto na context.setFillStyle(cor); context.fillRect(0, 0, WIDTH, HEIGHT); compatibilidade com os navegadores, quanto na velocidade de renderização proporcionado pelos //desenha bola e base mesmos. context.drawImage(imgBase, base.getX(), Ainda poderemos ter alterações no que se refere ao base.getY()); HTML 5 e até mesmo nas técnicas para context.drawImage(imgBola, bola.getX(), desenvolvimento de jogos para internet, já que o bola.getY()); consórcio internacional W3C ainda não homologou } oficialmente esta linguagem. Mas o framework GWT } tem se adaptado bem às ultimas mudanças e é de Quadro 7 – Renderização e imagens interesse da Google continuar a manter o framework o mais atualizado possível, continuando a nos Após a inserção das imagens o jogo fica semelhante proporcionar compatibilidade garantida com os mais ao que está mostrado na Figura 4. Caso queira fazer diversos navegadores da internet. animações, basta trocar as imagens a cada frame, o que torna o visual do jogo bem mais agradável. Para isso pode ser utilizada a técnica de sprites. Outra sugestão Referências interessante é o uso de uma imagem de fundo, que SMEETS, B., BONESS U. E BANKRAS R., 2009. Programando pode ser desenhada da mesma forma que as imagens da Google Web Toolkit, Rio de Janeiro: Alta Books, 1a base e da bola. edição. GEARY, D., 2008. Google Web Toolkit solutions. Boston: Pearson. DWYER. J., 2008. Pro Web 2.0 Application Development with GWT. New York: Apress XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 35 SBC - Proceedings of SBGames 2012 Tutorials TAIVALSAARI, A. E MIKKONEN, T., 2011. The Web as an Application Platform: The Saga Continues. 37th EUROMICRO Conference on Software Engineering and Advanced Applications NÖRNBERG, L. HTML 5 – futuro dos jogos para web. Disponível em Google Web Toolkit API Reference. Disponível em Google Web Toolkit. Disponível em RABIN, S., 2012. Introdução ao desenvolvimento de games, São Paulo: Cengage, 2ª Edição XI SBGames – Brasiliá – DF – Brazil, November 2nd - 4th, 2012 36