EJEMPLO 18 ANIMACIN USANDO GAMECANVAS http://programacion-j2me.blogspot.com/2010/08/ejemplo-18-animacion-usandogamecanvas.

html
La animacin es un proceso de movimiento de imgenes o dibujos, hoy se muestra un pelotita o bolita o circulo, rebotando por toda la pantalla del celular, esa es la primera animacin de varias que se van a realizar. La animacin siguiente muestra lo que se pretende hacer con Java en el celular:

Como hacer la pelotita Recuerde que la clase Graphics contiene mtodos para dibujar ya se han visto algunas de estos mtodos, hay una funcin que me permite dibujar arcos se llama as fillArc Es posible realizar un crculo con esta funcin, esto se hace as porque la clase Graphics no tienen ninguna instruccin para directamente crear un crculo. La funcin anterior requiere de 4 parmetros, estos se puede ver en la ayuda de J2ME para la clase Graphics, los parmetros son as: fillArc(int x, int y, int width, int height, startAngle, arcAngle); Una imagen vale ms que 1000 palabras, as que muestro un par de imgenes con la instruccin fillArc.

Aqu hay otra imagen, que muestra incluso dos lneas para que quede bien claro donde se ubica el circulo cuando se dibuja.

El lector puede seguir experimentando con los parmetros si as lo desea. Note que el primer par de parmetros, que en el ejemplo son (10, 10) ubican la posicin de una esquina de un rectngulo imaginario, ese es el punto de referencia para iniciar el dibujo del crculo, despus siguen las coordenadas (30, 30) que es el ancho y el alto del circulo, y luego va el ngulo de inicio y el ngulo del arco, para que sea un circulo completo se inicia con el ngulo en 0 y se termina con el ngulo en 360. Por otro lado, en ese par de imgenes anteriores se puede ver que si la bolita se desplaza (primero se puso en la coordenada (0,0) y luego en la (10,10) ), podemos decir que la bolita se movio, eso es

la animacin, sensacin de movimiento. Ciclo para la animacin La animacin, se puede resumir en lo siguiente: dibujar la pelota en una posicin, borrar la pantalla y volver a dibujarla ahora en otra posicin, y repetir todo, una y otra vez, Cmo se hace esto? Bien simple con un ciclo, dando clic aqu para ver el post de los ciclos, si as lo deseas. Por facilidad se usa el ciclo while(), la condicin la colocamos en true, con eso basta para lograr un ciclo infinito, despus de todo se desea que la pelotita rebote siempre, entonces el cdigo para el ciclo es as:

