Tutorial: Jogos em HTML5 – Parte 1: Usando o Canvas

Desde seu anúncio oficial, o HTML5 está trazendo altas expectativas. Youtube está largando o Flash para HTML5, assim como está bombando de aplicativos em HTML5 em Chrome Store, Firefox OS, etc. Uma das grandes expectativas em cima do HTML 5 são os jogos que utilizam navegadores, que uma vez não dependendo de plugins para funcionar, vão ter maior portabilidade entre navegadores e aparelhos e sem serem afetados com discussões das grandes empresas. Afinal foi isso que ocorreu no caso do Adobe x Apple, em que resultou em diversos usuários da Apple não tendo mais suporte nativo ao Flash.

Hoje, aprenderemos como utilizar a nova tag <CANVAS>, que é a principal tag que está permitindo a nova onda de jogos de navegadores.

Como o HTML comum, você pode fazer o seu código em um editor robusto, mas também em um mais simples como o Bloco de Notas. Vamos nesse último por ser simples de achar. Só se lembre de salvar como página de internet (extensão .html) para ver o resultado.

 

Uma nova tag chegou

A tag <Canvas> é uma das novas tags que chegaram com o HTML5. Sua funcionalidade é simples: permitir a renderização de imagens criadas em tempo de execução, o que torna perfeito para os jogos. Quem já programou jogos para celulares no J2ME vai notar muitas semelhanças na forma de mexer com a classe Canvas.

Em um código HTML, a Canvas pode ser inserida da seguinte forma:

Arquivo HTML:

1 <!DOCTYPE HTML>
2 <html>
3  <body>
4   <canvas id=”game” width=800 height=600>
5    Seu navegador não suporta HTML 5
6   </canvas>
7  </body>
8 </html>

No código acima, temos na linha 1 a definição que indica ao navegador que vamos utilizar o HTML5.  Na linha 4, estamos inserindo a nossa Canvas. É mandatório nós definirmos os atributos Width (largura) e Height (altura), pois são eles que vão determinar o tamanho de nossa Canvas. O atributo ID é utilizado para termos uma referência para o Javascript. Caso o navegador não suporte a tag, entre as tags <canvas> e </canvas> tem uma mensagem de aviso.

Se nós tentarmos executar o código como ele está, provavelmente não veremos nada, porque a canvas é uma imagem inicialmente transparente, portanto assumirá a cor de fundo do site. Para facilitar o nosso estudo, vamos adicionar uma borda nela utilizando CSS:

Arquivo HTML:

4   <canvas id=”game” width=800 height=600 style=”border:solid”>

Com isso, podemos agora visualizar uma borda em volta de nossa Canvas. É importante ter em mente como é o sistema de coordenadas da Canvas. A sua origem está no canto superior esquerdo. O eixo horizontal (eixo X) cresce para direita, assim como o eixo vertical (eixo Y) cresce para baixo, conforme mostra a imagem abaixo:

 

Estou desenhando

Agora que expliquei como inserir a Canvas, vamos desenhar nela. Para isso, vamos criar um arquivo Javascript. Neste tutorial, vou dar o nome de “tutorial.js” para o arquivo que contém o javascript. Uma vez criado o arquivo, devemos dizer ao HTML para carregá-lo. Para isso, vamos adicionar o seguinte código logo após o HTML:

Arquivo HTML:

2 <html>
3  <head>
4   <script src=”tutorial.js”></script>
5  </head>
6  <body>

A linha 4 é que onde fazemos o carregamento do arquivo Javascript. Agora que o script é carregado, vamos desenhar na nossa Canvas. Para isso, vamos criar uma função, que chamarei de “tutorialDesenho()” onde vamos mostrar cada comando de desenho disponível.

tutorial.js

1 function tutorialDesenho(){
2  //O código vai vir aqui
3 }

Para ser mais prático, vamos já configurar a execução da função utilizando o evento “onLoad” do HTML. Então, modificaremos a linha 6 do arquivo da seguinte forma:

Arquivo HTML

6  <body onLoad=”tutorialDesenho()”>

Executamos a função “tutorialDesenho()” para ser executado assim que o HTML for totalmente carregado, isso porque se nós executarmos direto o script, ocorrerá um erro. Esse erro ocorre porque estamos tentando acessar a Canvas antes da mesma não ser carregada. Portanto, lembre-se de que se for modificar qualquer elemento HTML via Javascript, certifique-se que a página já foi totalmente carregada.

Agora que temos a nossa função pronta, foi declarada e está devidamente configurada para executar quando a página terminar de carregar, vamos então aos códigos.

