Animação da Ave

Se você prestou atenção na página anterior, deve ter percebido algumas curiosidades com a nossa ave. Ela não apenas voou muito devagar, como voou de forma estática, sem bater as asas.

A solução deste problema tem duas etapas: na primeira é preciso obter uma tira de animação, ou seja, uma sequência de imagens que simulam as asas batendo, fazendo com que nosso cérebro "entenda" o voo de forma natural. Veja abaixo como seria uma dessas tiras:

É neste momento que seus "dotes artísticos" farão toda a diferença porque a maior parte do movimento natural dos personagens já está no seu desenho e saber como fazer isso é muito importante. Se não é o seu caso, considere a inclusão de um amigo artista no seu projeto ou então pesquise por bibliotecas de elementos gráficos.

Seja qual for a sua situação, mais adiante teremos e-books aqui mesmo sobre como fazer animações bacanas sem perder os cabelos e como criar pixel arte para jogos, sem criar calo nos dedos.

A sequência de imagens do nosso "bird" já está na folha do jogo, na seguinte posição: 100,0. Note ainda que são 8 frames para compor uma batida completa da asa. Assim, nas variáveis globais precisamos criar uma ave não mais como shape, mas como sprite:

Para complementar, basta alterar o código no final do script, onde ocorre a impressão da ave na tela:

Clique no link a seguir e veja o que vai acontecer: exemplo 3.

A operação "desenha" da função Sprite é diferente da mesma operação na função Shape. Existem agora duas variáveis além da posição x,y da imagem (na tela). São elas offsetX e offsetY ou seja, elas indicam, na horizontal (offsetX) ou na vertical(offsetY) qual é o "frame" da ave que deve ser mostrado ao jogador (em valores absolutos, no caso, variando de 0 a 7 na horizontal).

Como fazer isso funcionar na programação? Simples: criamos uma nova variável global, chamada ave_f, para indicar qual "frame" deve ser usado.

Note que a variável ave_f irá variar sempre entre 0 e 7, que são os frames da animação do pássaro: exemplo 4. Sim, está parecendo um beija flor mas isso pode ser melhorado. Como? Pense um pouco antes de prosseguir.

A primeira coisa a fazer é controlar a velocidade de deslocamento da ave e a melhor forma de fazê-lo é usando uma variável para isso (ave_v):

Isso é suficiente para sincronizar a velocidade do deslocamento com o bater das asas: exemplo 5. Ainda não é o ideal porque é preciso variar a velocidade das batidas da asa, o que faremos com outra variável (ave_b).

Colocamos o valor 8 na variável ave_b (bater das asas) e usamos esse valor para obter o módulo da variável frames. Quando for zero, o looping criado será executado ou seja a velocidade (neste caso) vai variar de 0 a 7. Veja no exemplo 6 como o voo está mais "macio". Agora podemos controlar melhor a velocidade da ave: mais rápido / bate as asas mais rápido; mais lento, bate as asas mais devegar.

Só falta mudar a perspectiva da ave, ou seja, mais perto = maior e mais longe = menor. O tamanho do pássaro será definido em mais uma variável (ave_r) cujo resize 1 indica o tamanho natural da imagem, resize = 2 duas vezes o tamanho e resize = 0.5 metade do tamanho.

Teremos que fazer uma última mudança, que é usar a função SptRsz que indica um elemento como o Sprite só que com um parâmetro a mais, que é justamente a escala.

Colocamos o valor 0.5 na variável ave_r para indicar que é a metade do tamanho da ave. Veja no exemplo 7. Como bônus, vamos montar uma fórmula para alterar essas variáveis cada vez que a ave der uma volta completa.

Ou seja, as variações propostas irão causar vôos diferentes a cada volta da ave. Alguns ficarão estranhos mas outros perfeitamente normais (exemplo 8). Cabe a você criar uma fórmula mais adequada, tipo ave longe = velocidade menor (asas e deslocamento); ave perto = velocidade maior.

Aguardem mais para breve. Ainda não acabou.