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

Carlos SantosLabMM 3 - NTC - DeCA - UAAula 14, 01-11-2013

“Road to nowhere”

https://www.youtube.com/watch?v=SKqzayNo4Dk

Como criar a ilusão de movimento?

• Animaçãosprite 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 (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ã.

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!

Sprites

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)

“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ã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 :)

Descrição do movimento simplicado

evento “salta”

teto salto ou

número de incrementos até ao limite