Pages

Banner

segunda-feira, 25 de junho de 2012

JAVA GAMES 2D::Menu::14

"
Olá pessoal!
Nesse tutorial iremos mostrar uma maneira de como construir um menu para os nossos games, além da classe Game.java que iremos criar no nosso pacote tutorial14 dentro do projeto JAVAGAMES2D iremos também criar um uma classe chamada Menu.java.  então é o seguinte, na classe Menu.java, iremos definir como os nossos menus irá se comportar, e iramos criar um menu dentro Game.java.


No exemplo de hoje teremos três cenários, e um menu que nos levará para cada cenário(Jogar, Opções e Ajuda) e um item no menu para sair do game!

Observe com atenção a nossa classe Menu.java (Leia os comentários com atenção!)


import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.awt.image.BufferedImage;

public class Menu {
 int cenario = -1;   //ESSA VARIAVEL INDICA EM QUE CENÁRIO ESTAMOS, -1(NENHUM CENÁRIO) (0,1,2,3...N) OUTROS CENÁRIOS
 int itemSelecionado = 0; //ESSA VARIAVEL SERVIRÁ PARA INDICAR QUAL ITEM QUE ESTÁ SELECIONADO (o atual é zero que é o primeiro item do menu)
 String itens[];    //aqui vamos guardar os itens do nosso menu (jogar, opções, sair...etc)
 Graphics bbg;    //como nos outros métodos da classe game.java usamos essa varialvel para desenhar elementos na tela
 boolean ativo;    //indica se o menu está ativo ou não (ao inicar o jogo desativamos o menu, para o controlemos durante o jogo)
 int x;      //coordenada x do menu
 int y;      //coordenada y do menu
 int tamanhoDaFonte = 20; //nem precisa explicar não é ?
 int distanciaEntreItens = 15;//distância entre cada item do menu!
 Font fonte = new Font("Arial", Font.BOLD, tamanhoDaFonte);//a fonte do nosso menu
 Color corSelecionado = new Color(255, 0, 0); // COR VERMELHA para o item selecionado
 Color corNaoSelecionado = new Color(0, 0, 0); // COR PRETA para o item que não está selecionado
 //isso é o construtor ao criarmos o objeto do tipo Menu, teremos que informar o número de itens as coordenadas e se ele estará ativo ou não!
 public Menu(int numeroDeItens, int x, int y, boolean ativo) {
  itens = new String[numeroDeItens];
  this.x = x;
  this.y = y;
  this.ativo = ativo;
 }
 //esse metodo só chamará o método controlaMenu se ele estiver ativo!
 public void controlar(KeyEvent e) {
  if (ativo) {
   controlarMenu(e);
  }
 }
 //esse método nos fará retornar ao menu ao pressinarmos "Esc"
 public void voltarAoMenu(KeyEvent e){
  //se tecla pressionada for igual a "Esc"
  if(e.getKeyCode() == e.VK_ESCAPE){
   cenario = -1;  //com isso sai dos cenários em que estivermos...
   ativo = true;  //e reativa o menu para que o possamos controlar novamente...
  }
 }
 //esse método controlará o nosso menu através do teclado
 //ele é chamando dentro do método controla()
 private void controlarMenu(KeyEvent e) {
  //se pressionar a tecla "cima" diminui 1 em itemSelecionado
  if (e.getKeyCode() == e.VK_UP) {
   itemSelecionado -= 1;
  }
  //se pressionar a tecla "baixo" aumenta 1 em itemSelecionado
  if (e.getKeyCode() == e.VK_DOWN) {
   itemSelecionado += 1;
  }
  //isso aqui é para controlar os limites extrmos do menu
  //caso eu esteja com 1º item selecionado e pressione para cima, ele vai para a ultima opção
  //caso eu esteja com o ultimo item selecionado e pressione para baixo, ele vai para primeira opção
  if (itemSelecionado >= itens.length) {
   itemSelecionado = 0;
  }
  if (itemSelecionado < 0) {
   itemSelecionado = itens.length - 1;
  }
  //se pressionar a tecla Enter ele muda o valor de cenario para o item que está selecionado
  //isso fará mudar de cenário e desativará o menu para que ele não seja mais controlado!
  if(e.getKeyCode() == e.VK_ENTER){
   cenario = itemSelecionado;
   ativo = false;
  }
 }
 //esse método irá desenhar o nosso menu na tela!
 //a um loop (for) que irá listar todos os itens que está guardado em itens[]
 //um calculo é feito para a coordenada y de cada intem do nosso menu, para que eles fiquem
 //um distante do outro, então caso y = 10, o item 0 será: 10+(0*(20+15)) = 10
 //para o item 1 será: 10+(1*(20+15)) = 45
 //para o item 2 será: 10+(2*(20+15)) = 80
 //para o item 3 será: 10+(3*(20+15)) = 115, e assim por diante...
 public void desenharMenu() {
  bbg.setFont(fonte);//seta a fonte que definimos bem acima na declaração de variáveis
  for (int i = 0; i < itens.length; i++) {// aqui é o inicio do nosso loop
   if(itemSelecionado == i){//se ele estiver selecionado muda a cor para vermelho e desenha o item na tela
    bbg.setColor(corSelecionado);
    bbg.drawString(itens[i], x, y+(i*(tamanhoDaFonte+distanciaEntreItens)));
   }else{//se não estiver selecionado muda a cor para preto e desenha o item na tela
    bbg.setColor(corNaoSelecionado);
    bbg.drawString(itens[i], x, y+(i*(tamanhoDaFonte+distanciaEntreItens)));
   }
  }
 }

}

