Pages

Banner

quinta-feira, 14 de junho de 2012

JAVA GAMES 2D::Colisão II::11

"
Olá pessoal!
No tutorial anterior vimos uma maneira de como verificar uma colisão simples. Nesse tutorial de hoje veremos uma outra forma de verificar se um objeto colidiu com outro, no método anterior não era apenas informado de que houve uma colisão, mas não era informado de qual lado do objeto que estava sendo colidido! Então sabendo qual lado do objeto está sendo tocado, é possível mandar o nosso objeto se comportar de uma maneira dependendo de onde ele foi tocado. Imagine um jogo de Corrida de Carros, caso o carro bata a sua lateral numa parede na pista, ele deve ser empurrado na direção oposta!

Muito bem.... então vamos ao que interessa: como é essa tal técnica? (ah lembrando que: o que tá sendo postado aqui, não são técnicas oficiais padrão! é a forma como eu faço e acho mais simples e funciona! pode ser feito diversas maneiras diferente! essa é epenas uma mera sugestão!)

A técnica é a seguinte: como no tutorial anterior nos iremos traçar os pontos(pontos imaginários... tá lá mais não tá!!!) de colisão no nosso objeto, ah! você pode traçar quantos pontos de colisão você quiser! dependendo do que se pretende fazer! ao ao colidir com com determinado ponto nosso objeto pode se comportar de uma maneira diferente!
Observe a imagem abaixo (ah! essas imagens são produzidas no Inkscape! sugiro estuda-las para usar na confecção do design dos seus games!)



Agora observe como o nosso código de colisão é simples, ele irá tratar de verificar a colisão de um único ponto!


public boolean colisao(int pontoX, int pontoY, int x, int y, int w, int h) {
  if ((pontoX >= x && pontoX <= x + w) && (pontoY >= y && pontoY <= y + h)) {
   return true;
  } else {
   return false;
  }
 }

Esse método trada de verificar a colisão de um único ponto!, etão você pode traçar quantos pontos imaginários quiser e verificar se o mesmo está colidindo em algum objeto!
colisao(x, y, x2, y2, w, h);

Abaixo segue o nosso exemplo do tutorial de hoje:


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;
 // --------------------------------------------------------------------
 // OBSERVEM ESSAS VÁRIÁVEIS (ISSO PODERIA SER ATRIBUTOS DE UMA CLASSE!)
 // --------------------------------------------------------------------
 int obj1X = 0; // COORDENADA X
 int obj1Y = 225; // COORDENADA Y
 int obj1W = 50; // LARGURA = Width
 int obj1H = 50; // ALTURA = Height
 
 boolean colidiuEsquerda = false;
 boolean colidiuDireita = false;
 boolean colidiuCima = false;
 boolean colidiuBaixo = false;

 int obj2X = 400;
 int obj2Y = 200;
 int obj2W = 50;
 int obj2H = 50;

 // --------------------------------------------------------------------
 // ESSE MÉTODO VAI MOVER O OBJETO ATÉ A COORDENADA X = 500
 // PARA QUE ELE TOQUE O OBJETO 2
 // E A CADA VEZ QUE ELE CHEGAR NO FINAL DA TELA, VOLTA PRA O COMEÇO
 // EM COM UMA NOVA COORDENADA Y ALEATÓRIA!!!
 // --------------------------------------------------------------------
 public void moveObjeto1() {
  obj1X += 5;
  if (obj1X > 500) {
   obj1X = 0;
   obj1Y = (int)(Math.random()*100)+150;
  }
 }
 // --------------------------------------------------------------------
 // SE O OBJETO COLEDIR EM UM DOS PONTOS, EXIBIRÁ UM TEXTO DIZENDO QUAL FOI TOCADO
 // ESSE MÉTODO VAI SER CHAMANDO LÁ NO DENTRO DO MÉTODO desenharGraficos()
 // --------------------------------------------------------------------
 public void exibeTexto() {
  Graphics bbg = backBuffer.getGraphics();
  bbg.setColor(Color.RED);
  if (colidiuEsquerda) {
   bbg.drawString("COLISÃO: ESQUERDA!!!", 200, 110);
  }
  if (colidiuDireita) {
   bbg.drawString("COLISÃO: DIREITA!!!", 200, 120);
  }
  if (colidiuCima) {
   bbg.drawString("COLISÃO: CIMA!!!", 200, 130);
  }
  if (colidiuBaixo) {
   bbg.drawString("COLISÃO: BAIXO!!!", 200, 140);
  }
 }

 // --------------------------------------------------------------------
 // ESSE É O NOSSO MÉTODO QUE VAI TRATAR A COLISÃO DE APENAS UM PONTO
 // ESSE MÉTODO RECEBE COMO ARGUMENTO: X, Y DO PONTO E
 //X,Y,W,H DO OBJETO ONDE VAI COLIDIR!
 // --------------------------------------------------------------------
 public boolean colisao(int pontoX, int pontoY, int x, int y, int w, int h) {
  if ((pontoX >= x && pontoX <= x + w) && (pontoY >= y && pontoY <= y + h)) {
   return true;
  } else {
   return false;
  }
 }
 // --------------------------------------------------------------------
 public void atualizar() {
  //AQUI VAMOS VERIFICAR SE CADA PONTO ESTÁ SENDO TOCADO NO OBJETO 2
  colidiuEsquerda = colisao(obj1X, obj1Y+obj1H/2, obj2X, obj2Y, obj2W, obj2H);
  colidiuDireita = colisao(obj1X+obj1W, obj1Y+obj1H/2, obj2X, obj2Y, obj2W, obj2H);
  colidiuCima = colisao(obj1X+obj1W/2, obj1Y, obj2X, obj2Y, obj2W, obj2H);
  colidiuBaixo = colisao(obj1X+obj1W/2, obj1Y+obj1H, obj2X, obj2Y, obj2W, obj2H);
  moveObjeto1();
 }

 public void desenharGraficos() {
  Graphics g = getGraphics(); // ISSO JÁ ESTAVA AQUI
  Graphics bbg = backBuffer.getGraphics();// ISSO TAMBÉM JÁ ESTAVA AQUI...
  // ==================================================================================
  bbg.setColor(Color.WHITE);
  bbg.fillRect(0, 0, janelaW, janelaH);// DESENHA UM FUNDO BRANCO NA TELA!

  // EXIBE UM TEXTO CASO O OBJETO COLIDA!
  exibeTexto();

  // DESENHA O OBJETO 2
  bbg.setColor(Color.BLUE);
  bbg.fillRect(obj2X, obj2Y, obj2W, obj2H);

  // DESENHA O OBJETO 1 //com transparência
  // new Color(red,green, blue, alpha) o alpha é o valor da trasnparência
  // vai de 0 à 255
  bbg.setColor(new Color(0, 255, 0, 200));
  bbg.fillRect(obj1X, obj1Y, obj1W, obj1H);

  // ==================================================================================
  g.drawImage(backBuffer, 0, 0, this);// OBS: ISSO DEVE FICAR SEMPRE NO
           // FINAL!
 }

 public void inicializar() {
  setTitle("Tutorial 11 Colisão!");
  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();
 }
}

