VI.

Desarrollo de Applets / aplicaciones con uso

de base de datos, redes, Servlets y multimedia

Animaciones en Java
Una animacin es la presentacin de imgenes una despus de la otra cada una con ligeras
diferencias respecto a la anterior.
Para que la animacin sea buena, las imgenes se deben presentar con suficiente rapidez, y
los cambios entre las imgenes no deben ser muchos. Una buena animacin har creer a
nuestros ojos que estas imgenes se estn viendo en movimiento.
Cuando la animacin no es buena, la imagen parpadear y destruir la ilusin de
movimiento.
Doble Buffer
Al mostrar imgenes y sobre todo cuando son grandes, stas suelen aparecer a trozos o con
parpadeo. Las aplicaciones Java permiten que los programas dibujen en memoria, para luego
ir mostrando la imagen completa de forma suave.
Este es el proceso conocido como doble-buffering, y tiene dos ventajas fundamentales sobre
el proceso normal de pintar o dibujar directamente sobre la pantalla:
Primero, el usuario ve aparecer de golpe la imagen en la pantalla. Mientras el usuario est
viendo esa imagen, el programa est generando la siguiente para mostrarla de golpe a
continuacin, y as una y otra vez.
Segundo, la tcnica de doble-buffering involucra un objeto Image, que se puede pasar
directamente a varios mtodos. Esta capacidad para manipular objetos Image permite
descomponer las rutinas de dibujo en componentes funcionales, en lugar de un enorme
mtodo paint().
El doble-buffering slo debe usarse para animaciones grficas, no como mtodo normal.
Para utilizar el doble buffering se requiere de un contexto grfico (la zona donde se va a
pintar) y utilizarlo en la declaracin del mtodo paint():
public void paint( Graphics g )
El objeto Graphics g es el contexto grfico. Se utiliza g para realizar todo el dibujo en el
applet. Por ejemplo:
g.drawString( "Hola!",25,25 );
g.drawRect( 15,15,50,10 );
Entonces, Java traduce todo lo que se dibuja en g en imgenes sobre la pantalla. Para

realizar doble-buffering, se necesita crear un contexto grfico que no es presentado

inmediatamente en la pantalla.
Creacin de Contextos Grficos
Crear contextos grficos tiene dos pasos: Crear una imagen vaca con las dimensiones
adecuadas y obtener un objeto Graphics de esa imagen. El objeto Graphics que se construye
en el segundo paso realiza la funcin de contexto grfico.
public class Aninacion extends Applet {
Image dobleBuffer;
Graphics miCG;
public void init() {
// Inicializa el doble buffer
dobleBuffer = createImage( 300,300 );
miCG = dobleBuffer.getGraphics();
// Construye un rea grfica de trabajo
miCG.setColor( Color.white );
miCG.fillRect( 0,0,300,300 );
resize( 500,450 );
}
Dentro del contexto grfico miCG se puede dibujar cualquier cosa. Las imgenes se trazarn
en el doble buffer y cuando el dibujo se haya terminado el doble buffer pasa a la pantalla.
public void paint( Graphics g ) {
// Slo se tiene que presentar la imagen del buffer
g.drawImage( dobleBuffer,0,0,this );
}
Por ltimo queda utilizar el contexto. La siguiente aplicacin muestra un applet que utiliza la
tcnica del doble buffering para mostrar un cuadro formado por crculos.
import java.awt.*;
import java.applet.Applet;
public class Animacion2 extends Applet {
Image dobleBuffer;
Graphics miCG;
public void init() {
// Inicializa el doble buffer
dobleBuffer = createImage( 300,300 );
miCG = dobleBuffer.getGraphics();
// Construye un rea grfica de trabajo
miCG.setColor( Color.white );
miCG.fillRect( 0,0,300,300 );
resize( 500,450 );

}
public void paint( Graphics g ) {
// Presenta la imagen del buffer
g.drawImage( dobleBuffer,0,0,this );
}
public void titulo() {
// Obtiene la fuente de texto actual y se guarda
Font f = miCG.getFont();
// Selecciona otro color y otra fuente para el ttulo
miCG.setColor( Color.blue );
miCG.setFont( new Font( "TimesRoman",Font.BOLD,20 ) );
miCG.drawString( "Ejemplo de Cuadrado",15,50 );
miCG.drawString( "con Crculos",15,70 );
// Recupera la fuente original
miCG.setFont( f );
}
public void cuadrado() {
int x,y;
// Selecciona otro color para el cuadrado
miCG.setColor( Color.red );
// Dibuja circulos en los lados horizontales
y = 100;
for( x=100; x <= 200; x+=10 )
{
miCG.drawOval( x,y,20,20 );
miCG.drawOval( x,y+100,20,20 );
}
/// Dibuja circulos en los lados verticales
x = 100;
for( y=100; y <= 200; y+=10 )
{
miCG.drawOval( x,y,20,20 );
miCG.drawOval( x+100,y,20,20 );
}
}
public void start() {
// Hace el dibujo off-line
titulo();
cuadrado();
// Muestra la imagen de golpe
repaint();
}
}

Animacin utilizando Hilos

La creacin de animaciones es una aplicacin directa del uso de hilos (threads). Java es el
lenguaje ideal para programar animaciones en la Web utilizando esta tcnica.

El siguiente applet muestra una pelota movindose por el rea de trabajo.

import java.awt.*;
import java.applet.*;
public class AnimacionPelota extends Applet implements Runnable {
Thread anima;
int radio=10;
//radio de la pelota
int x, y;
//posicin del centro de la pelota
int dx = 1;
//desplazamientos
int dy = 1;
int anchoApplet;
int altoApplet;
int retardo=80;
//Crea el Doble buffer
Image imag;
Graphics gBuffer;

public void init () {

setBackground(Color.white);
anchoApplet=getSize().width;
altoApplet=getSize().height;
x=anchoApplet/4;
y=altoApplet/2;

//dimensiones del applet

//posicin inicial de la pelota

public void start(){

if(anima ==null){
anima=new Thread(this);
anima.start();
}
}
public void stop(){
if(anima!=null){
anima.stop();
anima=null;
}
}
public void run() {
long t=System.currentTimeMillis();
while (true) {
mover();
try{
//Para evitar parpadeo
t+=retardo;
Thread.sleep(Math.max(0, t-System.currentTimeMillis()));
} catch(InterruptedException ex){
break;
}
}
}
void mover(){

//cambia la posicin x, y de la pelota

x += dx;
y += dy;
//cuando la pelota topa en alguno de los extremos
if (x >= (anchoApplet-radio) || x <= radio) dx*= -1;
if (y >= (altoApplet-radio) || y <= radio) dy*= -1;
repaint();
//Llama al mtodo update
}
public void update(Graphics g){
if(gBuffer==null){
imag=createImage(anchoApplet, altoApplet);
gBuffer=imag.getGraphics();
}
gBuffer.setColor(getBackground());
gBuffer.fillRect(0,0, anchoApplet, altoApplet);
//dibuja la pelota
gBuffer.setColor(Color.red);
gBuffer.fillOval(x-radio, y-radio, 2*radio, 2*radio);
//transfiere la imagen al contexto grfico del applet
g.drawImage(imag, 0, 0, null);
}
public void paint (Graphics g) {
//se llama la primera vez que aparece el applet
}
}