Agora veja como criaremos o nosso menu dentro de Game.java, (leita os comentários com atenção!)


import java.awt.*;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.image.BufferedImage;
import java.io.File;

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

public class Game extends JFrame implements KeyListener{

 BufferedImage backBuffer; 
 int FPS = 30;
 int janelaW = 500;
 int janelaH = 500;
 //AQUI DECLARAMOS O NOSSO MENU COM:
 //4 itens, coordenadas x e y = 100, a ativo = true
 //agora olhe esse método abaixo cenarios()
 Menu menuPrincipal = new Menu(4, 100, 100, true);
 
 //esse método vai desenhar na tela alguns possíveis cenários do nosso game
 //lá em Menu.java cenario foi definido como -1
 //se cenario == 0 muda a cor do fundo e mostra um texto
 //se cenario == 1 muda a cor do fundo e mostra um texto
 //se cenario == n muda a cor do fundo e mostra um texto...
 
 //agora obser o nosso método desenharGraficos()
 public void cenarios(){
  Graphics bbg = backBuffer.getGraphics();
  bbg.setFont(new Font("Arial",Font.BOLD,20));
  if(menuPrincipal.cenario == 0){
   bbg.setColor(new Color(255,100,100));
   bbg.fillRect(0, 0, janelaW, janelaH);
   bbg.setColor(Color.BLACK);
   bbg.drawString("Você escolheu Jogar", 100, 200);
   //aqui você pode escolher o que irá aparecer caso o usuario escolha essa item do menu!
  }
  if(menuPrincipal.cenario == 1){
   bbg.setColor(new Color(100,255,100));
   bbg.fillRect(0, 0, janelaW, janelaH);
   bbg.setColor(Color.BLACK);
   bbg.drawString("Você escolheu Opções", 100, 200);
  }
  if(menuPrincipal.cenario == 2){
   bbg.setColor(new Color(100,100,255));
   bbg.fillRect(0, 0, janelaW, janelaH);
   bbg.setColor(Color.BLACK);
   bbg.drawString("Você escolheu Ajuda", 100, 200);
  }
  if(menuPrincipal.cenario == 3){
   System.exit(0);//esse comando fecha o nosso game!
  }
 }
 
 public void atualizar() {

 }

 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); //PINTA O FUNDO COM UM QUADRADO BRANCO
  
  menuPrincipal.desenharMenu();//isso desenhará nosso menu
  cenarios();//isso irá desenhar os cenários que escolhermos no menu
  //agora observe o método inicializar()
  
  //================================================================================== 
  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);
  
  //AQUI ESTAMOS ADICIONANDO UM ESCUTADOR DE TECLAS
  addKeyListener(this);
  
  //aqui definimos o texto de cada item do nosso menu
  menuPrincipal.itens[0] = "Jogar";
  menuPrincipal.itens[1] = "Opções";
  menuPrincipal.itens[2] = "Ajuda";
  menuPrincipal.itens[3] = "Sair";
  //aqui fazemos o método desenhaMenu() que fica lá em Menu.java
  //desenhar no nosso buffer
  //.. agora para finalizar observe o método de evento keyPressed() mais abaixo...
  menuPrincipal.bbg = backBuffer.getGraphics();
 }

 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();
 }

 public void keyPressed(KeyEvent e) {
  //aqui, chamamos os métodos que irá controlar o menu pelo teclado
  menuPrincipal.controlar(e);//esse controla o menu
  menuPrincipal.voltarAoMenu(e);//esse faz voltar para o menu quando pressionarmos "Esc"
 }
 
 public void keyReleased(KeyEvent e) {
  
 }
 public void keyTyped(KeyEvent e) {
  
 }
}

Super simples! não é?
Observem como ficou o meu:



Até o nosso próximo tutorial!
Abraços e não deixem de comentar...

"

Olá pessoal!
Nesse tutorial iremos mostrar uma maneira de como construir um menu para os nossos games, além da classe Game.java que iremos criar no nosso pacote tutorial14 dentro do projeto JAVAGAMES2D iremos também criar um uma classe chamada Menu.java.  então é o seguinte, na classe Menu.java, iremos definir como os nossos menus irá se comportar, e iramos criar um menu dentro Game.java.


