Criando animações interessantes com “Sprite Sheets” em html5+javascript
Olá pessoal. Tudo certo?!
Nesse post, mostro como criar animações, em html5+javascript, usando sprite sheets. Trata-se de uma releitura de um post antigo onde usei XNA.
Exemplo funcionando e código-fonte
Você pode conferir o exemplo de hoje, em execução, clicando aqui.
O fonte completo está no github.
Aliás, há muitos outros exemplos disponíveis na minha página de exemplos.
O que são sprite sheets?
Há uma boa definição na Wikipedia. Mas, acho que você entenderá mais fácil com o exemplo. Veja:
Pegou a idéia?! Ou seja, é um bitmap com várias imagens que formam uma animação.
Como fazer a animação
Com um pouco de criatividade, e o poder do elemento canvas, criar uma animação ficou muito simples. Veja a idéia básica:
O que fizemos?
- Optei por carregar a imagem do sprite dinamicamente. Contei com a ajuda do jquery para saber quando a carga está completa;
- Quando a carga está completa, disparo um loop “eterno” para atualizar a interface (a cada 50ms);
- Separei a “lógica” de atualização e desenho em duas funções (da mesma forma que ocorre em XNA). Acho que as coisas ficam mais claras assim;
- A cada “iteração”, determino uma nova posição da imagem que desejo desenhar. Quando toda a imagem já foi desenhada, recomeço;
- A cada iteração, limpo completamente o display e reconstruo toda a imagem.
No fim, é bastante simples, não acha?!
Por hoje, era isso.
