EJEMPLO 23 ANIMACION USANDI LA CLASE SPRITE

http://www.programacion-j2me.blogspot.com/
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 ms clases en total son cinco clases ms 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 grfico que esta aparece en la pantalla del juego, ya se vio en elejemplo #19 como realizar la animacin de una pelotita por toda la pantalla, pues ese es un objeto grfico, ese es un Sprite. Sprite Animados Existen dos tipos de sprite: los sprite estticos, una imagen vale ms que mil palabras y en la figura siguiente se muestran dos sprite estticos, el fondo y la pelotita que, como recordar el lector se mueve por toda la pantalla y rebota, an as a pesar de ello la pelotita es un Sprite esttico.

Ahora vea la siguiente animacin, ah se muestra un sprite animado, qu es el otro tipo de sprite.

El Sprite, animado se forma por dos o ms imgenes, en el caso de la animacin anterior, que por cierto muestra a Mario, un famoso personaje de los video juegos que va caminando, se forma por 3 imgenes, las cuales son mostradas en la figura siguiente

Las tres imgenes se disearon para que juntas puedan simular que Mario camina. En el ambiente de los juegos cada imagen es llamada frame o se podra decir fotograma en espaol, para realizar la animacin, Java necesita las imgenes tal y como se muestran en la imagen anterior, un fotograma seguido del otro, en un arreglo horizontal como el de la figura o tambin se puede hacer en un arreglo vertical, es importante el tamao, 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 imgenes, 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 nmero, que inicia en 0 y termina con el ltimo fotograma. Cdigo para la creacin del sprite

El primer paso para crear un Sprite, es cargar las imgenes en variables de tipo Image, tal y como se observa en el siguiente cdigo: 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 cdigo como variables de tipo Image, esto ya se hizo en ejemplos anteriores, tambin 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 tambin 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 creacin 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 cdigo que de verdad crea los sprites, por cierto son dos tipos diferentes de Sprite, el fondo que va a ser un sprite esttico y el de Mario caminando que es un Sprite animado, el cdigo 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 parmetro que es la imagen y listo, ahora vea el cdigo para el Sprite animado: sprMario = new Sprite(mario, 32, 62); El constructor ahora lleva tres parmetros, uno que es la imagen la que contiene los tres fotogramas y dos parmetros ms 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 dimensin, en base al ancho (32) del fotograma que se enva al constructor con el cdigo anterior, Java espera una imagen que sea mltiplo de 32, por eso es que nuestra imagen de mide 96*62, as Java sabe que solo son tres fotogramas los que se reproducirn automticamente, cualquier dimensin que no sea mltiplo del ancho o del alto Java no cargara la imagen al momento de ejecutar el programa y no podramos ver ninguna animacin. Dibujando el Sprite

Para mostrar en la pantalla el sprite se debe hacer uso del mtodo paint, as: sprMario.paint(g); sprFondo.paint(g); Este mtodo lleva como parmetro 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 mtodo se escribe dentro del while(true) del mtodo run(), recuerde que en este mtodo se realiza la animacin como se vio en ejemplos pasados. Moviendo los fotogramas El mtodo nextFrame, me permite ir avanzando por los fotogramas de la animacin, si yo no lo uso, el sprite animado simplemente se quedara en una nica imagen y no se movera, el mtodo debe ir dentro del ciclo while, del mtodo run, as se usa: sprMario.nextFrame(); Cada que se ejecuta este mtodo, el sprite avanza un fotograma, automticamente 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 mtodo que me permite mover el sprite, el mtodo es llamado move y con l se mueve el Sprite a la velocidad que uno desee, un ejemplo del uso de este mtodo es como sigue: sprMario.move(5, 5); Con esa instruccin el sprite se mueve en el eje x y en el eje y a una velocidad de 5 pixeles, esto implica que mario caminara en diagonal, si deseo que camine en lnea recta que es lo normal para un sprite como el que estamos trabajando sera as: sprMario.move(5, 0); Vea la coordenada en Y esta en 0 as no hay incremento en Y y el Sprite avanzara en lnea recta. Por otro lado, el sprite automticamente realiza los incrementos de la variable, as que yo no me preocupo en incrementar la posicin para realizar la animacin, en verdad que esta clase me evita mucho cdigo y me facilita las cosas muchsimo. Dnde aparece el Sprite? Para poder definir donde debe aparecer el Sprite, por default aparece en la posicin (0,0) de la pantalla, se usa el mtodo setPosition, por ejemplo: sprMario.setPosition(10, 90); Ubicar al Sprite dentro del GameCanvas en la posicin 10 en x y 90 en Y, con este mtodo 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 lnea recta, por la pantalla. Se anima al lector para que experimente cambiando la posicin y velocidad para que vaya viendo por si mismo los cambios y as queden ms 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 cdigo para el botn de Salir, se baso en el Ejemplo #18 y el #19 http://www.youtube.com/watch?feature=player_embedded&v=Q-HEku4PoJA#t=0

An 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 cdigo fuente adems de las imgenes usadas en el ejemplo, obvi o incluye la imagen de Mario con los tres fotogramas.

/* * To change this template, choose Tools | Templates * and open the template in the editor. */ import javax.microedition.midlet.*; import javax.microedition.lcdui.*; /** * @author User */ public class Ejemplo23 extends MIDlet { public void startApp() { SpriteAnimacion sprAnimacion = new SpriteAnimacion(this); Display.getDisplay(this).setCurrent(sprAnimacion); } public void pauseApp() { } public void exitMIDlet() { destroyApp(false); notifyDestroyed(); } public void destroyApp(boolean unconditional) { } }

/* * To change this template, choose Tools | Templates * and open the template in the editor. */ import javax.microedition.lcdui.game.*; import javax.microedition.lcdui.*; public class SpriteAnimacion extends GameCanvas implements Runnable, CommandListener { Ejemplo23 MIDejemplo23; Graphics g; // objeto grfico Thread subproceso; Image mario, fondo; Sprite sprMario, sprFondo; public SpriteAnimacion (Ejemplo23 ejem) { super(true); MIDejemplo23 = ejem; setCommandListener(this); // detecta los eventos del Command addCommand(new Command("Salir", Command.OK, 1)); // se agrega el comando al GameCanvas g = getGraphics(); try { mario = Image.createImage("/Mario96_62.gif"); fondo = Image.createImage("/img2.png"); } catch (Exception e) { } sprFondo = new Sprite(fondo); sprMario = new Sprite(mario, 32, 62); subproceso = new Thread(this); subproceso.start(); } public void run() { sprMario.setPosition(0, 100); while(true) { sprFondo.paint(g); sprMario.paint(g); flushGraphics(); try { subproceso.sleep(90); } catch (InterruptedException e) { } sprMario.nextFrame(); sprMario.move(5, 0); } } public void commandAction( Command cmd, Displayable displayable) { if (cmd.getCommandType()== Command.OK) MIDejemplo23.exitMIDlet(); } }