1) O documento discute como criar animações em JavaScript através de sprites e deslocamento incremental de objetos. 2) É recomendado organizar os sprites da animação em pastas ou em uma imagem única e usar timers para alternar entre sprites e mover o objeto a cada evento. 3) O exemplo demonstrado anima e move um objeto para a direita usando sprites, e pode pará-lo ou inverter sua direção.

1. JavaScript:
Parte 1: “Road to nowhere”
Parte 2: “Kris Kross will make you jump, jump”
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 14, 01-11-2013

2. “Road to nowhere”
https://www.youtube.com/watch?v=SKqzayNo4Dk

3. Como criar a ilusão de movimento?
• Animação
sprite 1
sprite 2
sprite 3
sprite 1 ou sprite 4...

4. Como criar a ilusão de movimento?
• Deslocamento
deslocamento

5. Como animar em JavaScript?
• Organizar em pastas os sprites de uma animação:
• todos os sprites devem ter a mesma dimensão (principalmente se
existirem colisões);
• animação deve funcionar de um modo natural;
• não exagerar no número de passos!
• Ou ter todos os sprites numa única imagem...
• Criar um timer onde, em cada evento:
• muda para o sprite seguinte do objeto animado (em ciclo);
• desloca o objeto no ecrã.

6. Como animar em JavaScript?
• Podem ser adotadas soluções com 2 timers:
• um controla a animação,
• outro controla o movimento.
• Se o objeto fica parado...
• então a animação também deve parar!
• Se o objeto faz algo diferente...
• então a animação também deve ser diferente!

7. Sprites

8. Exemplo
• Objetivos:
• objeto a deslocar-se para a direita;
• objeto animado com vários sprites;
• possibilidade de parar o objeto;
• inverter a direção quando chega a uma “parede”.
!
(Este exemplo foi demonstrado na aula e publicado na zona de ficheiros do
grupo)

9. “Kris Kross will make you jump, jump”
https://www.youtube.com/watch?v=010KyIQjkTk

10. Vamos simplificar o salto
• As leis da física não se aplicam neste exemplo!
• Vamos voltar aos primórdios dos jogos onde não existia gravidade!
• O objeto sobe e desce sempre a uma velocidade constante.
• O objeto continua com a mesma animação... mesmo durante o salto :)

11. Descrição do movimento simplicado
teto salto
ou
número de
incrementos
até ao limite
evento
“salta”