viernes, 17 de abril de 2009

Pong

Muy bien! Suficiente teoria, es hora de hacer algo, como primer juego, me gusta hacer un Pong, me parece el mas simple de todos, y engloba bien hit test, input y animacion, que es lo que vimos hasta ahora.
Creamos un nuevo proyecto, yo lo llame Pong, y el package "pong".
Veamos la clas Main, la "principal" del proyecto, esta solo tendra la ventana y creara un nuevo Board.

package pong;

import javax.swing.JFrame;

/**
*
* @author fede
*/
public class Main extends JFrame {
public Main(){
add(new Board());
setTitle("Basic JPong");
setDefaultCloseOperation(EXIT_ON_CLOSE);
setSize(300,280);
setLocationRelativeTo(null);
setVisible(true);
setResizable(false);
}

public static void main(String[] args){
new Main();
}
}


Como veran es bastante parecido a lo que veniamos haciendo, solo cambie el tamaño y el titulo.
Veamos ahora la clase Player, esa clase es la encargada de las "barritas" que seran los jugadores, en este caso usaremos dos, para hacerlo de dos jugadores, aunque podrias hacer otra clase para el jugador dos, que sea inteligencia artificial y juege solo, asi seria de un jugador. En este ejemplo lo haremos de dos jugadores.
Primero, las librerias que importamos, ellas son

import javax.swing.ImageIcon;
import java.awt.Image;
import java.awt.Rectangle;

// Para tener las constantes de las teclas y el tipo KeyEvent, despues se manda por argumento bien
import java.awt.event.KeyEvent;


Ahora hacemos las variables que usaremos (esto yo lo hize antes, por eso se todas las variables que usare, por lo general esto lo modifico mucho, al igual que los 'imports')

private Image image;
private int x,y,dy,upKey,downKey,width,height,score;

private final int SPEED = 4;


En el constructor iniciamos los valores necesarios, y luego es mayormente get's y set's. Aca les dejo la clase Player

package pong;

import javax.swing.ImageIcon;
import java.awt.Image;
import java.awt.Rectangle;

import java.awt.event.KeyEvent;

/**
*
* @author fede
*/
public class Player {
private Image image;
private int x,y,dy,upKey,downKey,width,height,score;

private final int SPEED = 4;

public Player(int x, int y, String img, int upKey, int downKey){
ImageIcon ii = new ImageIcon(this.getClass().getResource(img));
image = ii.getImage();
this.x = x; // Es irrelevante para getear, solo se mueve arriba y abajo la barra
this.y = y;
dy = 0;
this.upKey = upKey;
this.downKey = downKey;
width = image.getWidth(null);
height = image.getHeight(null);
score = 0;
}

public Rectangle getBounds(){
return new Rectangle(x,y,width,height);
}

public Image getImage(){
return image;
}

public int getY(){
return y;
}

public int getX(){
return x;
}

public int getScore(){
return score;
}

public void setScore(int score){
this.score = score;
}

public void move(){
if((y > 0 && dy <> 0))
y += dy;
}

public void keyPressed(KeyEvent e){
int key = e.getKeyCode();

if(key == upKey)
dy = SPEED * -1;
else if(key == downKey)
dy = SPEED;
}

public void keyReleased(KeyEvent e){
dy = 0;
}
}


La funcion keyPressed se llamara cuando en board se presione alguna tecla, y mandamos la tecla por argumento, asi podemos evaluar bien que hacer con ella en nuestra clase, lo imsmo para keyReleased. La funcion move se llama en el update (en este caso, cada 5ms) y en ella actualizamos la posicion del sprite.
Ahora Ball.java. Esta clase es bastante parecida a la anterior por lo que no explicare mucho.

package pong;

import java.awt.Image;
import java.awt.Rectangle;

import javax.swing.ImageIcon;


/**
*
* @author fede
*/
public class Ball {
private Image image;
private int x,y,dx,dy,width,height;
private final int SPEED = 2;
public Ball(){
ImageIcon ii = new ImageIcon(this.getClass().getResource("ball.png"));
image = ii.getImage();
x = y = 30;
dy = dx = SPEED;
width = image.getWidth(null);
height = image.getHeight(null);
}

public Rectangle getBounds(){
return new Rectangle(x,y,width,height);
}

public Image getImage(){
return image;
}

public int getX(){
return x;
}

public int getY(){
return y;
}

public int getDy(){
return dy;
}

public int getDx(){
return dx;
}

public void setDx(int dx){
this.dx = dx;
}

public void setDy(int dy){
this.dy = dy;
}

public void setPosition(int x, int y, boolean invert){
this.x = x;
this.y = y;
if(invert){
dy*=-1;
dx*=-1;
}
}

public void move(){
y+=dy;
x+=dx;
}
}


Como veran solo importamos lo necesario para usar la imagen y rectangles. La mayoria de las funciones son get's y set's, setPosition se usa para resetear facimente la posicion de la pelota, move actualiza la posicion, igual que en Player, el resto es solo iniciar variables en el constructor.
Finalmente veremos la clase Board. Es muy importante que hallan seguido el blog hasta ahora ya que utiliza todo lo que vimos hasta ahora.

package pong;

import javax.swing.JPanel;

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Color;
import java.awt.Rectangle; // Para collision detection

