JAVA GAMES 2D::Animando Sprites::08

DOWNLOAD DOS EXEMPLOS AQUI

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:

import javax.swing.ImageIcon;

public class Sprite {
 
 ImageIcon cenas[]; //VETOR DE IMAGENS,
 int x;     //AQUI É A COORDENADA X
 int y;     //AQUI É A COORDENADA Y
 int largura;   //LARGURA DA IMAGEM, CASO QUEIRA DEFINIR UMA
 int altura;    //ALTURA DA IMAGEM, CASO QUEIRA DEFINIR UMA
 int cena = 0;   //O INDICE DA CENA DA NOSSA SPRITE ANIMADA
 int controlaVelocidade = 0;
 int velocidade = 5;
 
 //ISSO AQUI EM BAIXO PRA QUEM NÃO SABE É UM CONSTRUTOR
 //QUANDO FORMOS CRIAR UM OBJETO A PARTIR DESSA CLASSE
 //TEREMOS QUE: INFORMAR O NÚMERO DE CENAS, E A SUA COORDENADA INICIAL
 //+ OU - ASSIM: new Sprite(3, 200, 300);
 
 public Sprite(int numeroDeCenas, int x, int y){
  cenas = new ImageIcon[numeroDeCenas];
  this.x = x;
  this.y = y;
 }
 
 //ESSE MÉTODO VAI ALTERNAR AS IMAGENS QUE COMPÕES NOSSA SPRITE
 //DEPENDENDO DO QUE VC PRETENDER FAZER, ESSE MÉTODO PODERIA
 //SER MAIS COMPLEXO!
 //TIPO: animarCorrer() animarChutar() animarPular()
 //E ESSES MÉTODOS SERIAM CHAMADOS AO CLICAR EM ALGUMA TECLA!!!
 //ESSA ANIMAÇÃO VAI FICAR MUITO RÁPIDA, PQ ELE MUDAR A IMAGEM DA CENA
 //A CADA 1/30 milissegundos
 public void animar(){
  cena += 1;
  if(cena == cenas.length){ cena = 0; }
 }
 
 //ESSE MÉTODO CONTROLA A VELOCIDADE DA ANIMAÇÃO
 //TENTEN ENTENDER ISSO AI...:
 //isso é um controle de tempo paralelo ao que já tem no game loop!!!!
 //o game loop vai rodar isso 30x a cada segundo
 //e esse método vai mudar a cena a cada, 5 vezes que o game loop for 
 //executado!!!!
 public void animarMaisLento(){
  controlaVelocidade+=1;
  if(controlaVelocidade>velocidade){
   cena += 1;
   controlaVelocidade = 0;
   if(cena == cenas.length){ cena = 0; }
  }
 }
 
}

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

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;

import javax.swing.ImageIcon;
import javax.swing.JFrame;

public class Game extends JFrame {

 BufferedImage backBuffer; 
 int FPS = 30;
 int janelaW = 500;
 int janelaH = 500;
 
 //ESSA É A NOSSA SPRITE!
 //VERIFIQUE AGORA O MÉTODO inicializar()
 //LÁ VAMOS INICIAR AS IMAGENS QUE VAMOS USAR NESSA SPRITE!
 //DEPOIS VERIFIQUE O MÉTODO desenharGraficos()
 //VEJA QUE ESSA SPRITE TEM 3 CENAS!!!
 Sprite vilao = new Sprite(3, 200, 300);
 Sprite vilao2 = new Sprite(3, 100, 200);
 
 ImageIcon fundo = new ImageIcon("src/tutor6/fundo.png");
 
 public void atualizar() {

 }

 public void desenharGraficos() {
  Graphics g = getGraphics(); //ISSO JÁ ESTAVA AQUI
  Graphics bbg = backBuffer.getGraphics();//ISSO TAMBÉM JÁ ESTAVA AQUI...
  //AQUI VAMOS MANDAR DESENHAR ALGUNS IMAGENS NA TELA
  bbg.drawImage(fundo.getImage(),0,0,this);//QUI DESENHAMOS O FUNDO
  //AS DIMENSÕES ORIGINAIS DO FUNDO SÃO: 500X500 QUE É O TAMANHO DA NOSSA TELA!
  
  //AQUI TO DESENHANDO A O NOSSO PERSONAGEM
  //VEJA QUE NOSSO vilão tem tudo que agente precisa!
  //SUAS COORDENADAS, LARGURA, ALTURA, E AS IMAGENS!!!
  bbg.drawImage(vilao.cenas[vilao.cena].getImage(), vilao.x, vilao.y, this);
  vilao.animar(); //AQUI CHAMEI O MÉTODO ANIMAR
  
  
  bbg.drawImage(vilao2.cenas[vilao2.cena].getImage(), vilao2.x, vilao2.y, this);
  vilao2.animarMaisLento(); //AQUI CHAMEI O MÉTODO ANIMAR MAIS LENTO
  
  //================================================================================== 
  g.drawImage(backBuffer, 0, 0, this);//OBS: ISSO DEVE FICAR SEMPRE NO FINAL!
 }

 public void inicializar() {
  setTitle("Titulo do Jogo!");
  setSize(janelaW, janelaH);
  setResizable(false);
  setDefaultCloseOperation(EXIT_ON_CLOSE);
  setLayout(null);
  setVisible(true);
  backBuffer = new BufferedImage(janelaW, janelaH, BufferedImage.TYPE_INT_RGB);
  
  //QUI CARREGAMOS AS IMAGENS DE NOSSA SPIRTE!!!!!!!
  //PARA O VETOR DE ImageIcon[] !!!
  vilao.cenas[0] = new ImageIcon("src/tutor8/s1.gif");
  vilao.cenas[1] = new ImageIcon("src/tutor8/s2.gif");
  vilao.cenas[2] = new ImageIcon("src/tutor8/s3.gif");
  vilao.largura = 100; //LARGURA DO VILÃO
  vilao.altura =  200; //ALTURA DO VILÃO , mas não vou usar isso agora..
  
  //QUI CARREGAMOS AS IMAGENS DE NOSSA SPIRTE!!!!!!!
  //PARA O VETOR DE ImageIcon[] !!!
  vilao2.cenas[0] = new ImageIcon("src/tutor8/s1.gif");
  vilao2.cenas[1] = new ImageIcon("src/tutor8/s2.gif");
  vilao2.cenas[2] = new ImageIcon("src/tutor8/s3.gif");
  vilao2.largura = 100; //LARGURA DO VILÃO
  vilao2.altura =  200; //ALTURA DO VILÃO , mas não vou usar isso agora..
 }

 public void run() {
  inicializar();
  while (true) {
   atualizar();
   desenharGraficos();
    try {
     Thread.sleep(1000/FPS);
    } catch (Exception e) {
     System.out.println("Thread interrompida!");
    }
  }
 }
 public static void main(String[] args) {
  Game game = new Game();
  game.run();
 }
}

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!!!

\_(^_^)_/ Comentários em baixo \_(^_^)_/