(leiam atentamente os comentários do código!)
Muito simples não é pessoal ?
Vejam como ficou o meu:




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

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

Olá pessoal!
No tutorial anterior vimos uma maneira de como verificar uma colisão simples. Nesse tutorial de hoje veremos uma outra forma de verificar se um objeto colidiu com outro, no método anterior não era apenas informado de que houve uma colisão, mas não era informado de qual lado do objeto que estava sendo colidido! Então sabendo qual lado do objeto está sendo tocado, é possível mandar o nosso objeto se comportar de uma maneira dependendo de onde ele foi tocado. Imagine um jogo de Corrida de Carros, caso o carro bata a sua lateral numa parede na pista, ele deve ser empurrado na direção oposta!

Muito bem.... então vamos ao que interessa: como é essa tal técnica? (ah lembrando que: o que tá sendo postado aqui, não são técnicas oficiais padrão! é a forma como eu faço e acho mais simples e funciona! pode ser feito diversas maneiras diferente! essa é epenas uma mera sugestão!)

A técnica é a seguinte: como no tutorial anterior nos iremos traçar os pontos(pontos imaginários... tá lá mais não tá!!!) de colisão no nosso objeto, ah! você pode traçar quantos pontos de colisão você quiser! dependendo do que se pretende fazer! ao ao colidir com com determinado ponto nosso objeto pode se comportar de uma maneira diferente!
Observe a imagem abaixo (ah! essas imagens são produzidas no Inkscape! sugiro estuda-las para usar na confecção do design dos seus games!)



Agora observe como o nosso código de colisão é simples, ele irá tratar de verificar a colisão de um único ponto!


public boolean colisao(int pontoX, int pontoY, int x, int y, int w, int h) {
  if ((pontoX >= x && pontoX <= x + w) && (pontoY >= y && pontoY <= y + h)) {
   return true;
  } else {
   return false;
  }
 }

Esse método trada de verificar a colisão de um único ponto!, etão você pode traçar quantos pontos imaginários quiser e verificar se o mesmo está colidindo em algum objeto!
colisao(x, y, x2, y2, w, h);

