Ruby Básico :: Tutorial :: Parte 2

Olá galera, bem vindos a segunda parte do tutorial Ruby Básico !!!

Nessa parte vamos falar da instalação do Ruby no ambiente Windows. No mac não será  necessário, pois já vem instalado por padrão no sistema. E no Linux eu já ensinei como se instala e vocês podem conferir aqui nesse post.

Instalando o Ruby no Windows

Bom, como muita coisa nesse sistema operacional funciona com executáveis prontos, então basta-nos baixarmos o RubyInstaller da versão do Ruby que queremos instalar na nossa máquina.

Aqui eu escolhi a versão 1.9.2-p290, que é a qual estaremos trabalhando dentro do novo curso que lançaremos mais a frente no blog sobre Ruby On Rails. Mas se preferirem podem baixar a versão 1.9.3 que é a versão atual do Ruby.

Agora deixo-lhes aqui uma dica: para instalações de programas vamos começar a criar o hábito de nomearmos os nomes das pastas de destino sem espaços, pois pastas com espaços ou caracteres como acentuação podem causar vários problemas.

Pronto, com a instalação feita o que nos resta a fazer para que o Ruby funcione na nossa máquina é adicionarmos à variável de ambiente PATH do sistema o local onde acabamos de instalar o Ruby. Então vamos até o painel de controle do sistema, na opção de propriedades do sistema:

E logo em seguida no botão Variáveis de Ambiente...

E no bloco "Variáveis do sistema" procure a variável "Path" e então digite o seguinte no fim do campo de valor: ;C:\nome-da-pasta-que-voce-criou\bin 

Fique atento ao ponto-e-vírgula no início que é o que separa cada caminho contido na variável Path.

Após isso é só irmos ao prompt de comando (cmd) e digitarmos ruby -v. Se tudo der certo na tela aparecerá a versão do Ruby que você acabou de instalar no sistema.

Tudo pronto agora teremos que atualizar as gems.

Para fazer isso vamos ao console novamente (cmd) e então digitamos gem update --system

Isso irá atualizar o Rubygems. 

Uma alternativa ao RVM: Instalando o PIK.

Bom meus amigos, como nós queremos trabalhar futuramente com projetos em Ruby, e é por isso que estamos aqui aprendendo Ruby não é mesmo, às vezes sentimos a necessidade de instalarmos versões mais novas ou mais antigas do Ruby ou então do Rails ou de alguma gem, e para isso precisamos ter um controle de versões para essas instalações e aqui eu vos apresento o PIK, uma alternativa ao RVM, o qual funciona somente no Linux e Mac. 

O PIK, assim como o RVM, é uma ferramenta para controle de versões do ruby e outras gems. O Pik está disponível como gem, então para instalarmos basta o seguinte comando: gem install pik

No entanto, a instalação do PIK ainda não está completa, precisamos rodar o comando pik_install e indicarmos o local onde a instalação copiará os arquivos do PIK. Mas antes de fazermos isso, vamos novamente criar uma pasta para a instalação do PIK. Aqui eu criei no caminho C:\PIK. 

Após isso ainda temos que adicionar esse caminho para a variável de sistema PATH, aquela mesma que anteriormente adicionamos o Ruby. 

Vamos seguir o mesmo procedimento de antes de adicionarmos o PIK para o PATH com a seguinte linha:

;C:\PIK

Seguindo em frente, se vocês estiverem com o console (cmd) aberto, o fechem para e o abram novamente para que o console carregue as novas informações do Path. Logo em seguida instalamos o pik com o seguinte comando:

pik_install C:\PIK

Pronto, instalação do PIK feita com sucesso. Já é possível instalarmos quantas versões do Ruby ou até do Rails nós quisermos, mas com cuidado para não reescrevemos o Path e nem o diretório de instalação.

Na página do github do PIK possui uma referência completa dos comandos que ele possui.

Então pessoal, encerro por aqui essa parte e vejo vocês no próximo tutorial e não deixem de postar nos comentários quaisquer dúvidas ou questionamentos referentes ao assunto.