while (true) { // cdigo para la animacin } Pero Dnde va el ciclo? Sencillo, en el mtodo run(), despus de todo este ciclo se ejecuta cuando se inicia el subproceso, y como se vio en la entrada anterior aqu es donde van las instrucciones para graficar, as que el mtodo run se va formando as: public void run() { while (true) { // Cdigo para la animacin } }

El mtodo sleep del subproceso Se mencion arriba que la animacin es simplemente dibujar, borrar, volver a dibujar en otra posicin, borrar, y repetirlo, pero necesito hacerlo en pausas, es decir, dibujar por un tiempo (algunos milisegundos), luego borrar todo y volver a dibujar en otra posicin despus de otro tiempo, esto se puede realizar por medio del subproceso, ya se vio en el post anterior algo de los subprocesos, al crear y despus de iniciar el subproceso, se puede hacer uso de sus mtodos, hay un mtodo llamado sleep (ver la documentacin de la clase Thread, si se desean ver ms detalles), este mtodo me permite hacer una pausa, un ejemplo en cdigo puede ser el siguiente: subproceso.sleep(100); Al ejecutar esa instruccin el programa se detiene durante 100 milisegundos, este mtodo debe ser

encerrado en un par de instrucciones as: try { subproceso.sleep(10); } catch (InterruptedException e) { } El try y catch son requeridos por el programa, si no se agregan hay un error de compilacin y nunca podre ejecutar el programa. Esas instrucciones, me permiten capturar algn error, en java se llaman excepciones, ya que el mtodo sleep, puede crear errores por eso se usa el try y el catch, el cdigo va dentro del ciclo while y va quedando as:

public void run() { while (true) { // Cdigo para la animacin try { subproceso.sleep(100); } catch (InterruptedException e) { } } } No se profundizar sobre las excepciones quiz ms adelante se haga un post de esto, por lo pronto nos interesa la animacin, as que continuamos. Variables usadas en la animacin Se vio en la seccin anterior, que la pelotita se mueve con solo mover el parmetro x y el parmetro y de fillArc, entonces, como inicio se pueden declarar esos parmetros con una variable para despus cambiarlos, as: int coordX = 0; int coordY = 0 Recuerde que la declaracin va al inicio del mtodo, ya con las variables declaradas, se puede crear el circulo con la instruccin fillArc, en este caso es un circulo con 20 pixeles de ancho y alto, esta es la instruccin g.fillArc(coordX, coordY, 20, 20, 0, 360) La instruccin va dentro del ciclo, el cdigo toma la forma siguiente:

public void run() { int coordX = 0; int coordY = 0 while (true) { g.fillArc(coordX, coordY, 20, 20, 0, 360) try { subproceso.sleep(100); } catch (InterruptedException e) { } } } Ahora que se necesitar para mover la pelotitia? Simplemente desplazar las coordenadas, estas que son variables se pueden desplazar sumandoles un valor, as: coordX = coordX + 1 coordY = coordY + 1 Otro ejemplo sera as: coordX = coordX + 5 coordY = coordY + 5 O uno con desplazamientos diferentes, coordX = coordX + 5 coordY = coordY + 3 Vea los ejemplos, en el primero solo se desplaza la pelotita 1 pixel, el segundo 5 pixeles Qu diferencia hay? Entre 1 pixel o 5 pixeles en el desplazamiento, la animacin siguiente nos da la respuesta:

Nota: La animacin es para fines ilustrativos solamente, est realizada con un programa llamado SwishMax 2, por lo que no se si vaya ms rpido o ms lento cuando se programe en Java. Obviamente la pelotita va ms rpido con 5 pixeles que con 1, por que los incrementos en las coordenadas son mayores, podemos entonces decir que el sumarle una variable a la coordenada hace que se cambie su velocidad, por comodidad se va a almacenar este desplazamiento en variables tambin, se declaran as: int velX = 5; int velY = 5;

Yo las inicie en 5, el lector puede hacerlo en 1 o en otro valor, queda el cdigo as: public void run() { int coordX = 0; int coordY = 0; int velX = 5; int velY = 5; while (true) { g.fillArc(coordX, coordY, 20, 20, 0, 360) try { subproceso.sleep(100); } catch (InterruptedException e) { } coordX = coordX + velX;

coordY = coordY + velY; } } Es obvio tambin, que si se ejecuta este cdigo la pelotita se va de largo Por qu? Ya se imaginar el lector que falta agregar un cdigo que haga que la pelotita rebote esto es que cambie de direccin como se ve en la figura:

Aparte, en la figura se observa donde est el punto (0,0) en el sistema de coordenadas de Java para que el lector lo recuerde, tambin se muestra el alto y ancho de la pantalla, que es donde la pelotita rebota, entonces bastara con que yo compare la posicin de la pelotita para saber si llego a lo alto de la pantalla (o a lo ancho) y simplemente cambio de direccin. Entonces, una simple comparacin puede detectar si la pelotita llego a lo alto del panel, primero pues vamos a usar un par de variables para obtener el alto y ancho del panel as: int ancho = getWidth(); int alto = getHeight(); Ahora s, se inician las comparaciones, que tal un if para ver si ya toco el alto as:

if (coordY > alto) { // cdigo para cambiar de direccin } Pero vea la figura y recuerde lo que se menciono arriba, el crculo se dibuja tomando como referencia la esquina de un rectngulo, que justo son las coordenadas x e y:

Cmo se cambia la direccin? La respuesta es bien simple, para el ejemplo que se muestra, la pelotita se desplaza hacia abajo por que se suma se suma la velocidad (variable velY) pero que tal si envs de sumar se resta la velocidad, la pelotita se ira hacia arriba. Entonces para que la pelotita cambie la direccin basta con restar la velocidad, esto se hace simplemente con cambiar el signo de la variable as: velY = -velY; Con esa instruccin la pelotita rebotar al llegar a lo alto de la pantalla, el cdigo del mtodo run queda de la siguiente forma al agregar el primer if:

public void run() { int coordX = 0; int coordY = 0; int velX = 5; int velY = 5; while (true) { g.fillArc(coordX, coordY, 20, 20, 0, 360) try { subproceso.sleep(100); } catch (InterruptedException e) { } coordX = coordX + velX; coordY = coordY + velY; if ((coordY + 20) > alto) { velY = -velY; } } } Ahora vea en la figura el siguiente caso que tiene que ver con la coordenada Y todava:

La pelotita se dirige a la coordenada 0, de Y, para ese momento la velocidad es negativa obviamente deseamos que rebote de ah, entonces se requiere otra comparacin para hacerlo, as: if (coordY < 0) { velY = -velY; } Con eso basta para que detecte el lmite de la pantalla y al cambiar de signo la velocidad, la pelotita cambia de direccin. Es posible unir los dos ifs para la coordenada Y usando el operador OR (operador lgico) de Java, el operador OR en Java es as || el cdigo queda entonces con un solo if de esta forma: if ((coordY + 20) > alto || (coordY < 0 )) velY = -velY; Tambin quitamos las { }, puesto que sigue solo una instruccin no son necesarias. Todo lo que se hizo para la coordenada Y se aplica para la coordenada X y el ancho de la pantalla , as que les dejo como va quedando el cdigo para el mtodo run ya con los ifs para las ambas coordenadas public void run() { int coordX =0, coordY=50; int velX = 5; int velY = 5; int ancho = getWidth(); int alto = getHeight(); while(true) { g.fillArc(coordX,coordY,20,20,0,360); try { subproceso.sleep(30); } catch (InterruptedException e) { } coordX = coordX + velX; coordY = coordY + velY; if ((coordX + 20) > ancho || (coordX < 0) ) velX = -velX; if ((coordY + 20) > alto || (coordY < 0 )) velY = -velY; flushGraphics(); } }

Tambin en el cdigo anterior se agrego del cdigo.

el mtodo flushGraphics al final

Recuerde la animacin es un ciclo de dibujar, borrar, dibujar en otra posicin, borrar. Y as sucesivamente, para terminar falta el borrado el cdigo anterior, no funcionara como se desea si no es borrada la pantalla, esto se hace colocando el fondo del color que se quiera, en este caso es en color negro, aparte se agrega el cdigo para pintar la pelotita en color azul. g.setColor(0x000000); //color negro g.fillRect(0, 0, ancho, alto); g.setColor(0x0000FF); //color azul Por fin se muestra el cdigo completo para el mtodo run(), el cdigo para borrar se coloca despus del while public void run() { int coordX =0, coordY=50; int velX = 5; int velY = 5; int ancho = getWidth(); int alto = getHeight(); while(true) { g.setColor(0x000000); //color negro g.fillRect(0, 0, ancho, alto); g.setColor(0x0000FF); //color azul g.fillArc(coordX,coordY,20,20,0,360); try { subproceso.sleep(30); } catch (InterruptedException e) { } coordX = coordX + velX; coordY = coordY + velY; if ((coordX + 20) > ancho || (coordX < 0 ) velX = -velX; if ((coordY + 20) > alto || (coordY < 0 )) velY = -velY; flushGraphics(); } }

Vaya este post se me hizo largusimo, pero ya es todo, fiel a mi costumbre se muestra el videotutorial completito para que no haya errores de ningn tipo y el lector pueda implementarlo con toda la confianza del mundo. http://www.youtube.com/watch?feature=player_embedded&v=P05F-C5VnBY#t=0