No tutorial anterior, ensinei a inserir músicas e sons. Também ensinei a fazer pequenas edições básicas, como modificar o tom de um efeito sonoro e como sincronizá-lo com os eventos do jogo.
Hoje vamos abordar as animações, como criar um sprite animado para que possamos colocá-lo em jogo e como controlá-los. Então vamos começar!
Animação
Antes de começar animar o nosso jogo, vamos criar as definições: o que é animação? Animações são sequências de imagens que criam a ilusão de movimento. Cada imagem que forma a sequência é chamada de Quadro (ou Frame), tanto que uma qualidade de animação pode ser medida em FPS (Frames Per Seconds). Essa métrica indica quantos quadros são usados para gerar 1 segundo de animação. Por exemplo, muitos filmes possuem FPS de 24, ou seja, 24 imagens para gerar 1 segundo. Jogos costumam estar entre 30 e 60 FPS, porque em filmagens é possível criar efeitos de velocidade com apenas manejo da câmera (a imagem abaixo do filme Velozes e Furiosos mostra este efeito), mas o mesmo não pode ser facilmente aplicado em jogos.
Bem, agora que já vimos os conceitos básicos, vamos ao trabalho. A animação que faremos hoje será com a flor sendo destruída. A bola irá bater e a flor irá diminuir de tamanho, até desaparecer. Para isto, primeiro vamos baixar estas cinco imagens:
 -  -  -  - 
Cada imagem desta será um quadro da nossa animação. Agora vamos fazer o seguinte: alteraremos o sprite spr_flor para adicionar os quadros. Para isto, abra o spr_flor e clique em “Load Sprite”.
Na caixa de abrir, selecione todas as imagens e clique em “Abrir”:
E pronto! Na tela das propriedades do sprite deve mostrar que ele possui 5 sub-imagens e se nós testarmos, veremos que  todas as flores estão animadas descontroladamente (embora criou um efeito legal). O importante aqui é que as imagens originais devem ser selecionadas em ordem de animação, assim não será preciso gastar tempo em reordenar os quadros.

Limitando a animação
A animação está ok, mas o problema é que ela ocorrerá somente quando a flor for atingida pela bola. Então, temos que cuidar disto. A primeira coisa que faremos é abrir o “obj_flor”, criar um evento “Create” e inserir o seguinte código:
01. destruir = false;
02. image_speed = 0;

A variável “destruir” servirá como gatilho para iniciar a animação. Já a variável “image_speed” é uma variável do sistema que indica a velocidade da animação do Sprite. Quando atribuímos 0 para a variável, a animação é suspensa. O valor 1 é a velocidade padrão e, se colocarmos 0.5, a animação terá a metade da velocidade. Se colocarmos 2, terá o dobro. Então, isto fará com que a animação seja suspensa.
Agora, vamos fazer com que a flor desapareça: este processo inicia-se com a colisão entre a flor e a bola. Portanto, vamos alterar o código responsável. Selecione o evento da colisão com a bola e vamos editar o código já existente, que é o seguinte:
01. instance_destroy();
02. score += 100;

Para:
01. destruir = true;
02. score += 100;

Aqui, substituímos a linha 01, que antes já removia a flor, para que acione a variável “destruir”.
Agora, vamos para a parte principal do código. Crie um evento “Step” no “obj_flor” e adicione o seguinte código:
01. if (destruir==true){
02.    image_speed = 0.5;
03.    if(image_index == image_number-1){
04.      instance_destroy();
05.    }
06. }

Está praticamente pronto, mas antes precisamos alterar uma coisa: a máscara de colisão. Ela determina a área da imagem em que uma colisão é válida. Atualmente a área é quadrada, o que faz com que ocorram falsos positivos, uma vez que a imagem da flor está mais para redonda. Vamos corrigir abrindo o “spr_flor” e clicando em “Modify Mask”.
Na tela que abriu, procure pela seção “Shape” e selecione a opção “Ellipse” (circulo vermelho). Isto fará com que a máscara de colisão se assemelhe a imagem das flores (ver área marcada pelo círculo azul).
E agora está pronto!