Ejemplo #23 Animación usando la Clase Sprite

Ya se ha visto en el blog varios ejemplos de la clase GameCanvas, una clase de la API para juegos de Java Micro Edition, contenida en el paquete javax.microedition.lcdui.game, pero este paquete tiene más clases en total son cinco clases más que ayudan al desarrollo de juegos, una de ellas es la clase Sprite, que hoy es la que se va analizar.

¿Qué es un Sprite?

Un Sprite es cualquier objeto gráfico que esta aparece en la pantalla del juego, ya se vio en el ejemplo #19 como realizar la animación de una pelotita por toda la pantalla, pues ese es un objeto gráfico, ese es un Sprite.

Sprite Animados

Existen dos tipos de sprite: los sprite estáticos, una imagen vale más que mil palabras y en la figura siguiente se muestran dos sprite estáticos, el fondo y la pelotita que, como recordará el lector se mueve por toda la pantalla y rebota, aún así a pesar de ello la pelotita es un Sprite estático.

Ahora vea la siguiente animación, ahí se muestra un sprite animado,  qué es el otro tipo de sprite.

El Sprite, animado se forma por dos o más imágenes, en el caso de la animación anterior, que por cierto muestra a Mario, un famoso personaje de los video juegos que va caminando, se forma por 3 imágenes, las cuales son mostradas en la figura siguiente

 

Las tres imágenes se diseñaron para que juntas puedan simular que Mario camina.

En el ambiente de los juegos cada imagen es llamada “frame” o se podría decir fotograma en español, para realizar la animación, Java necesita las imágenes tal y como se muestran en la imagen anterior, un fotograma seguido del otro, en un arreglo horizontal como el de la figura o también se puede hacer en un arreglo vertical, es importante el tamaño, muy importante, en este caso, la imagen para cada fotograma mide 32 pixeles de ancho y 62 de alto, la imagen con los tres fotogramas juntos mide 96*62, Java para optimizar obtiene los datos de cada uno de los fotogramas de una sola imagen, en otros tiempos era necesario ingresar una a una las imágenes, ahora no es necesario, se carga una imagen con los fotogramas y Java hace el resto..

Por cierto,  a cada fotograma Java le asigna un índice, un único número, que inicia en 0 y termina con el último fotograma.

Código para la creación del sprite

El primer paso para crear un Sprite, es cargar las imágenes en variables de tipo Image, tal y como se observa en el siguiente código:

        mario = Image.createImage("/Mario96_62.gif");

        fondo = Image.createImage("/fondo.jpg");

No se muestra pero, es obvio que las variables “fondo” y “mario” deben ser declaradas antes de este código como variables de tipo Image, esto ya se hizo en ejemplos anteriores, también recuerde que estas instrucciones deben ser encerradas con su try y catch, tampoco se muestra por que ya se vio en ejemplos anteriores del blog y también el MIDlet donde se probo NO fue creado con el "hello MIDlet" como otros proyectos por eso la ruta de la imagen no lleva el "/hello/".

El segundo paso es la creación del Sprite, primeramente deben declarar dos variables de tipo sprite así:

       Sprite sprFondo;

       Sprite sprMario;

Con lo anterior apenas se reserva espacio en memoria, falta el código que de verdad crea los sprites, por cierto son dos tipos diferentes de Sprite, el fondo que va a ser un sprite estático y el de Mario caminando que es un Sprite animado,  el código siguiente crea el sprite para el fondo:

     sprFondo = new Sprite(fondo);

Con lo anterior se crea el sprite, vea que simple fue, el constructor de la clase solo lleva un parámetro que es la imagen y listo, ahora vea el código para el Sprite animado:

sprMario = new Sprite(mario, 32, 62);

El constructor ahora lleva tres parámetros, uno que es la imagen la que contiene los tres fotogramas y dos parámetros más que son el ancho y alto de cada fotograma y listo, Java se encarga de manipular los fotogramas y mostrarlos en la pantalla del celular, uno tras otro.

Es muy importante la dimensión, en base al ancho (32) del fotograma que se envía al constructor con el código anterior, Java espera una imagen que sea múltiplo de 32, por eso es que nuestra imagen de mide 96*62, así Java sabe que solo son tres fotogramas los que se reproducirán automáticamente, cualquier dimensión que no sea múltiplo del ancho o del alto Java no cargaría la imagen al momento de ejecutar el programa y no podríamos ver ninguna animación.

Dibujando el Sprite

Para mostrar en la pantalla el sprite se debe hacer uso del método paint, así:

sprMario.paint(g);

sprFondo.paint(g);

Este método lleva como parámetro el objeto “g” que es el objeto de tipo Graphics usado para dibujar en el GameCanvas como ya se ha visto en ejemplos pasados. Este método se escribe dentro del while(true) del método run(), recuerde que en este método se realiza la animación como se vio en ejemplos pasados.

Moviendo los fotogramas

El método nextFrame, me permite ir avanzando por los fotogramas de la animación, si yo no lo uso, el sprite animado simplemente se quedaría en una única imagen y no se movería, el método debe ir dentro del ciclo while, del método run, así se usa:

sprMario.nextFrame();

Cada que se ejecuta este método, el sprite avanza un fotograma, automáticamente Java controla esto, así que cuando llega al tercer fotograma en nuestro caso, se vuelve a mostrar el primer fotograma y así sucesivamente, en un ciclo infinito.

Moviendo el Sprite

Existe un método que me permite mover el sprite, el método es llamado “move” y con él se mueve el Sprite a la velocidad que uno desee, un ejemplo del uso de este método es como sigue:

sprMario.move(5, 5);

Con esa instrucción el sprite se mueve en el eje x y en el eje y a una velocidad de 5 pixeles, esto implica que “mario caminaría” en diagonal, si deseo que camine en línea recta que es lo normal para un sprite como el que estamos trabajando sería así:

sprMario.move(5, 0);

Vea la coordenada en Y esta en 0 así no hay incremento en Y y el Sprite avanzaría en línea recta.

Por otro lado, el sprite automáticamente realiza los incrementos de la variable, así que yo no me preocupo en incrementar la posición para realizar la animación, en verdad que esta clase me evita mucho código y me facilita las cosas muchísimo.

¿Dónde aparece el Sprite?

Para poder definir donde debe aparecer el Sprite, por “default” aparece en la posición (0,0) de la pantalla,  se usa el método setPosition, por ejemplo:

sprMario.setPosition(10, 90);

Ubicará al Sprite dentro del GameCanvas en la posición 10 en x y 90 en Y, con este método se puede colocar el Sprite donde nosotros deseemos.

Video-Tutorial

Finalmente el video muestra el ejemplo completo que hace que el sprite de Mario camine en línea recta, por la pantalla. Se anima al lector para que experimente cambiando la posición y velocidad para que vaya viendo por si mismo los cambios y así queden más claros los ejemplos y las instrucciones vistas en este articulo.

El video inicia ya con el Midlet creado y la subclase AnimacionSprite que deriva con GameCanvas, inclusive ya con el código para el botón de Salir, se baso en el Ejemplo #18 y el
#19 

Aún así aquí les dejo comprimido todas las carpetas que genera NetBeans 6.8, para este ejemplo, puedes probar el archivo JAR directamente en tu celular, este como se recordará está en la carpeta “dist”, inclusive, en la carpeta “src” está el código fuente además de las imágenes usadas en el ejemplo, obvio incluye la imagen de Mario con los tres fotogramas.