JavaScript:Parte 1: “Road to nowhere”Parte 2: “Kris Kross will make you jump, jump”Carlos SantosLabMM 3 - NTC - DeCA - UAA...
“Road to nowhere”
Como criar a ilusão de movimento?• Deslocamento       deslocamento
Como criar a ilusão de movimento?• Animação                             sprite 1                             sprite 2     ...
Como animar em JavaScript?• Organizar em pastas os sprites de uma animação:  • todos os sprites devem ter a mesma dimensão...
Como animar em JavaScript?• Podem ser adotadas soluções com 2 timers:   • um controla a animação,   • outro controla o mov...
“Kris Kross will make you jump, jump”
Vamos simplificar o salto• As leis da física não se aplicam neste exemplo!  • Vamos voltar aos primórdios dos jogos onde nã...
Descrição do movimento simplicado                                      teto salto                                         ...
Próximos SlideShares
Carregando em…5
×

(A14) LabMM3 - JavaScript - Animação de sprites e operações de salto

938 visualizações

Publicada em

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
938
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
92
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

(A14) LabMM3 - JavaScript - Animação de sprites e operações de salto

  1. 1. JavaScript:Parte 1: “Road to nowhere”Parte 2: “Kris Kross will make you jump, jump”Carlos SantosLabMM 3 - NTC - DeCA - UAAula 14, 31-10-2012 (aula marcada para 02-11-2012)
  2. 2. “Road to nowhere”
  3. 3. Como criar a ilusão de movimento?• Deslocamento deslocamento
  4. 4. Como criar a ilusão de movimento?• Animação sprite 1 sprite 2 sprite 3 sprite 1 ou sprite 4...
  5. 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: • muda para o sprite seguinte do objeto animado (em ciclo); • desloca o objeto no ecrã.
  6. 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. 7. “Kris Kross will make you jump, jump”
  8. 8. 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 :)
  9. 9. Descrição do movimento simplicado teto salto ou número de incrementos até ao limite evento “salta”

×