1) O documento discute como criar ilusões de movimento em JavaScript através de deslocamento e animação com sprites. 2) Explica como organizar sprites de animação em pastas e usar timers para alternar entre sprites e mover o objeto animado. 3) Fornece um exemplo de objeto animado que se desloca para a direita com 5 sprites e pode parar ou inverter direção ao atingir uma "parede".

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

2. “Road to nowhere”

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

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

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!
• Criar um timer onde:
• 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. Exemplo
• Objetivos:
• objeto a deslocar-se para a direita;
• objeto animado com 5 sprites (0..4);
• possibilidade de parar o objeto;
• inverter a direção quando chega a uma “parede”;

8. “Kris Kross will make you jump, jump”

9. 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 :)

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