No exemplo de hoje teremos três cenários, e um menu que nos levará para cada cenário(Jogar, Opções e Ajuda) e um item no menu para sair do game!

Observe com atenção a nossa classe Menu.java (Leia os comentários com atenção!)


import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.awt.image.BufferedImage;

public class Menu {
 int cenario = -1;   //ESSA VARIAVEL INDICA EM QUE CENÁRIO ESTAMOS, -1(NENHUM CENÁRIO) (0,1,2,3...N) OUTROS CENÁRIOS
 int itemSelecionado = 0; //ESSA VARIAVEL SERVIRÁ PARA INDICAR QUAL ITEM QUE ESTÁ SELECIONADO (o atual é zero que é o primeiro item do menu)
 String itens[];    //aqui vamos guardar os itens do nosso menu (jogar, opções, sair...etc)
 Graphics bbg;    //como nos outros métodos da classe game.java usamos essa varialvel para desenhar elementos na tela
 boolean ativo;    //indica se o menu está ativo ou não (ao inicar o jogo desativamos o menu, para o controlemos durante o jogo)
 int x;      //coordenada x do menu
 int y;      //coordenada y do menu
 int tamanhoDaFonte = 20; //nem precisa explicar não é ?
 int distanciaEntreItens = 15;//distância entre cada item do menu!
 Font fonte = new Font("Arial", Font.BOLD, tamanhoDaFonte);//a fonte do nosso menu
 Color corSelecionado = new Color(255, 0, 0); // COR VERMELHA para o item selecionado
 Color corNaoSelecionado = new Color(0, 0, 0); // COR PRETA para o item que não está selecionado
 //isso é o construtor ao criarmos o objeto do tipo Menu, teremos que informar o número de itens as coordenadas e se ele estará ativo ou não!
 public Menu(int numeroDeItens, int x, int y, boolean ativo) {
  itens = new String[numeroDeItens];
  this.x = x;
  this.y = y;
  this.ativo = ativo;
 }
 //esse metodo só chamará o método controlaMenu se ele estiver ativo!
 public void controlar(KeyEvent e) {
  if (ativo) {
   controlarMenu(e);
  }
 }
 //esse método nos fará retornar ao menu ao pressinarmos "Esc"
 public void voltarAoMenu(KeyEvent e){
  //se tecla pressionada for igual a "Esc"
  if(e.getKeyCode() == e.VK_ESCAPE){
   cenario = -1;  //com isso sai dos cenários em que estivermos...
   ativo = true;  //e reativa o menu para que o possamos controlar novamente...
  }
 }
 //esse método controlará o nosso menu através do teclado
 //ele é chamando dentro do método controla()
 private void controlarMenu(KeyEvent e) {
  //se pressionar a tecla "cima" diminui 1 em itemSelecionado
  if (e.getKeyCode() == e.VK_UP) {
   itemSelecionado -= 1;
  }
  //se pressionar a tecla "baixo" aumenta 1 em itemSelecionado
  if (e.getKeyCode() == e.VK_DOWN) {
   itemSelecionado += 1;
  }
  //isso aqui é para controlar os limites extrmos do menu
  //caso eu esteja com 1º item selecionado e pressione para cima, ele vai para a ultima opção
  //caso eu esteja com o ultimo item selecionado e pressione para baixo, ele vai para primeira opção
  if (itemSelecionado >= itens.length) {
   itemSelecionado = 0;
  }
  if (itemSelecionado < 0) {
   itemSelecionado = itens.length - 1;
  }
  //se pressionar a tecla Enter ele muda o valor de cenario para o item que está selecionado
  //isso fará mudar de cenário e desativará o menu para que ele não seja mais controlado!
  if(e.getKeyCode() == e.VK_ENTER){
   cenario = itemSelecionado;
   ativo = false;
  }
 }
 //esse método irá desenhar o nosso menu na tela!
 //a um loop (for) que irá listar todos os itens que está guardado em itens[]
 //um calculo é feito para a coordenada y de cada intem do nosso menu, para que eles fiquem
 //um distante do outro, então caso y = 10, o item 0 será: 10+(0*(20+15)) = 10
 //para o item 1 será: 10+(1*(20+15)) = 45
 //para o item 2 será: 10+(2*(20+15)) = 80
 //para o item 3 será: 10+(3*(20+15)) = 115, e assim por diante...
 public void desenharMenu() {
  bbg.setFont(fonte);//seta a fonte que definimos bem acima na declaração de variáveis
  for (int i = 0; i < itens.length; i++) {// aqui é o inicio do nosso loop
   if(itemSelecionado == i){//se ele estiver selecionado muda a cor para vermelho e desenha o item na tela
    bbg.setColor(corSelecionado);
    bbg.drawString(itens[i], x, y+(i*(tamanhoDaFonte+distanciaEntreItens)));
   }else{//se não estiver selecionado muda a cor para preto e desenha o item na tela
    bbg.setColor(corNaoSelecionado);
    bbg.drawString(itens[i], x, y+(i*(tamanhoDaFonte+distanciaEntreItens)));
   }
  }
 }

}

