animação de sprites
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 dos 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:
94
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.
Para trabalharmos com animação de sprites aqui no MONOGAME faremos uso da classe chamada
AnimationSprites, destinada somente para esse tipo de
tarefa (presente dentro do pacote “gameutil2d.classes.basic” da nossa biblioteca).
Para começarmos vamos criar um novo projeto no MONOGAME chamado “Animacao_de_Sprites”. Em seguida, copie todos os arquivos da biblioteca “GameUtil2D” para
95
dentro do seu projeto e , por último, copie todas as imagens presentes dentro da pasta “Capitulo 6” (que acompanha este material) para dentro da pasta ”Content”. Não se esqueça de realizar o processo de “Copiar para Diretório” para todos os arquivos inseridos em “Content”.Agora dentro da seção de declaração de bibliotecas, digite a seguinte linha de comando abaixo:
using gameutil2d.classes.basic;
Agora dentro da classe Game1 , na seção de declaração de atributos, vamos digitar a seguinte instrução abaixo:
AnimationSprites naruto;
Agora dentro do método LoadContent vamos digitar o seguinte bloco de comandos destacados em negrito abaixo: protected override void LoadContent() {
// Create a new SpriteBatch, which can be used to // draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
GD.instance = GraphicsDevice;
naruto = new AnimationSprites(Content, 0, 0, 124,
164); naruto.Add("naruto_parado_1"); naruto.Add("naruto_parado_2"); naruto.Add("naruto_parado_3"); naruto.Add("naruto_parado_4"); naruto.Start(6, true); }
96
Irei explicar o código inserido no método acima. A linha de comando:
naruto = new AnimationSprites(Content, 0, 0, 124, 164); Carrega a instância do objeto naruto do tipo
AnimationSprites. No primeiro argumento da classe,
sempre passamos o valor “Content”. No segundo e terceiro 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(“naruto_parado_1”); naruto.Add(“naruto_parado_2”); naruto.Add(“naruto_parado_3”); naruto.Add(“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(6, 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
97
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 destacada:protected override void Draw(GameTime gameTime) {
GraphicsDevice.Clear(Color.CornflowerBlue); // TODO: Add your drawing code here
spriteBatch.Begin();
naruto.Draw(spriteBatch); spriteBatch.End();
base.Draw(gameTime); }
Antes de executarmos, retire a seguinte instrução dentro do método construtor da classe :
graphics.IsFullScreen = false;
Depois de digitar o código solicitado, execute o nosso jogo e confira o resultado, como demonstra a figura seguinte:
98
Animação do personagem em execução
Em uma animação de sprites também podemos aplicar o efeito de “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 valor true.
Vamos voltar para o método Draw da classe Game1 para substituirmos a linha abaixo:
naruto.Draw(spriteBatch); Por essa:
99
Depois de realizar a alteração no código execute novamente o jogo , conforme demonstra o resultado mostrado abaixo .Animação invertida na horitontal
Mais um exemplo de animação de sprites
Vamos realizar agora mais uma pratica de animação de sprites no MONOGAME usando a classe AnimationSprites. Para essa pratica vamos descompactar um projeto já feito (que já acompanha este material), que é o arquivo “AnimacaoSprites_GundamWing.zip” (presente dentro da pasta “Capitulo 6”).
100
Após descompactar o arquivo
AnimacaoSprites_GundamWing.zip” vamos abrir o projeto , que se encontra dentro do diretório “AnimacaoSprites_GundamWing”, conforme mostra a figura seguinte:
Projeto descompactado
Depois de abrir o nosso projeto execute-o, e confira o resultado conforme demonstra a figura seguinte:
101
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 na classe Game1 e, em seguida, vamos realizar as seguintes modificações citadas a seguir:
Dentro do método LoadContent vamos substituir as seguintes linhas de código destacadas em negrito abaixo:
102
protected override void LoadContent() {
:
//Carrega a animação do primeiro personagem
wing_gundam = new AnimationSprites(Content, 100, 130, 200, 250);
wing_gundam.Add("wing_gundam_parado_1"); wing_gundam.Add("wing_gundam_parado_2"); :
//Carrega a animação do segundo personagem
heavy_arms = new AnimationSprites(Content, 450, 120, 197, 263);
heavy_arms.Add("heavy_arms_parado_1"); heavy_arms.Add("heavy_arms_parado_2"); :
}
Pelas seguintes destacadas em negrito em seguida : protected override void LoadContent()
{ :
//Carrega a animação do primeiro personagem
wing_gundam = new AnimationSprites(Content, 450, 130, 200, 250);
wing_gundam.Add("wing_gundam_parado_1"); wing_gundam.Add("wing_gundam_parado_2"); :
//Carrega a animação do segundo personagem
heavy_arms = new AnimationSprites(Content, 100, 120, 197, 263);
heavy_arms.Add("heavy_arms_parado_1"); heavy_arms.Add("heavy_arms_parado_2");
103
Agora dentro do método Draw vamos substituir as seguintes linhas de código destacadas em negrito abaixo:protected override void Draw(GameTime gameTime) {
:
wing_gundam.Draw(spriteBatch);
heavy_arms.Draw(spriteBatch,true);
}
Pelas seguintes linhas de código destacadas em negrito abaixo:
protected override void Draw(GameTime gameTime) {
:
wing_gundam.Draw(spriteBatch,true);
heavy_arms.Draw(spriteBatch);
}
Depois de realizada as modificações execute novamente o nosso jogo, e confira o resultado que é mostrado na figura a seguir:
104
Jogo em execução – Imagens trocadas
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.).