Tutorial [1] Introducción a los juegos 2D en JAVA!.


Sobre este tutorial...


En esta parte de la introducción de juegos Java 2D, presentaremos algunos conceptos básicos necesarios para crear juegos. Crearemos una aplicación básica, pintaremos  un donut y mostraremos una bonita imagen en una ventana.

Esta parte del tutorial está dirigido a principiantes. Este tutorial mostrará los conceptos básicos de la programación de juegos 2D en lenguaje de programación Java y el kit de herramientas Swing GUI.



Las imágenes utilizadas en este tutorial se pueden descargar desde este enlace.

Comenzamos con las bases...


Mostraremos el esqueleto de cada uno de los juegos en este tutorial.
El cuadro es un panel donde se desarrolla el juego. De momento tendremos una cosa sencilla.

Lienzo.java

import javax.swing.JPanel;
package com.codbas;
public class Lienzo extends JPanel {

    public Lienzo() {}
}



Y aquí tenemos el método principal, que es el punto de entrada del juego.

Aplicacion.java

package com.codbas;
import java.awt.EventQueue;
import javax.swing.JFrame;

public class Aplicacion extends JFrame {
    
    public Aplicacion() {

        initUI();
    }

    private void initUI() {

        add(new Lienzo ());

        setSize(500, 400);

        setTitle("Aplicacion");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
    }    
    
    public static void main(String[] args) {
        
        EventQueue.invokeLater(() -> {
            Aplicacion ex = new Aplicacion();
            ex.setVisible(true);
        });
    }
}
Vamos a analizar todo lo que acabamos de presentar...

La secuencia de ejecución será la siguiente: Creamos una instancia de nuestro ejemplo de código y lo hacemos visible en la pantalla mediante la ejecución de la funcion main()

public static void main(String[] args) {
    
    EventQueue.invokeLater(() -> {
        Aplicacion ex = new Aplicacion ();
        ex.setVisible(true);
    });
}

main()->llama al constructor de la clase Aplicacion Aplicacion() -> esta llama únicamente 
a la funcion initUI() que realiza las siguientes acciones:

Aquí colocamos el tablero en el centro del contenedor JFrame.
add(new Cuadro ());
Esta línea establece el tamaño de la ventana.
setSize(500, 400);

Esto cerrará la aplicación cuando hagamos clic en el botón Cerrar. Recordar que no es el comportamiento predeterminado por lo que cuando cerremos la ventana el programa no terminará y seguirá ejecutándose si no ponemos esta instrucción.

setDefaultCloseOperation(EXIT_ON_CLOSE);
Pasar nulo al método setLocationRelativeTo () centra la ventana en la pantalla.
setLocationRelativeTo(null);

Y listo, si no hemos cometido ningún error, aparecerá un resultado parecido a este en la pantalla al ejecutar el programa:



A continuación veremos como pintar las figuras básicas, como circulos, elipses, rectangulos y líneas.

Para poder pintar necesitamos donde y el donde es un objeto JPanel que incluiremos en la ventana.

Extenderemos la clase JPanel para poder sobrescribir el método paint que es el método que llamará el Motor AWT para pintar lo que aparece en la pantalla.

Graficos.java

import java.awt.EventQueue;
import javax.swing.JFrame;

public class Graficos extends JFrame {
    
    public Graficos() {

        initUI();
    }

    private void initUI() {

        add(new Lienzo());

        setSize(250, 200);

        setTitle("Ejemplo de graficos");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
    }    
    
    public static void main(String[] args) {
        
        EventQueue.invokeLater(() -> {
            Graficos ex = new Graficos();
            ex.setVisible(true);
        });
    }
}

Lienzo.java

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.geom.Ellipse2D;
import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class Lienzo extends JPanel {

    public Lienzo() {        
    }
               
    @Override
    public void paintComponent(Graphics g) {

        Graphics2D g2d = (Graphics2D) g;
        g2d.setColor(Color.RED);
        g2d.fillOval(0, 0, 30, 30);
        g2d.drawOval(0, 50, 30, 30);  
        g2d.fillRect(50, 0, 30, 30);
        g2d.drawRect(50, 50, 30, 30);
        g2d.drawLine (100, 70, 200, 70);

        g2d.draw(new Ellipse2D.Double(0, 100, 30, 30));
    }
}
Y listo, si no hemos cometido ningún error, aparecerá un resultado parecido a este en la pantalla al ejecutar el programa:


El método paint recibe por parámetro un objeto Graphics2D que extiende de Graphics. Graphics es la vieja clase usada por AWT que ha sido reemplazada por Graphics2D que tiene más y mejor funcionalidad. El parámetro sigue siendo de tipo Graphics por compatibilidad pero nosotros siempre utilizaremos Graphics2D por lo que es necesario crear una variable g2d: "Graphics2D g2d = (Graphics2D) g;". Una vez que tenemos g2d podemos utilizar todos los métodos de Graphics2D para dibujar.

Lo primero que hacemos es elegir el color que utilizamos para dibujar: "g2d.setColor(Color.RED);".

Luego dibujamos unos círculos y cuadrados.

Posicionamiento en el lienzo. Coordenadas x e y
Para dibujar algo dentro del lienzo debemos indicar en que posición comenzaremos a pintar. Para esto cada punto del lienzo tiene una posición (x,y) asociada siendo (0,0) el punto de la esquina superior izquierda.



Graphics funciona con un sistema de coordenadas en la que la coordenada X indica la posición horizontal del elemento y este se dibuja de izquierda a derecha, la coordenada Y funciona de arriba a abajo dibujando los elementos de esta forma. A diferencia de las coordenadas en matemáticas en Java Y se desplaza hacia abajo cuando su valor es positivo. Ademas, la parte superior izquierda siempre tendrá las coordenadas(x, y) con valor (0, 0).

RXTX for Java x64

Web de descarga de la libreria para conectar Arduino a JAVA http://fizzed.com/oss/rxtx-for-java