Até a próxima pessoal!!!

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

DOWNLOAD DOS EXEMPLOS AQUI

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 \_(^_^)_/

JAVA GAMES 2D::Colisão I::10

DOWNLOAD DOS EXEMPLOS AQUI

Olá pessoal!

No tutorial de hoje iremos ver uma maneira de como testar uma colisão simples entre dois objetos! existe várias formas de testar uma colisão como: verificar se o objeto tocou a extremidade do outro, verificar se eles estão se intersectando, ou se ambos tem a mesma coordenada X e , e após constatar a colisão iremos dizer como esses objetos irão se comportar durante a colisão!

Vamos ver uma maneira de verificar essas colisões com um único método! então vamos lá! crie um pacote chamado tutorial10 no nosso projeto JAVAGAMES2D, e cole no pacote o nosso template pra jogos Game.java!

Agora observe o código abaixo (leita atentamente os comentários no código):

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 objeto1Colediu = false;

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

 // --------------------------------------------------------------------
 // ESSE MÉTODO VAI MOVER O OBJETO ATÉ A COORDENADA X = 390
 // PARA QUE ELE TOQUE O OBJETO 2
 // MAS NÃO IMPORTA COMO ELE SE MOVA, UM MÉTODO VAI TRATAR DE
 // VERIFICAR SE OUVE COLISÃO OU NÃO!
 // --------------------------------------------------------------------
 public void moveObjeto1() {
  obj1X += 2;
  if (obj1X > 500) {
   obj1X = 0;
  }
 }

 // --------------------------------------------------------------------
 // SE O OBJETO COLEDIR APARECERÁ UM TEXTO INFORMANDO!!!
 // ESSE MÉTODO VAI SER CHAMANDO LÁ NO DENTRO DO MÉTODO desenharGraficos()
 // --------------------------------------------------------------------
 public void exibeTexto() {
  Graphics bbg = backBuffer.getGraphics();
  if (objeto1Colediu) {
   bbg.setColor(Color.RED);
   bbg.drawString("UIII fui tocado!!!", 200, 100);
  }
 }

 // --------------------------------------------------------------------
 // ESSE É O NOSSO MÉTODO QUE VAI TRATAR A COLISÃO
 // ESSE MÉTODO RECEBE COMO ARGUMENTO: X, Y, W, H do Obj1 e Obj2
 // NÃO SE PREOCUPE NOS VAMOS EXPLICAR ESSA LAVAGEM DE CÓDIGO!!!
 // --------------------------------------------------------------------
 public boolean colisao(int obj1X, int obj1Y, int obj1W, int obj1H,
   int obj2X, int obj2Y, int obj2W, int obj2H) {
  if ((obj1X >= obj2X && obj1X <= obj2X + obj2W)
    && (obj1Y >= obj2Y && obj1Y <= obj2Y + obj2H)) {
   return true;
  } else if ((obj1X + obj1W >= obj2X && obj1X + obj1W <= obj2X + obj2W)
    && (obj1Y >= obj2Y && obj1Y <= obj2Y + obj2H)) {
   return true;
  } else if ((obj1X >= obj2X && obj1X <= obj2X + obj2W)
    && (obj1Y + obj1H >= obj2Y && obj1Y + obj1H <= obj2Y + obj2H)) {
   return true;
  } else if ((obj1X + obj1W >= obj2X && obj1X + obj1W <= obj2X + obj2W)
    && (obj1Y + obj1H >= obj2Y && obj1Y + obj1H <= obj2Y + obj2H)) {
   return true;
  } else {
   return false;
  }
 }

 // --------------------------------------------------------------------
 public void atualizar() {
  objeto1Colediu = colisao(obj1X, obj1Y, obj1W, 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 10 Colisão simples!");
  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... Agora vamos entender o método colisão que é o que está menos comentado no nosso código acima....
Observe a seguinte imagem:

Muito bem... temos um quadrado, e nesse quadrado temos quatro pontos (marcado de vermelho), cada ponto possui uma coordenada X e Y, conhecendo apenas as coordenadas e dimensões do nosso quadrado é possível deduzir as coordenadas de cada um desses quatro pontos, como mostra o circulo laranja... "blz... entendi... o que devemos fazer agora...?"

agora vamos verificar se cada um desses pontos está invadindo a área de outro objeto (quadrado...)

Observe a imagem abaixo:

Para verificar se cada ponto do Objeto1 está dentro do Objeto2, temos que fazer algumas verificações como mostra o circulo laranja, Observe o nosso ponto P, as coordenadas X do nosso ponto P em relação ao Objeto2 tem que ser: X de P >= X do Objeto 2 e ao mesmo tempo o X de P <= X+largura do Objeto 2 ..... E ao mesmo tempo Y de P >= Y do Objeto 2 e ao mesmo tempo o Y de P <= Y+altura do Objeto 2.

Então essas condições tem que ser verificadas para cada um dos nossos pontos 1, 2, 3 e 4! Observe novamente o nosso método colisao()

public boolean colisao(int obj1X, int obj1Y, int obj1W, int obj1H,
   int obj2X, int obj2Y, int obj2W, int obj2H) {
  if ((obj1X >= obj2X && obj1X <= obj2X + obj2W)
    && (obj1Y >= obj2Y && obj1Y <= obj2Y + obj2H)) {
   return true;
  } else if ((obj1X + obj1W >= obj2X && obj1X + obj1W <= obj2X + obj2W)
    && (obj1Y >= obj2Y && obj1Y <= obj2Y + obj2H)) {
   return true;
  } else if ((obj1X >= obj2X && obj1X <= obj2X + obj2W)
    && (obj1Y + obj1H >= obj2Y && obj1Y + obj1H <= obj2Y + obj2H)) {
   return true;
  } else if ((obj1X + obj1W >= obj2X && obj1X + obj1W <= obj2X + obj2W)
    && (obj1Y + obj1H >= obj2Y && obj1Y + obj1H <= obj2Y + obj2H)) {
   return true;
  } else {
   return false;
  }
 }

Então perceba que se um dos nossos pontos invadir o outro objeto, o nosso método irá retornar TRUE

Observe também que o nosso método foi chamado dentro do método atualizar, então estará sendo verificado o tempo inteiro se está havendo colisão ou não, caso haja uma colisão o nosso método retorna TRUE caso não retorna FALSE. esse valor será retornado para uma variável, caso ela receba true, um texto será exibido na tela!!!

(Estudem o código atentamente!!!)

Observem como ficou o meu:

Até o nosso próximo tutorial!!!

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

JAVA GAMES 2D::Movimentando Objetos::09

DOWNLOAD DOS EXEMPLOS AQUI

Olá pessoal!

Nesse tutorial de hoje, irei mostrar como fazer para um objeto se mover sozinho nos nosso games! existe várias formas de se fazer isso, e dependendo do que se deseja o código pode vir a se tornar complexo, usarei como exemplo o código do tutorial anterior (Animando Sprites), então sugiro que faça o seguinte, criem um novo pacote chamado tutorial9 dentro do nosso projeto JAVAGAMES2D, cole nele tudo que está no pacote tutorial8 e vamos fazer umas pequenas modificações tal como a do código abaixo:

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;
 
 //EU REMOVI O VILÃO 2 QUE TINHA AQUI...
 //E MUDEI A IMAGEM DO FUNDO, MAS ISSO É UM MERO DETALHE!!!
 Sprite vilao = new Sprite(3, 200, 300);

 ImageIcon fundo = new ImageIcon("src/tutor9/fundo.jpg");
 boolean vai = true;  //ESSA VARIÁVEL PODERIA ESTAR NA CLASSE Sprite
 boolean volta = false; //ESSA VARIÁVEL PODERIA ESTAR NA CLASSE Sprite
 
 //TENTE ENTENDER O CÓDIGO ABAIXO:
 //ESSE MÉTODO SERÁ RESPONSÁVEL POR FAZER O OBJETO IR E VOLTAR
 //ESSE MÉTODO TAMBÉM PODERIA ESTAR NA CLASSE SPRITE!!!
 //DEPENDENDO DO QUE SE PRETENDER FAZER, ESSE MÉTODO PODERIA SER MAIS COMPLEXO!!
 public void mover(){
  if(vai){  vilao.x += 5;  }
  if(volta){  vilao.x -= 5;  }
  
  if(vilao.x>400){ vai = false; volta = true; }
  if(vilao.x<100){ vai = true; volta = false; }
 }
 
 //AGORA DEVEMOS CHAMAR ESSE MÉTODO AQUI
 //PARA QUE ELE SEJA EXECUTADO O TEMPO INTEIRO
 public void atualizar() {
  mover();//AQUI CHAMAMOS O MÉTODO MOVER!
 }

 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,500,500,this);//QUI DESENHAMOS O FUNDO
  //AS DIMENSÕES ORIGINAIS DO FUNDO SÃO: 500X500 QUE É O TAMANHO DA NOSSA TELA!
  
  
  bbg.drawImage(vilao.cenas[vilao.cena].getImage(), vilao.x, vilao.y,this);
  vilao.animar();
  
  
  //================================================================================== 
  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);

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

 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.... então basicamente criamos um método que modifica os valores das coordenadas X e Y da nossa Sprite! dependendo do que se pretende fazer o método poderia ficar mais complexo! você iria detalhar como ele iria se comportar! é um exemplo bem básico (ele vai e volta!!!)... mas já dá para  compreender como funciona + ou -, e começar a terem ideias (implementem também e compartilhem o link nos comentários)!!!

