TUTORIAL GAMES - Usando o Canvas - Aula 01

Tutorial: Jogos em HTML5 – Parte 1:
Usando o Canvas
7 de novembro de 2013 Thalisson Christiano de Almeida Tutoriais
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 >
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
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
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
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
4 contexto.fillStyle = “#00FF00”;
6 contexto.fillStyle = “#FF0000”;
13 contexto.fillStyle = “#FF00FF”;
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
4 contexto.fillStyle = “#00FF00”;
6 contexto.strokeStyle = “#FF0000”;
13 contexto.fillStyle = “#FF00FF”;
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!
1.
Tutorial: Jogos em HTML5 – Parte 2: Eventos
2.
Tutorial: Jogos em HTML5 – Parte 6: Adicionando Pontuação e Mensagens

3.
Tutorial: Jogos em HTML5 – Parte 7: Hi-Score
4.
Tutorial: Jogos em HTML5 – Parte 8: Adicionando Efeito de Sons
HTML5, Programação
Próximo Post
Tutorial: Desenvolvimento de Jogos para Android - Parte 3

TUTORIAL GAMES - Usando o Canvas - Aula 01

Enviado por

Direitos autorais:

Formatos disponíveis

TUTORIAL GAMES - Usando o Canvas - Aula 01

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

TUTORIAL GAMES - Usando o Canvas - Aula 01

Enviado por

Direitos autorais:

Formatos disponíveis

Tutorial: Jogos em HTML5 – Parte 1:

Desde seu anúncio oficial, o HTML5 está

Uma nova tag chegou

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

4 <canvas id=”game” width=800 height=600>

5 Seu navegador não suporta HTML 5

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

2 //O código vai vir aqui

2 var canvas = document.getElementById(“game”);

3 var contexto = canvas.getContext(“2d”);

Na linha 2, nós obtemos a referência do Canvas, cujo parâmetro passado é o ID definido

2 var canvas = document.getElementById(“game”);

3 var contexto = canvas.getContext(“2d”);

Os parâmetros são os mesmos que os do “fillRect()”, a posição x, a posição y, largura e

Arcos, Círculos e circunferência

Para desenhar um arco ou um círculo, utiliza-se um conjunto de métodos semelhantes

Observe a diferença e, se você nunca entendeu a diferença entre um círculo e uma

2 var canvas = document.getElementById(“game”);

3 var contexto = canvas.getContext(“2d”);

2 var canvas = document.getElementById(“game”);

3 var contexto = canvas.getContext(“2d”);

Tutorial: Jogos em HTML5 – Parte 2: Eventos

Tutorial: Jogos em HTML5 – Parte 6: Adicionando Pontuação e Mensagens

Tutorial: Jogos em HTML5 – Parte 7: Hi-Score

Tutorial: Jogos em HTML5 – Parte 8: Adicionando Efeito de Sons

Tutorial: Desenvolvimento de Jogos para Android - Parte 3

Você também pode gostar