JAVA GAMES 2D::Animando Sprites::08

Olá pessoal!

Nesse tutorial mostrarei como animar Sprites, não é nenhuma técnica padrão oficial de como fazer, é uma ideia minha de como animar um sprite! cada um pode fazer conforme achar melhor!

Então vamos lá pra que não sabe Sprite é cada cena que representa os estados de um personagem em um jogo 2D, segue um exemplo abaixo:

Então caso você queira fazer um game estilo Mortal Kombate, você teria que ter uma sequência de imagens que representasse todos os seus movimentos, como: andar para direita, esquerda, pular, soco alto, soco baixo, chute alto, chute baixo, poderes, fatality, combos, etc!

O que nós vamos fazer é o seguinte: Animar o Sprite, pra quem não sabe uma animação consiste em uma sequencia de imagens que é exibida uma por vez em um curto intervalo de tempo que não é percebível a troca das mesmas, assim dá uma impressão de que está se movendo!

Nesse exemplo de hoje, iremos fazer uso de uma outra Classe além da classe Game.java, vamos então criar um pacote chamado tutorial8 dentro do nosso projeto JAVAGAMES2D e colar o Game.java dentro desse pacote, nesse mesmo pacote, criaremos uma Classe chamada Sprite.java com o seguinte código:

 

1:  import javax.swing.ImageIcon;  
2:  public class Sprite {  
3:   ImageIcon cenas[]; //VETOR DE IMAGENS,  
4:   int x;   //AQUI É A COORDENADA X  
5:   int y;   //AQUI É A COORDENADA Y  
6:   int largura;  //LARGURA DA IMAGEM, CASO QUEIRA DEFINIR UMA  
7:   int altura;  //ALTURA DA IMAGEM, CASO QUEIRA DEFINIR UMA  
8:   int cena = 0;  //O INDICE DA CENA DA NOSSA SPRITE ANIMADA  
9:   int controlaVelocidade = 0;  
10:   int velocidade = 5;  
11:   //ISSO AQUI EM BAIXO PRA QUEM NÃO SABE É UM CONSTRUTOR  
12:   //QUANDO FORMOS CRIAR UM OBJETO A PARTIR DESSA CLASSE  
13:   //TEREMOS QUE: INFORMAR O NÚMERO DE CENAS, E A SUA COORDENADA INICIAL  
14:   //+ OU - ASSIM: new Sprite(3, 200, 300);  
15:   public Sprite(int numeroDeCenas, int x, int y){  
16:   cenas = new ImageIcon[numeroDeCenas];  
17:   this.x = x;  
18:   this.y = y;  
19:   }  
20:   //ESSE MÉTODO VAI ALTERNAR AS IMAGENS QUE COMPÕES NOSSA SPRITE  
21:   //DEPENDENDO DO QUE VC PRETENDER FAZER, ESSE MÉTODO PODERIA  
22:   //SER MAIS COMPLEXO!  
23:   //TIPO: animarCorrer() animarChutar() animarPular()  
24:   //E ESSES MÉTODOS SERIAM CHAMADOS AO CLICAR EM ALGUMA TECLA!!!  
25:   //ESSA ANIMAÇÃO VAI FICAR MUITO RÁPIDA, PQ ELE MUDAR A IMAGEM DA CENA  
26:   //A CADA 1/30 milissegundos  
27:   public void animar(){  
28:   cena += 1;  
29:   if(cena == cenas.length){ cena = 0; }  
30:   }  
31:   //ESSE MÉTODO CONTROLA A VELOCIDADE DA ANIMAÇÃO  
32:   //TENTEN ENTENDER ISSO AI...:  
33:   //isso é um controle de tempo paralelo ao que já tem no game loop!!!!  
34:   //o game loop vai rodar isso 30x a cada segundo  
35:   //e esse método vai mudar a cena a cada, 5 vezes que o game loop for  
36:   //executado!!!!  
37:   public void animarMaisLento(){  
38:   controlaVelocidade+=1;  
39:   if(controlaVelocidade>velocidade){  
40:    cena += 1;  
41:    controlaVelocidade = 0;  
42:    if(cena == cenas.length){ cena = 0; }  
43:   }  
44:   }  
45:  }  

Muito bem... nosso arquivo Game.java vai ficar assim:
(leiam atentamente os comentários.... deixei tudo explicado neles!!!)