Olhe como ficou o meu:

Viu como é simples! Até o próximo tutorial!

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

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 \_(^_^)_/

Ruby Básico :: Tutorial :: Parte 1

Olá galera, tudo bem?

Acho que todo mundo já ouviu falar sobre linguagens de programação, como Java, C, C++, Pascal, Basic, entre outras, não é mesmo? Se por acaso nunca ouviu falar não tem problema. O importante é que está aqui para aprender a programar e ouviu falar em Ruby, ou então não (rsrs)... mas quer mesmo é aprender e começar nesse mundo dos algoritmos.

Se essa hipótese está correta, então está no lugar certo, e, emitindo uma opinião bem pessoal, escolheu a linguagem correta para estudar: Ruby !!! 

Ruby: o melhor amigo do programador

Caso vocês não saibam, Ruby é uma linguagem muito popular. Alguns a definem como uma linguagem repleta de arte e beleza, tal como elegância. Talvez prática e conveniente, produtiva e fácil de entender. 

Podemos concordar e dizer que sim. No entanto ninguém melhor do que o próprio criador da linguagem para definí-la, Yukihiro “matz” Matsumoto.

Eis então uma definição da linguagem Ruby dita pelo Matsumoto: 

"O Ruby é simples na aparência, mas muito complexo no interior, tal como o corpo humano"

