Além das linhas: desenhando imagens no canvas - Parte 3 - A animação

Chegou a hora de animar o personagem usando uma sprite sheet. Vamos atualizar os conhecimentos adquiridos na parte 2 e dar vida ao astronauta.

O conceito

Aqui vamos criar um pequeno loop que vai variar o clipping da imagem do astronauta de tempos em tempos. O tempo da atualização será determinado pela variável velocidade. Segue o código:

//Recupera o canvas
var context = document.getElementById('output').getContext('2d');

//Posição X inicial
var posicaoXOrigem = 0;

//Posição Y não varia
var posicaoYOrigem = 0;

//Largura e altura serão os mesmos
var larguraOrigem = 51;
var alturaOrigem = 50;

//O personagem será desenhado na mesma posição
var posicaoXDestino = 0;
var posicaoYDestino = 150;
var larguraDestino = 51;
var alturaDestino = 50;

//A velocidade do personagem
var velocidade = 80;

//Armazena o último tempo de processamento
var ultimoTempo = 0;

//Carrega a imagem. Nada novo aqui
var img = new Image();
img.src = 'spaceman.png';
img.onload = loop; //Aqui chama o loop da animação

//O loop
function loop() {
//Tempo no início do loop
var agora = new Date().getTime();

//Se não existe tempo anterior...
if(!ultimoTempo) {
//Grava o tempo anterior
ultimoTempo = agora;
}

//Se a subtração entre os tempos for maior que a velocidade
if(agora - ultimoTempo > velocidade) {

//Limpa a tela
context.clearRect(0, 0, context.canvas.width, context.canvas.height);

//Se ainda não chegou no último quadro
if(posicaoXOrigem < 357) {
//Avança um quadro
posicaoXOrigem += 51;
} else { //Caso contrário
//Volta ao quadro inicial
posicaoXOrigem = 0;
}
//Desenha a imagem
context.drawImage(img, posicaoXOrigem, posicaoYOrigem, larguraOrigem, alturaOrigem, posicaoXDestino, posicaoYDestino, larguraDestino, alturaDestino);

//Salva o último tempo
ultimoTempo = agora;
}

//Chama o loop indefinidamente
requestAnimationFrame(loop);

}

Trocando em miúdos:

• Após carregar a imagem (onload), a função loop é chamada;
• Ocorre a checagem do tempo atual;
• Se não existe tempo anterior, o tempo atual e anterior passam a ser os mesmos;
• Se o tempo atual - o tempo anterior for maior que a velocidade, então pode animar;
• Limpa a tela;
• Incrementa o quadro ou volta ao quadro inicial;
• Desenha a imagem atualizada na tela;
• Registra o último tempo (para o próximo quadro da animação);
• Repete todos os passos indefinidamente;

A cada passo, a posição do recorte aumenta em 51 pixels. Na velocidade que determinamos na variável velocidade, o que parece é que o astronauta está correndo para a direita, mas sem sair do lugar.

Por hoje fico por aqui. Até breve!