Tutorial: GameMaker Studio – Parte 07: Animações

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!

 

Conclusão

No tutorial de hoje entramos com animações. Vimos o conceito de animação e como aplicar no GameMaker. Vimos como criar um sprite animado e como controlá-lo. No próximo tutorial, vamos criar as outras telas de jogo, a tela de Splash, o menu principal e as outras telas. Então até a próxima semana.

Thalisson Christiano de Almeida

Thalisson Christiano de Almeida

Formado em Ciência da Computação (UDESC). Foi Programador da Céu Games e professor do Técnico em Informática do SENAI-SC. Atualmente, trabalha na empresa By Seven. Já foi jogador de xadrez e praticou kung-fu, ambos por 4 anos. Hoje é praticante do Jiu-jitsu, esperando que não fique nos 4 anos. Não tem preferência de tipos de jogos em especifico, variando desde jogos casuais de Facebook até jogos mais hardcore.

Send this to a friend