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
Na próxima parte, vamos separar o sprite sheet em seus subdesenhos. Até a próxima!
Parabens pela sua dedicaçäo e pelo prazer em contribuir os seus conhecimentos para aos leitores.
CurtirCurtir
Valeu, grande Alexandre!
Continue visitando o blog e fique à vontade para sugerir algum outro tópico com o qual eu possa contribuir.
Abraço!
CurtirCurtido por 1 pessoa