JavaScript:
Parte 1: “Road to nowhere”
Parte 2: “Kris Kross will make you jump, jump”
Carlos Santos

LabMM 3 - NTC - DeCA ...
“Road to nowhere”

https://www.youtube.com/watch?v=SKqzayNo4Dk
Como criar a ilusão de movimento?
• Animação
sprite 1

sprite 2

sprite 3

sprite 1 ou sprite 4...
Como criar a ilusão de movimento?
• Deslocamento

deslocamento
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 movim...
Sprites
Exemplo
• Objetivos:

• objeto a deslocar-se para a direita;

• objeto animado com vários sprites;

• possibilidade de par...
“Kris Kross will make you jump, jump”

https://www.youtube.com/watch?v=010KyIQjkTk
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
ou
número de
incrementos
até ao limite

evento
“salta”
Próximos SlideShares
Carregando em…5
×

T14_LM3: Animação (2013-2014)

509 visualizações

Publicada em

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
509
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
14
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

T14_LM3: Animação (2013-2014)

  1. 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. 2. “Road to nowhere” https://www.youtube.com/watch?v=SKqzayNo4Dk
  3. 3. Como criar a ilusão de movimento? • Animação sprite 1 sprite 2 sprite 3 sprite 1 ou sprite 4...
  4. 4. Como criar a ilusão de movimento? • Deslocamento deslocamento
  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, em cada evento: • 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. Sprites
  8. 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. 9. “Kris Kross will make you jump, jump” https://www.youtube.com/watch?v=010KyIQjkTk
  10. 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. 11. Descrição do movimento simplicado teto salto ou número de incrementos até ao limite evento “salta”

×