HTML5/JavaScript para Jogos (Parte 7)

Caso tenha perdido a parte anterior, acesse-a aqui: Parte 6

Agora, já conseguimos mover um retângulo através do teclado. Porém, não é tão divertido movimentar um personagem que é apenas um retângulo. Assim, hoje, daremos o primeiro passo para animar um personagem, que é mostrar uma imagem no canvas. Então, vamos acrescentar o seguinte:

...
var x2 = 0;
var dx2 = 0;
var spritesheet2;
...

window.onload = function() {	  
    ...
    ctx2.strokeRect(x2, 20, 100, 200);
  
    spritesheet2 = new Image();
    spritesheet2.src="http://orig13.deviantart.net/2af0/f/2008/134/6/0/allen_sprite_sheet_x4_by_kirby144.png";
    spritesheet2.onload = function() {
        requestAnimationFrame(secondLoop);
    };
};

Na linha 4, acrescentamos uma variável que conterá nossa sprite sheet, que é uma única imagem com todos os sprites, imagens de um personagem, que precisaremos. Então, na nossa função de inicialização, quando a janela for carregada, a variável apontará para um elemento do tipo Image, cuja origem está na URL da linha 12. Depois que a imagem for carregada, chamaremos a função requestAnimationFrame para redesenhar o canvas à taxa de, aproximadamente, 60 quadros por segundo (frames per second – FPS). Agora, veja a modificação na função secondLoop:

function secondLoop(timestamp) {
    ctx2.clearRect(0, 0, canvas.width, canvas.height);
    x2 = x2 + dx2;
  
    if (x2 > canvas.width) {
        x2 = 0;
    }
  
    ctx2.strokeRect(x2, 20, 100, 200);
  
    ctx2.drawImage(spritesheet2, canvas.width-spritesheet2.width, canvas.height-spritesheet2.height);
    requestAnimationFrame(secondLoop);
}

Perceba que uma chamada foi acrescentada na linha 11. Para a função drawImage, os seguintes parâmetros foram passados:

• a imagem a ser desenhada
• a posição x de origem do desenho (que foi calculada como a borda direita do canvas menos a largura da imagem)
• a posição y de origem do desenho (que foi calculada como a borda inferior do canvas menos a altura da imagem)

Para ver o resultado, acesse o link

http://jsbin.com/zijaqi

Na próxima parte, vamos separar o sprite sheet em seus subdesenhos. Até a próxima!