Esta página genera un applet de ejemplo que mueve una imagen (un cohete que realmente parece un trozo de pizza) delante de una imagen de fondo (un campo de estrellas). Esta página sólo muestra el código para un applet. El código para una aplicación sería similar excepto por el código utilizado para cargar las imágenes, como se describió en Cargar Imágenes.

Abajo tienes las dos imágenes utilizadas por el applet:

rocketship.gif:

starfield.gif:

Nota: la imagen rocketship tiene un fondo transparente. El fondo transparente hace que la imagen del cohete parezca tener forma de coche sin importar el color del fondo donde se esté dibujando. Si el fondo del cohete no fuera transparente, en vez de la ilusión de ver un cohete moviendose por el espacio, se veria un cohete dentro de un rectángulo que se mueve por el espacio.

Aquí tienes el applet en acción. Recuerda que se puede pulsar sobre el applet para detener y arrancar la animación

El código que realiza esta animación no es complejo. Esencialmente, es la plantilla de animación del applet, más un código de doble buffer que vió en la página anterior, más unas cuantas línea de código adicionales. El código adicional, carga las imágenes, dibuja la imagen de fondo, y utiliza un sencillo algoritmo que determina donde dibujar la imagen en movimiento. Aquí tienes el código adicional:

...//Donde se declaren las variables de ejemplar:
Image stars;
Image rocket;

...//en el método init():
stars = getImage(getCodeBase(), "../images/starfield.gif");
rocket = getImage(getCodeBase(), "../images/rocketship.gif");

...//en el método update():
//dibujar el marco dentro de la imagen.
paintFrame(offGraphics);

...//Un nuevo método:
void paintFrame(Graphics g) {
    Dimension d = size();
    int w;
    int h;

    //Si tenemos una anchura y altura válidas de la imagen de fondo 
    //la dibujamos.
    w = stars.getWidth(this);
    h = stars.getHeight(this);
    if ((w > 0) && (h > 0)) {
        g.drawImage(stars, (d.width - w)/2,
                    (d.height - h)/2, this);
    }

    //Si tenemos una anchura y altura válidas de la imagen móvil
    //la dibujamos.
    w = rocket.getWidth(this);
    h = rocket.getHeight(this);
    if ((w > 0) && (h > 0)) {
        g.drawImage(rocket, ((frameNumber*5) % (w + d.width)) - w,
                    (d.height - h)/2, this);
    }
}

Se podría pensar que este programa no necesita limpiar el fondo ya que utiliza una imagen de fondo. Sin embargo, todavía es necesario limpiar el fondo. Una razón es que el applet normalmente empieza a dibujar antes de que las imágenes estén cargadas totalmente. Si la imagen del cohete se cargara antes que la imagen de fondo, vería partes de varios cohetes hasta que la imagen de fondo sea cargada. Otra razón es que si el área de dibujo del applet fuera más ancha que la imagen de fondo, por alguna razón, vería varios cohetes a ambos lados de la imagen de fondo.

Se podría resolver este problema retardando todo el dibujo hasta que las dos imágenes estuvieran totalmente cargadas. El segundo problema se podría resolver escalando la imagen de fondo para que cubriera todo el área del applet. Aprenderá como esperar a que las imágenes se carguen completamente en Aumentar el Rendimiento y la Apariencia de una Animación, más adelante en esta lección. El escalado se describe en Mostrar Imágenes.

---

Ozito