Abaixo segue o nosso exemplo do tutorial de hoje:


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;
 // --------------------------------------------------------------------
 // OBSERVEM ESSAS VÁRIÁVEIS (ISSO PODERIA SER ATRIBUTOS DE UMA CLASSE!)
 // --------------------------------------------------------------------
 int obj1X = 0; // COORDENADA X
 int obj1Y = 225; // COORDENADA Y
 int obj1W = 50; // LARGURA = Width
 int obj1H = 50; // ALTURA = Height
 
 boolean colidiuEsquerda = false;
 boolean colidiuDireita = false;
 boolean colidiuCima = false;
 boolean colidiuBaixo = false;

 int obj2X = 400;
 int obj2Y = 200;
 int obj2W = 50;
 int obj2H = 50;

 // --------------------------------------------------------------------
 // ESSE MÉTODO VAI MOVER O OBJETO ATÉ A COORDENADA X = 500
 // PARA QUE ELE TOQUE O OBJETO 2
 // E A CADA VEZ QUE ELE CHEGAR NO FINAL DA TELA, VOLTA PRA O COMEÇO
 // EM COM UMA NOVA COORDENADA Y ALEATÓRIA!!!
 // --------------------------------------------------------------------
 public void moveObjeto1() {
  obj1X += 5;
  if (obj1X > 500) {
   obj1X = 0;
   obj1Y = (int)(Math.random()*100)+150;
  }
 }
 // --------------------------------------------------------------------
 // SE O OBJETO COLEDIR EM UM DOS PONTOS, EXIBIRÁ UM TEXTO DIZENDO QUAL FOI TOCADO
 // ESSE MÉTODO VAI SER CHAMANDO LÁ NO DENTRO DO MÉTODO desenharGraficos()
 // --------------------------------------------------------------------
 public void exibeTexto() {
  Graphics bbg = backBuffer.getGraphics();
  bbg.setColor(Color.RED);
  if (colidiuEsquerda) {
   bbg.drawString("COLISÃO: ESQUERDA!!!", 200, 110);
  }
  if (colidiuDireita) {
   bbg.drawString("COLISÃO: DIREITA!!!", 200, 120);
  }
  if (colidiuCima) {
   bbg.drawString("COLISÃO: CIMA!!!", 200, 130);
  }
  if (colidiuBaixo) {
   bbg.drawString("COLISÃO: BAIXO!!!", 200, 140);
  }
 }

 // --------------------------------------------------------------------
 // ESSE É O NOSSO MÉTODO QUE VAI TRATAR A COLISÃO DE APENAS UM PONTO
 // ESSE MÉTODO RECEBE COMO ARGUMENTO: X, Y DO PONTO E
 //X,Y,W,H DO OBJETO ONDE VAI COLIDIR!
 // --------------------------------------------------------------------
 public boolean colisao(int pontoX, int pontoY, int x, int y, int w, int h) {
  if ((pontoX >= x && pontoX <= x + w) && (pontoY >= y && pontoY <= y + h)) {
   return true;
  } else {
   return false;
  }
 }
 // --------------------------------------------------------------------
 public void atualizar() {
  //AQUI VAMOS VERIFICAR SE CADA PONTO ESTÁ SENDO TOCADO NO OBJETO 2
  colidiuEsquerda = colisao(obj1X, obj1Y+obj1H/2, obj2X, obj2Y, obj2W, obj2H);
  colidiuDireita = colisao(obj1X+obj1W, obj1Y+obj1H/2, obj2X, obj2Y, obj2W, obj2H);
  colidiuCima = colisao(obj1X+obj1W/2, obj1Y, obj2X, obj2Y, obj2W, obj2H);
  colidiuBaixo = colisao(obj1X+obj1W/2, obj1Y+obj1H, obj2X, obj2Y, obj2W, obj2H);
  moveObjeto1();
 }

 public void desenharGraficos() {
  Graphics g = getGraphics(); // ISSO JÁ ESTAVA AQUI
  Graphics bbg = backBuffer.getGraphics();// ISSO TAMBÉM JÁ ESTAVA AQUI...
  // ==================================================================================
  bbg.setColor(Color.WHITE);
  bbg.fillRect(0, 0, janelaW, janelaH);// DESENHA UM FUNDO BRANCO NA TELA!

  // EXIBE UM TEXTO CASO O OBJETO COLIDA!
  exibeTexto();

  // DESENHA O OBJETO 2
  bbg.setColor(Color.BLUE);
  bbg.fillRect(obj2X, obj2Y, obj2W, obj2H);

  // DESENHA O OBJETO 1 //com transparência
  // new Color(red,green, blue, alpha) o alpha é o valor da trasnparência
  // vai de 0 à 255
  bbg.setColor(new Color(0, 255, 0, 200));
  bbg.fillRect(obj1X, obj1Y, obj1W, obj1H);

  // ==================================================================================
  g.drawImage(backBuffer, 0, 0, this);// OBS: ISSO DEVE FICAR SEMPRE NO
           // FINAL!
 }

 public void inicializar() {
  setTitle("Tutorial 11 Colisão!");
  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();
 }
}

(leiam atentamente os comentários do código!)
Muito simples não é pessoal ?
Vejam como ficou o meu:




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

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

2 comentários:

Anônimo disse... Best Blogger Tips

muito bom cara

Anônimo disse... Best Blogger Tips

MuIto bom, Os seu tutorias ajudam e muito...!

Postar um comentário