1:  import java.awt.*;  
2:  import java.awt.image.BufferedImage;  
3:  import java.io.File;  
4:  import javax.swing.ImageIcon;  
5:  import javax.swing.JFrame;  
6:  public class Game extends JFrame {  
7:   BufferedImage backBuffer;  
8:   int FPS = 30;  
9:   int janelaW = 500;  
10:   int janelaH = 500;  
11:   //ESSA É A NOSSA SPRITE!  
12:   //VERIFIQUE AGORA O MÉTODO inicializar()  
13:   //LÁ VAMOS INICIAR AS IMAGENS QUE VAMOS USAR NESSA SPRITE!  
14:   //DEPOIS VERIFIQUE O MÉTODO desenharGraficos()  
15:   //VEJA QUE ESSA SPRITE TEM 3 CENAS!!!  
16:   Sprite vilao = new Sprite(3, 200, 300);  
17:   Sprite vilao2 = new Sprite(3, 100, 200);  
18:   ImageIcon fundo = new ImageIcon("src/tutor6/fundo.png");  
19:   public void atualizar() {  
20:   }  
21:   public void desenharGraficos() {  
22:   Graphics g = getGraphics(); //ISSO JÁ ESTAVA AQUI  
23:   Graphics bbg = backBuffer.getGraphics();//ISSO TAMBÉM JÁ ESTAVA AQUI...  
24:   //AQUI VAMOS MANDAR DESENHAR ALGUNS IMAGENS NA TELA  
25:   bbg.drawImage(fundo.getImage(),0,0,this);//QUI DESENHAMOS O FUNDO  
26:   //AS DIMENSÕES ORIGINAIS DO FUNDO SÃO: 500X500 QUE É O TAMANHO DA NOSSA TELA!  
27:   //AQUI TO DESENHANDO A O NOSSO PERSONAGEM  
28:   //VEJA QUE NOSSO vilão tem tudo que agente precisa!  
29:   //SUAS COORDENADAS, LARGURA, ALTURA, E AS IMAGENS!!!  
30:   bbg.drawImage(vilao.cenas[vilao.cena].getImage(), vilao.x, vilao.y, this);  
31:   vilao.animar(); //AQUI CHAMEI O MÉTODO ANIMAR  
32:   bbg.drawImage(vilao2.cenas[vilao2.cena].getImage(), vilao2.x, vilao2.y, this);  
33:   vilao2.animarMaisLento(); //AQUI CHAMEI O MÉTODO ANIMAR MAIS LENTO  
34:   //==================================================================================  
35:   g.drawImage(backBuffer, 0, 0, this);//OBS: ISSO DEVE FICAR SEMPRE NO FINAL!  
36:   }  
37:   public void inicializar() {  
38:   setTitle("Titulo do Jogo!");  
39:   setSize(janelaW, janelaH);  
40:   setResizable(false);  
41:   setDefaultCloseOperation(EXIT_ON_CLOSE);  
42:   setLayout(null);  
43:   setVisible(true);  
44:   backBuffer = new BufferedImage(janelaW, janelaH, BufferedImage.TYPE_INT_RGB);  
45:   //QUI CARREGAMOS AS IMAGENS DE NOSSA SPIRTE!!!!!!!  
46:   //PARA O VETOR DE ImageIcon[] !!!  
47:   vilao.cenas[0] = new ImageIcon("src/tutor8/s1.gif");  
48:   vilao.cenas[1] = new ImageIcon("src/tutor8/s2.gif");  
49:   vilao.cenas[2] = new ImageIcon("src/tutor8/s3.gif");  
50:   vilao.largura = 100; //LARGURA DO VILÃO  
51:   vilao.altura = 200; //ALTURA DO VILÃO , mas não vou usar isso agora..  
52:   //QUI CARREGAMOS AS IMAGENS DE NOSSA SPIRTE!!!!!!!  
53:   //PARA O VETOR DE ImageIcon[] !!!  
54:   vilao2.cenas[0] = new ImageIcon("src/tutor8/s1.gif");  
55:   vilao2.cenas[1] = new ImageIcon("src/tutor8/s2.gif");  
56:   vilao2.cenas[2] = new ImageIcon("src/tutor8/s3.gif");  
57:   vilao2.largura = 100; //LARGURA DO VILÃO  
58:   vilao2.altura = 200; //ALTURA DO VILÃO , mas não vou usar isso agora..  
59:   }  
60:   public void run() {  
61:   inicializar();  
62:   while (true) {  
63:    atualizar();  
64:    desenharGraficos();  
65:    try {  
66:     Thread.sleep(1000/FPS);  
67:    } catch (Exception e) {  
68:     System.out.println("Thread interrompida!");  
69:    }  
70:   }  
71:   }  
72:   public static void main(String[] args) {  
73:   Game game = new Game();  
74:   game.run();  
75:   }  
76:  }  

novamente lembrando que está disponível para download no link acima!!!
o meu ficou assim:

então era isso pessoal.... até o próximo tutorial!!!