Matsumoto uniu coisas das linguagens que ele mais gostava (Smalltalk, Perl, Eiffel, Ada, e Lisp) e as misturou para criar a linguagem Ruby, equilibrando programação funcional com programação imperativa.

Bom, com essa pequena descrição, quero chamar a atenção de vocês, caros leitores, para o que nós podemos interpretar de uma "linguagem de programação".

Segundo o wikipedia:

"Uma linguagem de programação é um método padronizado para comunicar instruções para um computador. É um conjunto de regras sintáticas e semânticas usadas para definir um programa de computador"

Tomando esta afirmação, então podemos resumir "linguagem de programação" como sendo linguagem do computador, linguagem que deve ser entendida pelo computador para que ele então possa executar as ações que são inseridas através da linguagem. A linguagem é então, primordialmente, projetada para acomodar as necessidades do computador. Nós, programadores que somos, estamos em condição de estrangeiros para o mundo do computador e sua(s) linguagem(s). Somos estrangeiros em busca de parceria "no mundo do computador" e tradutores dessa tal "linguagem de programação" para nosso mundo humano.

Pensemos então, como nosso cérebro age quando nós pensamos em linguagem? Linguagem são as palavras do idioma que usamos para nos expressar no mundo. O computador que conhecemos não pode fazer isso. Então a questão é: como pode o computador ter uma linguagem? A linguagem deve ser nossa, pois se nós a falamos nativamente, por que deveria ser diferente?

