Jogos: Introdução ao Canvas do HTML5

 Introdução ao Canvas do HTML5

Neste Post iremos mostrar como usar o Canvas do HTML  5 para o desenvolvimento de jogos.  Canvas é um elemento introduzido no HTML 5 para permitir o desenvolvimento de software  que usam gráficos, como por exemplo, jogos digitais. É um bitmap retangular onde o programador pode usar código Javascript para desenhar.

Conceitos Abordados

Os tópicos que serão abordados neste Post são os seguintes.

• Iremos falar sobre o Canvas.
• Sobre o que é um Sprite.
• O que é um frame em um Sprite.
• E, finalmente, iremos falar sobre como realizar a simulação de movimento. 

Aqui podemos ver o uso do Canvas em uma página Html.  Ao carregar a página a função desenha do javascript é chamada. Podemos ver também que o elemento Canvas é declarado com um tamanho de 600 por 500 pixels.  A função desenha, que está no arquivo teste.js, pode então realizar desenhos sobre o Canvas. Vamos ver o que essa função faz.

 

Acima podemos ver a função desenha. Ela desenha apenas um retângulo no Canvas. Para isso, primeiramente, ela obtém uma referência ao Canvas por meio do objeto DOM.  Em seguida, é obtido o contexto 2D, para desenhar. Até o momento, o contexto 2D é o único suportado. Finalmente, o contexto é usado para desenhar um retângulo no Canvas. Caso o navegador não suporte o uso do Canvas, uma mensagem é exibida. 

É importante salientar, que o ponto de origem do posicionamento de um elemento no Canvas é o canto superior esquerdo. Nesse canto, temos o pixel (0,0). Indo para direita, iremos incrementar  a posição no eixo x e descendo, iremos incrementar a posição no eixo y. 

 

 

Sprites

 

Vamos mostrar agora como exibir uma imagem em um Canvas. A imagem que iremos ler contém uma série de desenhos de uma tartaruga em diferentes direções, e com pequenas alterações. Esse tipo de imagem é chamada de Sprite.

 

Sprite é um bitmap, bidimensional, contendo o mesmo personagem, ou elemento, com pequenas alterações, de modo que, ao exibir uma de cada vez apagando a anterior, fornecemos a ilusão de movimento. Cada imagem diferente do personagem dentro do Sprite é chamado de frame. No exemplo acima, o Sprite exibido possui oito frames.  Sprite são usados em jogos 2D e isométricos. Mostraremos como manipular essa imagem para simular movimento, um pouco mais adiante. O código abaixo mostra como exibir essa imagem como um todo. 

Primeiramente, lemos o arquivo com a imagem, usando a função src de um objeto image. Após o carregamento, podemos exibir a imagem, usando o método drawImage do objeto contexto. Na versão mais simples do drawImage, passamos o objeto image, e a posição x e y, onde será desenhada a imagem. Porém, a versão completa do método, drawImage permite  a manipulação mais detalhada da imagem, como mostrado abaixo.

Ela permite que você selecione um recorte da imagem original, para ser exibido no Canvas, com um redimensionamento.  Vamos mostrar o uso desta versão do método com a figura contendo a série de desenhos de tartarugas. 

Nesse exemplo, iremos apenas exibir a primeira tartaruga da sequência, ou seja, o primeiro frame, o que define um recorte de 50 por 50 pixels. Como é a primeira tartaruga, então as coordenadas de origem são 0 por 0.  Vamos colocar esse recorte no topo do Canvas, portanto as coordenadas de destino são 0 por 0.  E como iremos manter as proporções, o tamanho do recorte  no Canvas será 50 por 50 pixels. O resultado da execução desse código será a, exibição da primeira tartaruga da imagem, no canto superior esquerdo do Canvas. 

Fazendo a tartaruga andar corretamente

 

O próximo passo é fazer a tartaruga andar, usando a técnica de Sprite, que é a ideia de sobrepor imagens em tempos diferentes. Para isso, vamos organizar o código para ficar mais modular e com componentes mais independentes. Vamos criar um objeto tartaruga, que agrupa as informações relacionadas com o personagem da tartaruga, tais como a posição atual, sua imagem e o frame corrente. 

 

Com isso a função desenha fica mais genérica, e exibe o frame corrente da tartaruga na posição parametrizada. Note que, a posição do frame corrente é obtida, multiplicando o número do frame pela largura do frame. 

É preciso também, apagar a tartaruga desenhada anteriormente.  Para isso, criamos a função limpa, que desenha um retângulo sobre a tartaruga. Outra função importante, é a função que captura a tecla pressionada para fazer a tartaruga mudar de posição. Ela é atribuída ao método, addEventlistener, do DOM, e caso a tecla espaço seja pressionada, a função invoca a função limpa e, decrementa cinco pixels da posição vertical da tartaruga, fazendo com que o próximo frame seja desenhado um pouco mais acima. Além disso, ela alterna entre os dois primeiros frames, que são os frames onde a tartaruga está voltada para cima. Após isso, a função chama a função desenha.

Resultado

Esse é o resultado da execução do código. 

Chegamos ao final deste Post. O código completo desta lição está no Github e pode ser acessado por meio do link nos comentários.  A execução do código pode ser vista neste link. A versão em vídeo deste tutorial pode ser vista neste link. Nos próximos Post abordaremos os conceitos de game loop e de tratamento de colisões. 

Chegamos ao final de nosso Post. Se esse Post foi útil para você, por favor, considere deixar um comentário.