animação de sprites (A classe
AnimationSprites)
os capítulos anteriores, aprendemos a visualizar imagens “estáticas” no jogo (pode ser qualquer elemento do jogo como uma árvore, um poste, um bloco e etc). Agora, se eu quisesse que algum elemento do jogo apresenta-se alguma animação ? Neste capítulo vamos aprender como realizar essas animações usando sprites no jogo.
Na maioria dos jogos em 2D (talvez podemos dizer todos), alguns os elementos apresentam algum tipo de animação (como o movimento de um personagem ou a ação de algum objeto). Agora a pergunta que faço é : como são realizadas essas animações no jogo ? Essas animações são realizadas utilizando o que nós chamamos de sprites. O que vem a ser uma sprite ? Sprites nada mais são do que um conjunto de imagens, onde cada imagem representa o movimento ou ação de um determinado elemento do jogo (como um personagem ou um objeto do jogo qualquer).
Vamos ver abaixo um conjunto de imagens (sprites) de um personagem, onde cada imagem representa um movimento:
Sprites de um personagem de um jogo (dando soco)
Como funciona a animação de um personagem (ou objeto) durante o jogo ? Se observarmos as imagens acima, cada uma delas representa um movimento, e cada uma delas é exibida numa fatia de “tempo”, dando a sensação de movimento ou ação.
117 Para trabalharmos com animação de sprites aqui no Android, nós vamos fazer uso da classe chamada AnimationSprites, destinada somente para esse tipo de tarefa (presente dentro do pacote “gameutil2d.classes.basic” do nosso framework).
Para começarmos, extraia o arquivo do framework em um diretório apropriado e em seguida realiza as alterações conforme abaixo:
Nome da pasta : AnimacaoSprites
Constante “app_name” (arquivo “strings.xml” do seu projeto): Animacao de Sprites
Depois de criado o projeto, vamos adicionar as seguintes imagens , que já acompanham este material, em nosso projeto : “naruto_parado_1.png”, “naruto_parado_2.png”, “naruto_parado_3.png” e “naruto_parado_4.png”.
Depois de colocar as imagens dentro do projeto, vamos abrir o arquivo “GameMain.java”, para digitarmos o código do nosso jogo. Na declaração de atributos, vamos realizar a seguinte declaração, conforme é mostrado em seguida:
AnimationSprites naruto;
Agora dentro do método construtor GameMain , vamos escrever o seguinte código (destacado em azul), conforme é mostrado abaixo:
public GameMain(Context context) {
naruto = new AnimationSprites(context, 0, 0, 124, 164); naruto.Add(R.drawable.naruto_parado_1); naruto.Add(R.drawable.naruto_parado_2); naruto.Add(R.drawable.naruto_parado_3); naruto.Add(R.drawable.naruto_parado_4); naruto.Start(3, true); }
Irei explicar o código inserido no método acima. A linha de comando:
naruto = new AnimationSprites(context, 0, 0, 124, 164);
Carrega a instância do objeto naruto do tipo AnimationSprites. No primeiro argumento da classe, sempre passamos o valor “context”. No segundo e terceiro
118 parâmetro, passamos respectivamente a coordenada X e Y do objeto na tela. Já os dois últimos parâmetros representam , respectivamente , a largura e a altura do objeto (124 para largura e 164 para altura). Nas linhas de comando seguinte:
: naruto.Add(R.drawable.naruto_parado_1); naruto.Add(R.drawable.naruto_parado_2); naruto.Add(R.drawable.naruto_parado_3); naruto.Add(R.drawable.naruto_parado_4); :
Adicionamos as imagens (sprites) dentro do objeto, para que possamos ter uma animação do personagem, através do método Add. Em seguida, vem a seguinte instrução:
naruto.Start(20, true);
Que tem a finalidade de “iniciar” a animação, através do método Start. Esse método possui dois parâmetros : O primeiro parâmetro é responsável por definir, em frames, o intervalo da troca de imagens, e o segundo definimos se a animação vai ficar “em loop” (caso true) ou não (caso false).
Agora no método Draw vamos adicionar a seguinte instrução:
protected void Draw(SpriteBatcher spriteBatcher) { naruto.Draw(spriteBatcher);
}
Vamos executar agora a nossa demonstração ? Veja como ficou na figura seguinte:
119
Animação do personagem em execução
Em uma animação de sprites também podemos aplicar o efeito e “flip” (inversão) de uma imagem, na horizontal (como já havíamos visto com imagens estáticas). Para invertermos uma imagem na horizontal, basta adicionar um parâmetro no método Draw do objeto, o “FlipEffect.HORIZONTAL”.
Vamos voltar para o método Draw da classe GameMain para substituirmos a linha abaixo:
naruto.Draw(spriteBatcher); Por essa:
naruto.Draw(spriteBatcher,FlipEffect.HORIZONTAL);
Que inverte as imagens da animação (como havia falado, esse procedimento acima funciona também para imagens estáticas). Veja o resultado na figura seguinte:
120
Animação do personagem invertida na horizontal
Mais um exemplo de animação de sprites
Vamos realizar agora mais uma pratica de animação de sprites no Android usando a classe AnimationSprites. Para essa pratica vamos usar um projeto já feito em Android Studio (que já acompanha este material), que é o arquivo “AnimacaoSprites_GundamWingAndroidStudio.zip”.
Descompacte o arquivo em um local apropriado e em seguida, abra o projeto e execute logo em seguida. O resultado você confere na figura em seguida:
121
Jogo em execução
Esse é um exemplo baseado no jogo “Gundam Wing – Endless Duel”, um dos grandes sucessos da plataforma “Super Nitendo”.
A intenção deste exemplo é trocarmos as posições dos personagens do jogo. Para isso, vamos abrir o arquivo “GameMain.java” e em seguida vamos realizar as seguintes modificações citadas a seguir:
Dentro do método onScreenLoading, vamos substituir as seguintes linhas de código destacadas em vermelho abaixo:
public void onScreenLoading(int w, int h, OrientationMode orientation) { wing_gundam = new AnimationSprites(context, 100, 130, 200, 250); wing_gundam.Add(R.drawable.wing_gundam_parado_1);
wing_gundam.Add(R.drawable.wing_gundam_parado_2); :
heavy_arms = new AnimationSprites(context, 450, 120, 197, 263); heavy_arms.Add(R.drawable.heavy_arms_parado_1);
heavy_arms.Add(R.drawable.heavy_arms_parado_2); :
122 Pelas seguintes linhas de código destacadas em azul abaixo:
public void onScreenLoading(int w, int h, OrientationMode orientation) { wing_gundam = new AnimationSprites(context, 450, 130, 200, 250);
wing_gundam.Add(R.drawable.wing_gundam_parado_1); wing_gundam.Add(R.drawable.wing_gundam_parado_2); :
heavy_arms = new AnimationSprites(context, 100, 120, 197, 263);
heavy_arms.Add(R.drawable.heavy_arms_parado_1); heavy_arms.Add(R.drawable.heavy_arms_parado_2); :
}
Agora dentro do método Draw vamos substituir as seguintes linhas de código destacadas em vermelho abaixo:
public void Draw(SpriteBatcher spriteBatcher) {
:
wing_gundam.Draw(spriteBatcher);
heavy_arms.Draw(spriteBatcher,FlipEffect.HORIZONTAL); }
Pelas seguintes linhas de código destacadas em azul abaixo:
public void Draw(SpriteBatcher spriteBatcher) {
:
wing_gundam.Draw(spriteBatcher, FlipEffect.HORIZONTAL); heavy_arms.Draw(spriteBatcher);
}
Depois de realizar as alterações de código citadas acima, execute novamente o jogo e confira os resultados, conforme podemos observar na figura seguinte:
123
Jogo em execução – Personagens trocados de posição
Regras para a criação de sprites
Quando vamos criar as sprites (animações) de um determinado elemento de um jogo, normalmente, cada imagem que irá representar uma ação desse elemento, deve ter o mesmo tamanho (padronizado para cada elemento do jogo), e quando salvas, deverão estar nomeadas de forma que fique fácil a organização das imagens (como por exemplo : personagem_andando_1.png , personagem_andando2.png e etc).
124