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)
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() )
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!
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)
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() )
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;
ImageIcon abelha = new ImageIcon("src/tutor6/bee.png");
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!
//DESENHANDO A ABELHA NAS COORDENADAS X=200 e Y=200
bbg.drawImage(abelha.getImage(),200,200,this); //aqui fica com as dimensões originais!
//AQUI DEFINI A LARGURA E ALTURA DA IMAGEM
bbg.drawImage(abelha.getImage(),100,100,40,40,this); //aqui não fica com as dimensões originais!
//AQUI VAMOS ROTACIONAR A IMAGEM EM 45º
//PARA ISSO VAMOS USAR OUTRA VARIAVEL DO TIPO Graphics2D
//SE NÃO usarmos outra variável tudo que tá no buffer será rotacionado também!
Graphics2D bbg2d = (Graphics2D) backBuffer.getGraphics();//AQIU É NOSSA OUTRA VÁRIAVEL!
//para rotacionar primeiro define o eixo (isso desloca a imagem, então depois temos que desfazer)
//vou por o exito no meio, então é só dividir a altura e largura da imagem por 2
bbg2d.translate((abelha.getIconWidth()/2)+300, (abelha.getIconHeight()/2)+300); //tem que desfazer isso depois que a imagem será deslocada!
bbg2d.rotate(45*(Math.PI/180)); //vamos calcular 45º
bbg2d.translate(-((abelha.getIconWidth()/2)+300), -((abelha.getIconHeight()/2)+300));// agora desfaz o négocio do exito!!!
//veja que eu passei os mesmos valores só que negativos, ovserve o sinal de "-" menos
bbg2d.drawImage(abelha.getImage(),300,300,this); //desenha a imagem
//==================================================================================
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);
}
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();
}
}
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!
\_(^_^)_/ Comentários em baixo \_(^_^)_/
"
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)
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() )
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;
ImageIcon abelha = new ImageIcon("src/tutor6/bee.png");
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!
//DESENHANDO A ABELHA NAS COORDENADAS X=200 e Y=200
bbg.drawImage(abelha.getImage(),200,200,this); //aqui fica com as dimensões originais!
//AQUI DEFINI A LARGURA E ALTURA DA IMAGEM
bbg.drawImage(abelha.getImage(),100,100,40,40,this); //aqui não fica com as dimensões originais!
//AQUI VAMOS ROTACIONAR A IMAGEM EM 45º
//PARA ISSO VAMOS USAR OUTRA VARIAVEL DO TIPO Graphics2D
//SE NÃO usarmos outra variável tudo que tá no buffer será rotacionado também!
Graphics2D bbg2d = (Graphics2D) backBuffer.getGraphics();//AQIU É NOSSA OUTRA VÁRIAVEL!
//para rotacionar primeiro define o eixo (isso desloca a imagem, então depois temos que desfazer)
//vou por o exito no meio, então é só dividir a altura e largura da imagem por 2
bbg2d.translate((abelha.getIconWidth()/2)+300, (abelha.getIconHeight()/2)+300); //tem que desfazer isso depois que a imagem será deslocada!
bbg2d.rotate(45*(Math.PI/180)); //vamos calcular 45º
bbg2d.translate(-((abelha.getIconWidth()/2)+300), -((abelha.getIconHeight()/2)+300));// agora desfaz o négocio do exito!!!
//veja que eu passei os mesmos valores só que negativos, ovserve o sinal de "-" menos
bbg2d.drawImage(abelha.getImage(),300,300,this); //desenha a imagem
//==================================================================================
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);
}
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();
}
}
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!
\_(^_^)_/ Comentários em baixo \_(^_^)_/
1 Comentários
