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”;
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”