// Timer
import java.awt.Toolkit;
import javax.swing.Timer;

// Para leer las teclas
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener; // interface con un metodo, actionPerformed
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;

// Para escribir
import java.awt.Font;
import java.awt.FontMetrics;

/**
*
* @author fede
*/
public class Board extends JPanel implements ActionListener {
private Player player1, player2;
private Timer timer;
private Ball ball;
private Font small;
private String msg;

private static final int MAX_SCORE = 10;

public Board(){
setDoubleBuffered(true);
setBackground(Color.white);
setFocusable(true);
addKeyListener(new TAdapter());

player1 = new Player(3,100,"bar.png", KeyEvent.VK_UP, KeyEvent.VK_DOWN);
player2 = new Player(285,100, "bar.png", KeyEvent.VK_W, KeyEvent.VK_S);
ball = new Ball();

// font
small = new Font("Verdana", Font.PLAIN, 12);
FontMetrics mtr = this.getFontMetrics(small);

// Timer
timer = new Timer(5, this);
timer.start();
}

public void paint(Graphics g){
super.paint(g);

Graphics2D g2d = (Graphics2D)g;

// Paint
g2d.drawImage(player1.getImage(), player1.getX(), player1.getY(), this);
g2d.drawImage(player2.getImage(), player2.getX(), player2.getY(), this);
g2d.drawImage(ball.getImage(), ball.getX(), ball.getY(), this);

// Write
g2d.setColor(Color.black);
g2d.setFont(small);
if(isGameOver()==0)
msg = "P1: "+player1.getScore()+" - P2: "+player2.getScore();
g2d.drawString(msg, 10, 13);

// Timer
Toolkit.getDefaultToolkit().sync();

g.dispose();
}

public void actionPerformed(ActionEvent e){ // Esto updatea el timer
// Logic
player1.move();
player2.move();
ball.move();

// Collision Detection
Rectangle br = ball.getBounds();
Rectangle p1r = player1.getBounds();
Rectangle p2r = player2.getBounds();

if(ball.getX() <>290 || br.intersects(p1r) || br.intersects(p2r))
ball.setDx(ball.getDx()*-1);
if(ball.getY() <>250)
ball.setDy(ball.getDy()*-1);

// Aver score
if(ball.getX() <= 0){
player2.setScore(player2.getScore()+1);
ball.setPosition(150,100, true);
}
if(ball.getX() >= 285){
player1.setScore(player1.getScore()+1);
ball.setPosition(150,100, true);
}
if(isGameOver()>0){
msg = "Player " + isGameOver() + " wins - Press any key to play again";
ball.setDx(0);
ball.setDy(0);
}

repaint();
}

private int isGameOver(){
if(player1.getScore() >= MAX_SCORE || player2.getScore() >= MAX_SCORE){
if(player1.getScore()>player2.getScore())
return 1;
else
return 2;
}
else
return 0;
}

private class TAdapter extends KeyAdapter {
public void keyPressed(KeyEvent e){
player1.keyPressed(e);
player2.keyPressed(e);
if(isGameOver()>0){
player1.setScore(0);
player2.setScore(0);
ball = new Ball();
}
}
public void keyReleased(KeyEvent e){
player1.keyReleased(e);
player2.keyReleased(e);
}
}
}


Primero que nada vemos que usamos muchas librerias, de las cuales todas estan "explicadas" y usadas anteriormente, excepto las que usamos para escribir, ellas son

import java.awt.Font;
import java.awt.FontMetrics;

Para escribir, en el draw simplemente hacemos

g2d.setColor(Color.black);
g2d.setFont(small);
if(isGameOver()==0)
msg = "P1: "+player1.getScore()+" - P2: "+player2.getScore();
g2d.drawString(msg, 10, 13);


setColor es en el color que vamos a escribir, en este caso como el fondo es blanco, usaremos negro. setFont usa una font que definimos en el constructor, finalmente drawString escribe la string msg en las coordenadas 10, 13.
Para hacer una font, en el constructor pusimos esto

small = new Font("Verdana", Font.PLAIN, 12);
FontMetrics mtr = this.getFontMetrics(small);


Luego tenemos nuestro metodo paint, ahi dibujamos los players, la pelota y escribimos.
En actionPerformed hacemos las actualizaciones move() de los players y de la pelota, ademas nos fijamos por colisiones y por si el juego acabo.
Finalmente en keyAdapter, mandamos las teclas apretadas a que se procesen en los objetos player.
Si venian siguiendo el blog hasta ahora, espero este claro todo lo que hize, cualquier duda pueden contactarme :)



Eso fue Pong.
Codigo Fuente: de 4shared

2 comentarios:

  1. Muy bueno el tuto, lo unico una cosa que le veo mejorable.
    En el keyReleased de los players no mira que tecla es la liberada y simplemente pone a cero la velocidad. Seguramente setia mejor algo como si va hacia arriba y es liberada arriba para y lo mismo para abajo. Yo para estas cosas prefiero tener en lugar de cambiar tal cual la velocidad al apretar o soltar una tecla hacer un press kys up -> +velocidad, down -> -velocidad y lo contrio con los Released. Asi se controlan directamente los casos de las dos teclas apretadas simultaneamente.

    ResponderEliminar