JAVA GAMES 2D::Imagens::06

Olá pessoal!
Nesse tutorial, vamos aprender como desenhar imagens (PNG GIF JPG) nas telas de nossos games! é bem legal usar imagens para construir games, eles ficam com um design mais chamativo, e dá menos trabalho que desenhar com usando a Classe geom que vimos nos tutoriais anteriores... recomendo que aprendam a usar alguma ferramenta de desenhos em VETOR (indico o Inkscape ou CorelDraw) e outra ferramente para tratar imagens (indico o Gimp ou Photoshop), mas use o de sua preferência, estarei usando o Inkscape e Gimp em alguns dos exemplos que irei postar ainda... (pegar algumas no google também! \(^_^)/  )...

Muito bem... o primeiro passo para desenhar imagens na tela é ter uma variável do tipo imagem, e carregar uma imagem para essa variável!
(lembrando ao declarar uma variavel do tipo ImageIcon devemos importar essa classe primeir, o Eclipse importa automaticamente para mim, quando uso o autocomplete)

1:  ImageIcon abelha = new ImageIcon("src/pacote/imagem.png");  

Lembre de usar imagens com fundo transparente quando for desenhar a Sprite de algum personagem para seu jogo!

Novamente crie um pacote chamado tutorial6 dentro do projeto JAVAGAMES2D, cole lá a classe Game.java que deixamos como modelo, salve uma imagem de sua preferência nesse mesmo pacote (ah! ou baixe o exemplo pronto no link acima!!!)

Olhe como via ficar o nosso código:
(no inicio declaramos a variável abelha e mandamos desenhar no método desenharGraficos() )

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:   ImageIcon abelha = new ImageIcon("src/tutor6/bee.png");  
12:   ImageIcon fundo = new ImageIcon("src/tutor6/fundo.png");  
13:   public void atualizar() {  
14:   }  
15:   public void desenharGraficos() {  
16:   Graphics g = getGraphics(); //ISSO JÁ ESTAVA AQUI  
17:   Graphics bbg = backBuffer.getGraphics();//ISSO TAMBÉM JÁ ESTAVA AQUI...  
18:   //AQUI VAMOS MANDAR DESENHAR ALGUNS IMAGENS NA TELA  
19:   bbg.drawImage(fundo.getImage(),0,0,this);//QUI DESENHAMOS O FUNDO  
20:   //AS DIMENSÕES ORIGINAIS DO FUNDO SÃO: 500X500 QUE É O TAMANHO DA NOSSA TELA!  
21:   //DESENHANDO A ABELHA NAS COORDENADAS X=200 e Y=200  
22:   bbg.drawImage(abelha.getImage(),200,200,this); //aqui fica com as dimensões originais!  
23:   //AQUI DEFINI A LARGURA E ALTURA DA IMAGEM  
24:   bbg.drawImage(abelha.getImage(),100,100,40,40,this); //aqui não fica com as dimensões originais!  
25:   //AQUI VAMOS ROTACIONAR A IMAGEM EM 45º  
26:   //PARA ISSO VAMOS USAR OUTRA VARIAVEL DO TIPO Graphics2D  
27:   //SE NÃO usarmos outra variável tudo que tá no buffer será rotacionado também!  
28:   Graphics2D bbg2d = (Graphics2D) backBuffer.getGraphics();//AQIU É NOSSA OUTRA VÁRIAVEL!  
29:   //para rotacionar primeiro define o eixo (isso desloca a imagem, então depois temos que desfazer)  
30:   //vou por o exito no meio, então é só dividir a altura e largura da imagem por 2  
31:   bbg2d.translate((abelha.getIconWidth()/2)+300, (abelha.getIconHeight()/2)+300); //tem que desfazer isso depois que a imagem será deslocada!  
32:   bbg2d.rotate(45*(Math.PI/180)); //vamos calcular 45º  
33:   bbg2d.translate(-((abelha.getIconWidth()/2)+300), -((abelha.getIconHeight()/2)+300));// agora desfaz o négocio do exito!!!  
34:   //veja que eu passei os mesmos valores só que negativos, ovserve o sinal de "-" menos  
35:   bbg2d.drawImage(abelha.getImage(),300,300,this); //desenha a imagem  
36:   //==================================================================================  
37:   g.drawImage(backBuffer, 0, 0, this);//OBS: ISSO DEVE FICAR SEMPRE NO FINAL!  
38:   }  
39:   public void inicializar() {  
40:   setTitle("Titulo do Jogo!");  
41:   setSize(janelaW, janelaH);  
42:   setResizable(false);  
43:   setDefaultCloseOperation(EXIT_ON_CLOSE);  
44:   setLayout(null);  
45:   setVisible(true);  
46:   backBuffer = new BufferedImage(janelaW, janelaH, BufferedImage.TYPE_INT_RGB);  
47:   }  
48:   public void run() {  
49:   inicializar();  
50:   while (true) {  
51:    atualizar();  
52:    desenharGraficos();  
53:    try {  
54:     Thread.sleep(1000/FPS);  
55:    } catch (Exception e) {  
56:     System.out.println("Thread interrompida!");  
57:    }  
58:   }  
59:   }  
60:   public static void main(String[] args) {  
61:   Game game = new Game();  
62:   game.run();  
63:   }  
64:  }  

Muito bem... tudo okay!!! agora vamos entender alguns pequenos detalhes...
muito bem... sabemos que PI = 3.14; que é = a 180°, como é que calculamos 1°?
dividimos PI/180  = 0,017444444, muito bem isso é igual a 1° e como é que calculamos 45º é só multiplicar (PI/180)*45 !!!

no método translate(x,y) definimos as coordenadas dos eixos onde a imagem girará em torno!
pra rotacionar a imagem em torno dela mesma, fizemos o seguinte:
vamos supor que a imagem esteja nas coordenadas x=0 e y=0 e suas dimensões são w=100 e h=100
sabemos que o centro da imagem é a coordenada x=50 e y=50, como é que calculamos isso ?
bem e só dividir w e h (width e Height = largura e altura) da imagem por 2!
e se posicionarmos a imagem na coordenada x=25 e y=50 o centro da imagem será =
(w/2)+25 e (h/2)+50, aaaaaaaaaaaaah! intendi, é por isso que somamos 300 no translate(x+300,y+300) no nosso exemplo acima! \(^_^)/ !!!
continuando..... quando mudamos o centro de rotação da imagem, a mesma é deslocada em função disso! por isso que ao definirmos o exito, depois mandar rotacionar, temos que voltar o que foi feito ao normal! então se eu deslocar (x+300) terei depois que deslocar -(x+300) okay ?!

O meu ficou assim:

Muito bem pessoal! até o próximo tutorial!