A primeira coisa que deve fazer antes de desenhar na Canvas pelo Javascript é obter o Contexto da Canvas. É o Contexto que fornece os métodos que permitem a nós desenhar na Canvas, e por isso é essencial dominá-lo. Vamos adicionar o seguinte código na nossa função:

tutorial.js

1 function tutorialDesenho(){
2  var canvas = document.getElementById(“game”);
3  var contexto = canvas.getContext(“2d”);
4 }

Na linha 2, nós obtemos a referência do Canvas, cujo parâmetro passado é o ID definido no arquivo HTML. Na linha 3, nós pegamos o contexto. O “2d” significa que vamos mexer com gráficos 2D. Existe o parâmetro “WebGL” que serve para gráficos 3D, entretanto, é muito pouco utilizado porque recentemente os navegadores estão criando suporte para o WebGL.

 

Retângulos

Agora que temos os contextos, vamos desenhar. A partir de agora, vou utilizar a linha 4 como nossa cobaia de testes, começando a desenhar um retângulo preenchido:

tutorial.js

1 function tutorialDesenho(){
2  var canvas = document.getElementById(“game”);
3  var contexto = canvas.getContext(“2d”);
4  contexto.fillRect(100,100,150,75);
5 }

Note que na linha 4 utilizamos a variável “contexto” para invocar o método “fillRect()”, que possui quatro parâmetros na respectiva ordem: posição x do canto superior esquerdo, posição y do canto superior esquerdo, largura e altura. Como demonstrado na imagem abaixo:

Caso não queira um retângulo preenchido, podemos fazer um retângulo vazio com o seguinte código:

tutorial.js

5  contexto.strokeRect(490,400,150,75);
6 }

Os parâmetros são os mesmos que os do “fillRect()”, a posição x, a posição y, largura e altura. Esse código resultará em uma imagem assim:

 

Linhas

Agora terminados os retângulos, vamos desenhar linhas: no caso delas, nós primeiro determinamos o ponto inicial da linha e depois vamos dizendo para o navegador até onde ela vai. Vamos ver o código de como se faz isso:

tutorial.js

6  contexto.moveTo(570,25);
7  contexto.lineTo(190,305);
8  contexto.stroke();
9 }

Na linha 6, nós definimos com o método “moveTo()” uma linha que começa no ponto (570,25). Na próxima linha, dizemos onde termina a linha, que neste caso, termina no ponto (190,305). E na linha 8, nós mandamos o navegador desenhar essa linha, conforme a imagem abaixo:

Se por acaso, nós adicionarmos mais um “lineTo()” antes do método “stroke()”, nós podemos formar polígonos dizendo os pontos seguintes com o método “lineTo()”. Por exemplo, vamos criar um triângulo baseado na linha que acabamos de desenhar:

tutorial.js

6  contexto.moveTo(570,25);
7  contexto.lineTo(190,305);
8  contexto.lineTo(570,305);
9  contexto.lineTo(570,25);
10  contexto.stroke();
11 }

Com esse código, podemos ver que fechamos um triângulo, como mostra a imagem abaixo:

Então, se quisermos fazer qualquer tipo de polígono, podemos simplesmente indicar com uma sequência de métodos “lineTo()” os pontos em que as linhas do polígono mudam de direção.

 

Arcos, Círculos e circunferência

Para desenhar um arco ou um círculo, utiliza-se um conjunto de métodos semelhantes aos que usamos para desenhar linhas. Neste caso, primeiro avisamos o contexto que vamos iniciar um caminho (path), depois definimos o arco e finalmente mandamos desenhar. No código, fica assim:

tutorial.js

11  contexto.beginPath();
12  contexto.arc(190,250,40,0,2*Math.PI)
13  contexto.stroke()
14 }

Aqui, iniciamos com o método “beginPath()” e então definimos o nosso arco com o método “arc()”. Este método tem respectivamente os seguintes parâmetros: posição x do centro, posição y do centro, o tamanho do raio da circunferência, o ângulo inicial e o ângulo final, ambos em Radianos. É através dos ângulos inicial e final que determinamos como vai ser o arco. Para nós conseguirmos um círculo/circunferência fechado, nós dizemos para o navegador iniciar no ângulo 0 radianos e terminar no ângulo 2.PI radianos, que é exatamente o ponto em que ele completa uma volta. Por fim, utilizamos o “stroke()” para desenhar a circunferência. O resultado é a imagem abaixo:

Isso que apareceu foi uma circunferência. Para nós fazermos um círculo, basta nós, ao invés de utilizarmos o método “stroke()”, usarmos o método “fill()”. Vamos alterar a linha 13 e vejamos a diferença:

tutorial.js

13  contexto.fill()

Observe a diferença e, se você nunca entendeu a diferença entre um círculo e uma circunferência na escola, agora você pode ver com seus próprios olhos:

