Animación de Imágenes en Java

En esta entrada del blog, voy a enseñarte cómo hacer imágenes con animación en Java. Para ello, lo primero que vamos a necesitar son...lo has adivinado: imágenes. Pueden ser fotos, o pueden ser dibujos sencillos, pero eso sí, tienen que mostrar movimientos consecutivos; por ejemplo, un pájaro subiendo y bajando las alas, o una cara abriendo y cerrando los ojos.

Si sabes utilizar Photoshop, Gimp o cualquier otro programa por el estilo, enhorabuena, dale rienda suelta a tu imaginación para crear las imágenes que desees (y ya puestos, compártelas con nosotros).

Si por el contrario, eres como yo, que a lo más que llegas es a dibujar un círculo con Paint, pues nada, le pones dos circulitos más pequeños dentro para simular ojos abiertos y dos líneas para simular ojos cerrados y ya tienes una carita que parpadea. Ahora guardas los dos dibujos como .png y listo.

También puedes añadirle una imagen de fondo que ocupe toda la pantalla: una foto en formato .jpg, otro dibujo o un fondo liso, lo que quieras.

Lo que vamos a hacer con estas imágenes es, primero, crear un ArrayList para contenerlas, y después, asignarles a cada una una duración determinada en milisegundos. Por último, vamos a mostrarlas en pantalla en un bucle para conseguir ese efecto de animación.

Para ello vamos a crear una clase, Animación (qué sorpresa de nombre, ¿eh?) que contendrá los métodos necesarios. Despues haremos otra para probarla, y originales como somos la llamaremos AnimaciónTest. PruebaDeAnimación tampoco está mal, pero es que es más largo. Dentro de esta clase AnimaciónTest vamos a utilizar un objeto de la clase PantallaCompleta, que creamos en una entrada anterior y que utilizamos, nunca lo adivinarías, para visualizar el resultado en una pantalla completa . Aquí puedes ver el código de esa clase.

Para que luego no te líes con el código, te voy a explicar el significado de algunas variables que verás en él:

• frames, que en inglés viene siendo fotogramas, es el nombre del ArrayList
• actualFrame es el número de índice de un elemento de frames
• tiempoAnimación es el tiempo que dura toda la animación
• tiempoTotal es la suma de los milisegundos de duración que hemos asignado a cada imagen

Clase Animación.java

import java.awt.Image;
import java.util.ArrayList;

public class Animación{
   private ArrayList frames;
   private int actualFrame;
   private long tiempoAnimación;
   private long tiempoTotal;
   
   public Animación(){
      frames = new ArrayList();
   tiempoTotal = 0;
   start();
 }
 
 public synchronized void addFrame(Image image, long duración){
    tiempoTotal += duración;
    frames.add(new AnimFrame(image, tiempoTotal));
 }
 
 public synchronized void start(){
    tiempoAnimación = 0;
    actualFrame = 0;
 }
 
 public synchronized void update(long tiempoTranscurrido){
    if(frames.size()>1){
     tiempoAnimación += tiempoTranscurrido;
     if(tiempoAnimación >= tiempoTotal){
     tiempoAnimación = tiempoAnimación % tiempoTotal;
     actualFrame = 0;
  }
  while(tiempoAnimación > getFrame(actualFrame).endTime){
     actualFrame++;
  }
    }
 }
 
 public synchronized Image getImage(){
    if (frames.size() ==0){
       return null;
  }else{
     return getFrame(actualFrame).image;
  }
 }
 
 private AnimFrame getFrame(int i){
    return (AnimFrame)frames.get(i);
 }
 
 private class AnimFrame{
    Image image;
    long endTime;
    public AnimFrame(Image image, long endTime){
       this.image = image;
    this.endTime = endTime;
  }
 }
}

Clase AnimaciónTest.java

import java.awt.*;
import javax.swing.ImageIcon;
import javax.swing.JFrame;

public class AnimaciónTest {

    public static void main(String args[]) {

        DisplayMode displayMode= new DisplayMode(1024, 768, 32,
                DisplayMode.REFRESH_RATE_UNKNOWN);
        AnimaciónTest test = new AnimaciónTest();
        test.run(displayMode);
    }

    private static final long DEMO_TIME = 10000;

    private PantallaCompleta pc;
    private Image bgImage;
    private Animación animación;

    public void loadImages() {
        // cargamos las imágenes
        bgImage = loadImage("images/background.jpg");
        Image cara1 = loadImage("images/cara1.png");
        Image cara2 = loadImage("images/cara2.png");
        Image cara3 = loadImage("images/cara3.png");

        // creamos la animación
        animación = new Animación();
        animación.addFrame(cara1, 250);
        animación.addFrame(cara2, 150);
        animación.addFrame(cara1, 150);
        animación.addFrame(cara2, 150);
        animación.addFrame(cara3, 200);
        animación.addFrame(cara2, 150);
    }


    private Image loadImage(String fileName) {
        return new ImageIcon(fileName).getImage();
    }


    public void run(DisplayMode displayMode) {
        pc = new PantallaCompleta();
        try {
            pc.setFullScreen(displayMode, new JFrame());
            loadImages();
            animationLoop();
        }
        finally {
             pc.restoreScreen();
        }
    }


    public void animationLoop() {
        long tiempoInicio = System.currentTimeMillis();
        long tiempoActual = tiempoInicio;
        while (tiempoActual - tiempoInicio < DEMO_TIME) {
            long tiempoTranscurrido =
                System.currentTimeMillis() - tiempoActual;
            tiempoActual += tiempoTranscurrido;

            // actualizamos la animación
            animación.update(tiempoTranscurrido);

            // se dibuja en pantalla
            Graphics g =
                pc.getFullScreenWindow().getGraphics();
            draw(g);
            g.dispose();

            // una pequeña pausa
            try {
                Thread.sleep(20);
            }
            catch (InterruptedException ex) { }
        }

    }


    public void draw(Graphics g) {
        // se dibuja el fondo
        g.drawImage(bgImage, 0, 0, null);

        // se dibuja la imagen y la centramos más o menos
        g.drawImage(animación.getImage(), 300, 200, null);
    }

}

Yo he utilizado una imagen de fondo y tres dibujos de una cara, pero tú puedes usar el número de imágenes que quieras. Fíjate que cada imagen se puede añadir más de una vez, en distinto orden y con distinto tiempo asignado, para crear distintas animaciones. Tú puedes jugar con ello hasta encontrar la que te gusta.

En otro momento te enseñaré a añadirle otros efectos y a utilizar la clase BufferStrategy para  evitar que la imagen parpadee.

¡Si tienes alguna duda, ya sabes dónde estoy!