Agora veja como criaremos o nosso menu dentro de Game.java, (leita os comentários com atenção!)


import java.awt.*;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.image.BufferedImage;
import java.io.File;

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

public class Game extends JFrame implements KeyListener{

 BufferedImage backBuffer; 
 int FPS = 30;
 int janelaW = 500;
 int janelaH = 500;
 //AQUI DECLARAMOS O NOSSO MENU COM:
 //4 itens, coordenadas x e y = 100, a ativo = true
 //agora olhe esse método abaixo cenarios()
 Menu menuPrincipal = new Menu(4, 100, 100, true);
 
 //esse método vai desenhar na tela alguns possíveis cenários do nosso game
 //lá em Menu.java cenario foi definido como -1
 //se cenario == 0 muda a cor do fundo e mostra um texto
 //se cenario == 1 muda a cor do fundo e mostra um texto
 //se cenario == n muda a cor do fundo e mostra um texto...
 
 //agora obser o nosso método desenharGraficos()
 public void cenarios(){
  Graphics bbg = backBuffer.getGraphics();
  bbg.setFont(new Font("Arial",Font.BOLD,20));
  if(menuPrincipal.cenario == 0){
   bbg.setColor(new Color(255,100,100));
   bbg.fillRect(0, 0, janelaW, janelaH);
   bbg.setColor(Color.BLACK);
   bbg.drawString("Você escolheu Jogar", 100, 200);
   //aqui você pode escolher o que irá aparecer caso o usuario escolha essa item do menu!
  }
  if(menuPrincipal.cenario == 1){
   bbg.setColor(new Color(100,255,100));
   bbg.fillRect(0, 0, janelaW, janelaH);
   bbg.setColor(Color.BLACK);
   bbg.drawString("Você escolheu Opções", 100, 200);
  }
  if(menuPrincipal.cenario == 2){
   bbg.setColor(new Color(100,100,255));
   bbg.fillRect(0, 0, janelaW, janelaH);
   bbg.setColor(Color.BLACK);
   bbg.drawString("Você escolheu Ajuda", 100, 200);
  }
  if(menuPrincipal.cenario == 3){
   System.exit(0);//esse comando fecha o nosso game!
  }
 }
 
 public void atualizar() {

 }

 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); //PINTA O FUNDO COM UM QUADRADO BRANCO
  
  menuPrincipal.desenharMenu();//isso desenhará nosso menu
  cenarios();//isso irá desenhar os cenários que escolhermos no menu
  //agora observe o método inicializar()
  
  //================================================================================== 
  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);
  
  //AQUI ESTAMOS ADICIONANDO UM ESCUTADOR DE TECLAS
  addKeyListener(this);
  
  //aqui definimos o texto de cada item do nosso menu
  menuPrincipal.itens[0] = "Jogar";
  menuPrincipal.itens[1] = "Opções";
  menuPrincipal.itens[2] = "Ajuda";
  menuPrincipal.itens[3] = "Sair";
  //aqui fazemos o método desenhaMenu() que fica lá em Menu.java
  //desenhar no nosso buffer
  //.. agora para finalizar observe o método de evento keyPressed() mais abaixo...
  menuPrincipal.bbg = backBuffer.getGraphics();
 }

 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();
 }

 public void keyPressed(KeyEvent e) {
  //aqui, chamamos os métodos que irá controlar o menu pelo teclado
  menuPrincipal.controlar(e);//esse controla o menu
  menuPrincipal.voltarAoMenu(e);//esse faz voltar para o menu quando pressionarmos "Esc"
 }
 
 public void keyReleased(KeyEvent e) {
  
 }
 public void keyTyped(KeyEvent e) {
  
 }
}

Super simples! não é?
Observem como ficou o meu:



Até o nosso próximo tutorial!
Abraços e não deixem de comentar...

Comentários
3 Comentários

3 comentários:

Anônimo disse... Best Blogger Tips

Excelente, você esta de parabéns. São os melhores tutoriais que já vi na net (escritos de forma simples, clara e inteligente). Fico no aguardo de mais material.

Anônimo disse... Best Blogger Tips

Sinto falta dos outros...
Onde posso encontrar as versões do Snake (prometidas num post)?
davam-me mt jeito...
Obrigado e continue o excelente trabaljh!

Guilherme Feitoza disse... Best Blogger Tips

https://github.com/guilhermefeitosa66/snake

Postar um comentário