01 abril 2015

Imágenes y sonidos en Java

Con este último post del proyecto de autos de carreras (si no has visto la serie completo, aquí está la parte donde se dibuja la pista, luego donde se mueven los carros usando Threads y donde se revisan colisiones y se escucha al teclado para mover los carros).  Ahora se va a mostrar la manera en que los carros parezcan carros (vamos a dibujar un bitmap en lugar de dibujar un rectángulo como en las parts anteriores) y poner un poco de sonido de fondo.

Dibujando imágenes
Antes que nada, hay que tener la imagen que deseas poner en la ventana (o JFrame como dijimos antes).  Lo puedes dibujar en Paint, Photoshop o bajar de internet.  En mi caso bajé esta imagen de dos carros que luego giré en las 4 direcciones (arriba, abajo, izquierda y derecha) para tener el total de 8 imágenes:

    

Luego estas imágenes se tienen que copiar a la carpeta donde está tu proyecto, dentro de la carpeta /build/classes donde  es el nombre que le asignaste al proyecto hecho en NetBeans.

Ahora para dibujar una de estas imágenes en la ventana, el código necesario antes de dibujar la imagen (en el constructor, por ejemplo) es algo como este:

Image img = null;
try {
    URL url1 = this.getClass().getResource("nombre del recurso");
    img = Toolkit.getDefaultToolkit().getImage(url1);
}
catch (Exception e) { }

Luego para dibujar la imagen, usa este código (que debe reemplazar el dibujo de los 2 rectángulos con los que estábamos representando a los carritos hasta ahora):

g.drawImage(img,x,y,this);

Obviamente, x y y son las coordenadas de la esquina superior derecha de la imagen (en nuestro caso, son las del Rectangle p1 y p2) y this hace referencia a la ventana actual (el JFrame donde está todo).

Para que todo esto funcione, se tiene que incluir al principio de la clase este import (para la clase URL):

import java.net.*;

¡Y listo!  Con eso debería quedar.  En el video mostraré el código que usé en este proyecto, mismo que puedes descargar aquí.

Audio en Java
Es muy sencillo poner audio en formato WAV (el método aquí descrito no funciona para MP3).  Al igual que con las imágenes de mapa de bits, hay que copiar el o los archivos a la carpeta donde está el proyecto.

Después de esto, deberá ingresar un código como este:

URL url1 = this.getClass().getResource("archivo.wav");
AudioClip sonido = JApplet.newAudioClip(url1);
sonido.loop();

Como se podrá suponer el lector archivo.wav es el nombre del archivo que se copió a la carpeta del proyecto.  Las instrucción sonido.loop() hace que el sonido suene y cuando termine vuelva a sonar y así repetir indefinidamente hasta que se termina el programa.  Si desea que solo suene una vez, en lugar de eso escriba sonido.play().

No olvides de importar la librería con import java.applet.AudioClip.

Explicación en video
Aquí les dejo el video donde comento los cambios realizados al proyecto.  El código fuente del proyecto final se puede descargar aquí.


¿Y qué sigue?
Hay mil cosas que se podrían hacer para que este proyecto quedara mejor.  Se puede crear una imagen que diga las instrucciones al entrar al juego, se pueden contar el número de vueltas que da cada jugador (revisando si el rectángulo del carro hace colisión con el rectángulo de la meta y que va en dirección UP) y que gane el primer jugador en completar 3 vueltas.  Pero eso ya lo dejo para que sea implementado por el lector.

Agradecimientos
La pintura hecha en una oficina de Duke (la mascota de Java) con un rubí, lo tomé del blog de JRuby.  Y como ha sucedido con los posts del proyecto de la carrera de carros, las ideas principales salieron de este libro:



¡Hasta la próxima!

Related Posts Plugin for WordPress, Blogger...