Podemos por fim quebrar no meio, triturar, jogar fora essa afirmação de que linguagem de programação é uma linguagem de computador e passar a chamá-la de linguagem do programador, uma linguagem de nossos pensamentos.

Por isso, a linguagem Ruby foi concebida para ser bem mais do que isso. Ruby é mais do que uma linguagem de computador, é uma linguagem feita para o programador.

Leia isso para si mesmo em voz alta:

Obs: traduza mentalmente na hora da leitura as palavras em inglês para o português.

  5.times { print "Olá pessoal!" }

 Nas sentenças em inglês, a pontuação, assim como exclamações, parenteses e períodos, são ignorados na hora da leitura. A pontuação dá sentido às palavras, dando pistas sobre o que o autor pretendia na sentença. A leitura então fica assim: Cinco vezes escreva "Olá pessoal!".


Leia isso para si mesmo em voz alta:

      exit unless "abcde".include? "bcd"

Esta sentença é uma checagem bem simples. Aqui o nosso programa sairá ao menos que a palavra "abcde" contenha, ou tenha incluso, a palavra "bcd". A leitura então fica assim: Saia ao menos que a palavra "abcde" inclua a palavra " bcd".


Muito simples não? Esses exemplos são código Ruby e por eles podemos ver como Matsumoto teve a preocupação de tornar a linguagem Ruby uma linguagem simples e fácil de ser lida, de forma tão natural como nossa própria linguagem do dia a dia.

Viram como Ruby preocupa-se com a verbosidade de suas sentenças? Repararam também de como a linguagem utiliza-se de símbolos naturais para tornar a leitura de código mais natural, mais rápida para nosso cérebro processar e entender, mais perto do que estamos acostumados a ler, mais natural, como disse Matsumoto.

No exemplo acima Ruby fez uso do símbolo de marcação de questão: ? . Agora faço a pergunta: você já viu alguma linguagem utilizar marcação de questão tão efetivamente ?

Vamos a mais um exemplo: 

Leia isso para si mesmo em voz alta:

           ['torta', 'queijo', 'vinho'].each { |comida| print comida.capitalize }

Apesar desse código agora ser menos legível e mais parecer com uma sentença, continuem lendo ou então releiam em voz alta.

Quero que reparem que em Ruby muitas vezes lê-se como leríamos naturalmente em inglês uma frase, entretanto, o Ruby também faz uso de uma leitura mais abreviada do inglês. Portanto, traduzindo do inglês esta sentença, a leitura fica assim: Com cada palavra 'torta', 'queijo', e 'vinho': pegue cada comida e escreva-a capitalizada.

Com isso acho que deu para vocês perceberem de como é interessante e extremamente elegante escrever código em Ruby. 

Agora sejam Bem Vindos ao nosso mundo Rubysta e vamos aos estudos!!!

Até a próxima parte deste tutorial pessoal. 

Vejo vocês lá!

JAVA GAMES 2D::Sons MIDI::07

DOWNLOAD DOS EXEMPLOS AQUI

Olá pessoal!
No tutorial de hoje iremos aprender como tocar arquivos de áudio do tipo MIDI (Musical Instrument Digital Interface)!!! É bem interessante usar esse tipo de arquivo de áudio, facilmente vocês irão encontrar por ai programas para compor melodias e salvar no formato .mid, sugiro que baixem ai algum teclado virtual que dê suporte a este recurso, ou pesquisem e baixe por aí sons já prontos! (são muito pequenos e rápido de baixar!!!), exite formas de tocar formatos diferentes de áudio como .mp3, .au, .wav, mas não será tema desse tutorial!