Uma observação interessante é que, se você usar o método “fill()” ao invés do “stroke()” no desenho de linhas e, caso o polígono desenhado seja fechado, esse polígono será preenchido. Entretanto, nada aparecerá caso o polígono formado estiver aberto.

 

Cores

Até agora, desenhamos apenas em preto. E se quisermos desenhar em outras cores? Pois então, para finalizarmos o tutorial de hoje, vamos alterar as cores de tudo que nós vimos até agora, atribuindo ao atributo “fillStyle” do Contexto, um código hexadecimal de cores. Vamos ao exemplo final do código:

tutorial.js

1 function tutorialDesenho(){
2  var canvas = document.getElementById(“game”);
3  var contexto = canvas.getContext(“2d”);
4  contexto.fillStyle = “#00FF00”;
5  contexto.fillRect(100,100,150,75);
6  contexto.fillStyle = “#FF0000”;
7  contexto.strokeRect(490,400,150,75);
8  contexto.moveTo(570,25);
9  contexto.lineTo(190,305);
10  contexto.lineTo(570,305);
11  contexto.lineTo(570,25);
12  contexto.stroke();
13  contexto.fillStyle = “#FF00FF”;
14  contexto.beginPath();
15  contexto.arc(190,250,40,0,2*Math.PI)
16  contexto.fill()
17 }

Aqui, você pode ver que nas linhas 4, 6 e 13 foi adicionado um comando atribuindo ao atributo “fillStyle” um código hexadecimal, que é a cor que quero que sejam desenhadas as figuras seguintes. O resultado do código acima é essa:

Aqui, você pode notar que somente os objetos que utilizam o “fill()” é que alteraram a cor. Isso porque o “fillStyle” altera apenas as figuras que são preenchidas. Para alterar as imagens que foram geradas pelo método “stroke()”, devemos utilizar o atributo “strokeStyle”. No código abaixo, alterei a linha 6 para mostrar o resultado:

tutorial.js

1 function tutorialDesenho(){
2  var canvas = document.getElementById(“game”);
3  var contexto = canvas.getContext(“2d”);
4  contexto.fillStyle = “#00FF00”;
5  contexto.fillRect(100,100,150,75);
6  contexto.strokeStyle = “#FF0000”;
7  contexto.strokeRect(490,400,150,75);
8  contexto.moveTo(570,25);
9  contexto.lineTo(190,305);
10  contexto.lineTo(570,305);
11  contexto.lineTo(570,25);
12  contexto.stroke();
13  contexto.fillStyle = “#FF00FF”;
14  contexto.beginPath();
15  contexto.arc(190,250,40,0,2*Math.PI)
16  contexto.fill()
17 }

Com esse código, ambas as imagens que foram criadas com “stroke()” estarão com a cor vermelha, como mostra a imagem abaixo:

Basicamente, você utiliza “fillStyle” quando você deseja mudar a cor de objetos que sejam preenchidos, enquanto usa “strokeStyle” para alterar as figuras que possuem apenas contorno.

Neste tutorial foi visto o básico da tag <Canvas> e como utilizá-lo em conjunto com o Javascript. Vimos que a primeira coisa que devemos fazer ao mexer com a Canvas é obter seu Contexto. Após, podemos criar retângulos, linhas e círculos utilizando os métodos disponíveis no contexto. Por fim, podemos alterar a cor da figura a ser desenhada alterando uma das duas propriedades do contexto, o “fillStyle”, que é responsável pela coloração das figuras que são preenchidas. E o outro é o “stokeStyle” que é para as linhas e figuras que possuem apenas o contorno. Um fato importante é quando uma figura se sobrepõe a outra: quando isso ocorre, a figura mais recente ficará na frente da imagem que já foi desenhada.

Esse foi o nosso primeiro tutorial de HTML5. No próximo tutorial, vamos nos aprofundar mais em uma funcionalidade específica do Canvas e que permitirá a nós desenvolver jogos com aparências melhores que as primitivas apresentadas neste tutorial. Portanto, aguarde o Tutorial 02 de HTML5!

Thalisson Christiano de Almeida

Thalisson Christiano de Almeida

Formado em Ciência da Computação (UDESC). Foi Programador da Céu Games e professor do Técnico em Informática do SENAI-SC. Atualmente, trabalha na empresa By Seven. Já foi jogador de xadrez e praticou kung-fu, ambos por 4 anos. Hoje é praticante do Jiu-jitsu, esperando que não fique nos 4 anos. Não tem preferência de tipos de jogos em especifico, variando desde jogos casuais de Facebook até jogos mais hardcore.

Send this to a friend