Então vamos lá!
Para tocar um arquivo de áudio .mid, a primeira coisas que iremos precisar é de um arquivo de áudio do tipo .mid!!!

Depois iremos precisar de um objeto do tipo Sequence para carregar dentro dele o arquivo que iremos tocar, e de um objeto do tipo Sequencer, ele é que irá tocar nossas sequences!
Nosso exercício de hoje será o seguinte: crie um pacote chamado tutoria7 dentro do nosso projeto JAVAGAMES2D, cole dentro do pacote o arquivo Game.java, do pacote tutorial3 que é o nosso template!
Agora nós vamos declarar nosso Sequencer (tocador) e Sequence (música), e em seguida iremos criar um método para tocar a trilha sonora de nossos games!
(Nota: ao declarar o Sequencer e Sequence lembre de importar! use o autoplete que será feito automático! Ctrl+Barra de espaço)
Abaixo segue o código:
(Lembrando que você pode baixar o exemplo clicando no link acima!)

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

import javax.sound.midi.MidiSystem;
import javax.sound.midi.Sequence;
import javax.sound.midi.Sequencer;
import javax.swing.ImageIcon;
import javax.swing.JFrame;

public class Game extends JFrame {

 BufferedImage backBuffer; 
 int FPS = 30;
 int janelaW = 500;
 int janelaH = 500;
 
 Sequencer player; //ESSE É O NOSSO TOCADOR
 String musica1 = "src/tutor7/batalha.mid"; //ISSO É SÓ A URL DA NOSSA MÚSICA
 String musica2 = "src/tutor7/campo.mid"; //ISSO AQUI TAMBÉM É OUTRA URL
 
 public void tocarMusica(String nome, int repetir){
  try{
   player = MidiSystem.getSequencer();  //INICIA O TOCADOR
   Sequence musica = MidiSystem.getSequence(new File(nome));//CARREGA A MÚSICA A SER TOCADA
   player.open(); //ABRE O TOCADOR
   player.setSequence(musica); //PASSA A MÚSICA QUE VAI SER TOCADA PARA O TOCADOR
   player.setLoopCount(repetir); //DEFINE QUANTAS VEZES VAI TOCAR A MÚSICA OBS: 0 = 1 vez; 1 = 2 vezes; 2 = 3 vezes...
   player.start(); //COMEÇA A TOCAR.... CASO QUEIRA PARAR DE TOCAR A MÚSICA BASTA: player.stop();
  }catch(Exception e){
   System.out.println("Erro ao tocar: "+nome);
  }
 }
 
 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

  //================================================================================== 
  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 QUE EU TO CHAMANDO O MÉTODO tocarMusica()================
  tocarMusica(musica1, 999); //CHAMAMOS O TOCADOR DENTRO DO MÉTODO inicializar()
  //ENTÃO AO INICAR O GAME, ESSA SERÁ A NOSSA MÚSICA DE FUNDO
  //===========================================================================
 }

 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.... vamos entender alguns pontos...  o método tocarMusica() que criamos vai receber 2 argumentos o nome da música e o número de vezes que ela se repetirá, só reforçando, se você passar 0 (zero) ele vai tocar 1 vez, se você passar 1(um) ele vai tocar 2... então ele vai tocar (n+1) vezes!!!!
Caso você queira tocar um som de um BIP ao clicar, basta chamar o método tocarMusica() dentro do evento de click (estudaremos sobre eventos mais adiante...), outro exemplo, caso você queira emitir um som de tiro em um jogo de nave, basta chamar o mesmo método quando for disparar o tipo, finalizando.... você pode usar o mesmo método para tocar qualquer parte da trilha sonora dos nossos games!!!

(executem aí para ouvir o som tocando!!!)

Então é isso ai pessoal! finalizamos mais um tutorial, testem esse exemplo ai, lembrando que está disponível para download no link acima!
Até o próximo!!

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