Ejemplo #19 Animación usando imágenes

El objetivo de este ejemplo es mostrar la misma animación que el post pasado, pero usando imágenes, la animación del ejemplo #18 se hizo usando figuras creadas con la misma clase Graphics, hoy se crean las imágenes con algún programa de dibujo y se agregan al mismo código visto en el post pasado, el resultado es exactamente el mismo, pero con imágenes se ve mejor el programa, vea la siguiente animación es lo que se pretende hacer.

Claro que se ve mejor está que la realizada con puras funciones de Java, para hacerla, se necesitan dos imágenes, por un lado el fondo del MIDlet y por otro lado la pelotita que si lo ven se ve muchísimo mejor que la anterior, según está dibujada en 3D, para realizar estas imágenes se requiere un programa de edición de imágenes, yo las hice usando el programa llamado PhotoImpact X3 de la empresa Corel, pero hay muchos programas algunos muy famosos como el Photoshop, el Corel Draw, incluso hasta el mismo Paint de Windows.

Creación de las imágenes usando el PhotoImpact X3

La figura siguiente muestra una pantalla del PhotImpact X3:

Solo me basto crear un archivo nuevo se le dieron las dimensiones deseadas (más adelante se dirán que dimensiones son) y se rellena con un color de fondo, el color de fondo se agrego usando una textura que ya vienen predefinidas en PhotImpact, se elige la textura deseada desde la Paleta de acceso fácil (se encuentra al lado derecho) y simplemente con dar doble clic en la textura elegida se rellena el archivo y listo ya tengo el fondo del MIDlet con una textura, esté se guarda como archivo jpg y ya.

Tamaño de la imagen de fondo

Algo importante es que la imagen de fondo debe ser exactamente del mismo tamaño que la pantalla del celular o bien pudierá ser más grande pero lo principal es que cubra toda la pantalla.

Fácilmente se puede ver el ancho y alto de la pantalla del celular, puesto que si el lector recuerda el código anterior viene un par de instrucciones que precisamente obtienen este valor, justo son las instrucciones siguientes:

int alto = getHeight();

int ancho = getWidth();

y una instrucción como la siguiente puede mostrar el ancho y el alto en la misma pantalla del celular:

g.drawString("Ancho = " + ancho +" y alto = " + alto, 10, 10, Graphics.TOP | Graphics.LEFT);

Vea el resultado de ejecutar el código con las líneas anteriores, en el emulador que hemos usado a lo largo del blog:

El ancho y alto del celular es 176, ejecute el programa en mi Sony Ericsson 705 y el resultado fue en ancho = 240 y alto = 266.

Si tu celular soporta Java puedes bajar el archivo JAR de este programa para que veas cuanto es el ancho y el alto de la pantalla de tu celular, dando clic aquí lo puedes bajar, este archivo se lo pase a mi celular usando el Bluetooh, también se puede hacer usando el cable USB.


Pelotita

Para realizar la pelotita fue también de lo más simple, con el photimpact se crea un circulo como se ve en la figura, para que se vea mejor se puso en 3D, esta opción la trae el Photo Impact, yo no sé si otros software la tienen, pero supongo que sí, puesto que Photoshop es superior al PhotoImpact.

Ahora vea que pasa si pongo la pelotita en el fondo anterior:

Como se puede observar, las imágenes son cuadradas obviamente y queda un fondo blanco que no es conveniente, porque no se ve bien la pelotita, este problema se resuelve bien fácil, se elije la pelotita con un fondo transparente, esto se puede hacer desde el PhotoImpact simplemente creando el fondo transparente y guardando el archivo como GIF o con formato PNG, el resultado de hacer esto es mostrado en la figura siguiente:

Obviamente se ve mejor, la imagen sigue teniendo el mismo rectángulo pero con el fondo transparente no se nota.

Agregando el código para las imágenes

Se vió algo parecido a lo que se va hacer en este ejemplo pero usando la clase Canvas si lo deseas puedes verlo dando clic aquí.

Bueno, partiendo del código del ejemplo #18 se agregan dos variables de tipo Image así:

Image fondo, pelota;

Para usar la clase Image, hay que hacer la importación del paquete de clases donde está ubicada, en otras palabras se escribe el siguiente código , antes de iniciar la clase:

import javax.microedition.lcdui.Image;

Ahora con este par de instrucciones se hace el enlace del archive físico de la imagen con la variable creada:

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

pelota = Image.createImage("/pelotita.gif");

Por supuesto como ya se vio en la anterior entrada las imágenes deben estar en la ruta o directorio adecuado ¿no sabes cuál es? Da clic aquí y repasa, este punto ya se vio.

Estas instrucciones lanzan excepciones así que deben estar encerradas en su try y catch así:

try {

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

   pelota = Image.createImage("/pelotita.gif");

} catch(Exception e) { }

Es todo ahora simplemente se muestran en la pantalla así:

g.drawImage(fondo, 0, 0, Graphics.TOP | Graphics.LEFT);

y la pelotita así:

g.drawImage(pelota, coordX, coordY, Graphics.TOP | Graphics.LEFT);

También hay que tomar en cuenta el ancho y alto de la pelotita para hacer las comparaciones con el alto y ancho de la pantalla, se puede obtener el alto y ancho de la pelotita fácilmente, la clase Image tiene un par de métodos par ello, basta con este par de instrucciones:

Pelota.getWidth();

Pelota.getHeigh();

Estas se acomodan en los ifs donde se comparan las coordenadas, así:

if ((coordX + Pelota.getWidth()) > ancho || (coordX < 0 )
    velX = -velX;

Bueno eso es todo si existen dudas aquí les muestro el video tutorial para que vean donde se agregan las instrucciones vistas hoy.

Por cierto ya pueden pasar a visitar mi nuevo blog, dedicado a la electrónica, después de todo yo soy ingeniero en electrónica y mi fuerte debe ser la electrónica así que no duden en visitarlo, va creciendo poco a poco tengan paciencia, dando clic aquí lo pueden visitar.

Clic AQUI para leer más...!

Ejemplo #18 “Animación usando GameCanvas: Pelota rebotando”

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

Como hacer la pelotita
Recuerde que la clase Graphics contiene métodos para dibujar ya se han visto algunas de estos métodos, hay una función que me permite dibujar arcos se llama así

fillArc

Es posible realizar un círculo con esta función, esto se hace así porque la clase Graphics no tienen ninguna instrucción para directamente crear un círculo. La función anterior requiere de 4 parámetros, estos se puede ver en la ayuda de J2ME para la clase Graphics, los parámetros son así:

fillArc(int x, int y, int width, int height, startAngle, arcAngle);

Una imagen vale más que 1000 palabras, así que muestro un par de imágenes con la instrucción fillArc.

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

El lector puede seguir experimentando con los parámetros si así lo desea. Note que el primer par de parámetros, que en el ejemplo son (10, 10) ubican la posición de una esquina de un rectángulo imaginario, ese es el punto de referencia para iniciar el dibujo del círculo, después 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 imágenes 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 animación, sensación de movimiento.

Ciclo para la animación

La animación, se puede resumir en lo siguiente: dibujar la pelota en una posición, borrar la pantalla y volver a dibujarla ahora en otra posición, y repetir todo, una y otra vez, ¿Cómo 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 condición la colocamos en “true”, con eso basta para lograr un ciclo infinito, después de todo se desea que la pelotita rebote “siempre”, entonces el código para el ciclo es así:

while (true) {
   // código para la animación
}

Pero ¿Dónde va el ciclo? Sencillo, en el método run(), después 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 método run se va formando así:

public void run() {
   while (true) {
       // Código para la animación
    }
}


El método “sleep” del subproceso

Se mencionó arriba que la animación es simplemente dibujar, borrar, volver a dibujar en otra posición, 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 posición después 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 después de iniciar el subproceso, se puede hacer uso de sus métodos, hay un método llamado “sleep” (ver la documentación de la clase Thread, si se desean ver más detalles), este método me permite hacer una pausa, un ejemplo en código puede ser el siguiente:

subproceso.sleep(100);

Al ejecutar esa instrucción el programa se detiene durante 100 milisegundos, este método 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 compilación y nunca podre ejecutar el programa. Esas instrucciones, me permiten capturar algún error, en java se llaman excepciones, ya que el método sleep, puede crear errores por eso se usa el “try” y el “catch”, el código va dentro del ciclo while y va quedando así:




public void run() {
  while (true) {
    // Código para la animación
    try {
      subproceso.sleep(100);
    } catch (InterruptedException e) { }
  }
}

No se profundizará sobre las excepciones quizá más adelante se haga un post de esto, por lo pronto nos interesa la animación, así que continuamos.

Variables usadas en la animación

Se vio en la sección anterior, que la pelotita se “mueve” con solo mover el parámetro x y el parámetro y de fillArc, entonces, como inicio se pueden declarar esos parámetros con una variable para después cambiarlos, así:

int coordX = 0;

int coordY = 0

Recuerde que la declaración va al inicio del método, ya con las variables declaradas, se puede crear el circulo con la instrucción fillArc, en este caso es un circulo con 20 pixeles de ancho y alto, esta es la instrucción

g.fillArc(coordX, coordY, 20, 20, 0, 360)

La instrucción va dentro del ciclo, el código 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 sería 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 animación siguiente nos da la respuesta:

Nota: La animación es para fines ilustrativos solamente, está realizada con un programa llamado SwishMax 2, por lo que no se si vaya más rápido o más lento cuando se programe en Java.

Obviamente la pelotita va más rápido 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 también, 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 código 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 también, que si se ejecuta este código la pelotita se va de largo ¿Por qué? Ya se imaginará el lector que falta agregar un código que haga que la pelotita rebote esto es que cambie de dirección 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, también se muestra el alto y ancho de la pantalla, que es donde la pelotita rebota, entonces bastaría con que yo compare la posición de la pelotita para saber si llego a lo alto de la pantalla (o a lo ancho) y simplemente cambio de dirección.

Entonces, una simple comparación 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) {
  // código para cambiar de dirección
}

Pero vea la figura y recuerde lo que se menciono arriba, el círculo se dibuja tomando como referencia la esquina de un rectángulo, que justo son las coordenadas x e y:

¿Cómo se cambia la dirección?

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 envés de sumar se resta la velocidad, la pelotita se iría hacia arriba.

Entonces para que la pelotita cambie la dirección basta con restar la velocidad, esto se hace simplemente con cambiar el signo de la variable así:

velY = -velY;

Con esa instrucción la pelotita rebotará al llegar a lo alto de la pantalla, el código del método 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 todavía:

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 comparación para hacerlo, así:

if (coordY < 0) {
   velY = -velY;
}

Con eso basta para que detecte el límite de la pantalla y al cambiar de signo la velocidad, la pelotita cambia de dirección.

Es posible unir los dos if’s para la coordenada Y usando el operador OR (operador lógico) de Java, el operador OR en Java es así || el código queda entonces con un solo if de esta forma:

if ((coordY + 20) > alto || (coordY < 0 ))
  velY = -velY;
También quitamos las { }, puesto que sigue solo una instrucción 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 código para el método run ya con los if’s 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();
  }
}

También en el código anterior se agrego  el método flushGraphics al final del código.

Recuerde la animación es un ciclo de dibujar, borrar, dibujar en otra posición, borrar…. Y así sucesivamente, para terminar falta el borrado el código anterior, no funcionaría 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 código 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 código completo para el método run(), el código para borrar se coloca después 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 larguísimo, pero ya es todo, fiel a mi costumbre se muestra el video-tutorial completito para que no haya errores de ningún tipo y el lector pueda implementarlo con toda la confianza del mundo.

 




Clic AQUI para leer más...!

Ejemplo #17 “Hola mundo usando la clase GameCanvas”

Ya se vieron a lo largo del blog, varios video tutoriales donde se muestra como se usa la clase Canvas para dibujar elementos gráficos, incluso en el último ejemplo se gráfica la función seno en el celular, ahora veremos una clase que nos permitirá realizar animaciones fácilmente, se mostrará el ejemplo más sencillo que puede haber para esta clase, el clásico mensaje “Hola Mundo”, así que iniciemos.

La Clase GameCanvas

En este post se muestra la clase GameCanvas diseñada para simplificar el desarrollo de juegos para el teléfono celular. Con esta clase es muy fácil detectar las teclas que son presionadas por el usuario además fácilmente se actualiza la pantalla, sin necesidad de usar la técnica llamada doble buffer, la cual tampoco veremos aquí pues ya no se necesita, además esta clase está optimizada precisamente para la programación de juegos, esté ejemplo y los siguientes mostrarán ejemplos sencillos de su uso.

Se presenta detalladamente las partes de la clase y como se va codificando, quizá sea repetitivo al volver escribir a cada rato la clase, pero me gusta hacerlo así, creo que así queda más claro.

Siguiendo el mismo procedimiento que los ejemplos de la clase Canvas, se crea primero una clase que derive o herede de la clase GameCanvas, en código es así:


public class EjemploGameCanvas extends GameCanvas {
// Código de la clase
}

El nombre de la clase es EjemploGameCanvas, recuerda que en Java para definir la herencia se usa la palabra extends, entonces la clase EjemploGameCanvas hereda todos los métodos y atributos de la clase GameCanvas, por cierto a su vez la clase GameCanvas deriva de la clase Canvas.

Por otro lado la pura definición como está arriba nos marcaría error, puesto que hay que importar el paquete de clases donde se ubica la clase GameCanvas, la instrucción Import lo hace, se codifica como se muestra enseguida y se coloca al iniciar la clase:

import javax.microedition.lcdui.game.*;

Pero eso no es todo, está clase porque así está diseñada, se debe ejecutar en su propio “subproceso”, para implementar esto en Java se usa la interfaz Runnable, para hacerlo se escribe en la definición de la clase el “implements Runnable” así:


import javax.microedition.lcdui.game.*;
public class EjemploGameCanvas extends GameCanvas implements Runnable {
    // Código de la clase
}


Veamos una explicación muy superficial de los subprocesos.

Subprocesos

Para ver el concepto de subproceso se debe pensar en, por ejemplo, el procesador de textos Word, donde precisamente estoy escribiendo este texto, el Word fue programado para que haga varias tareas digamos “al mismo tiempo”, por ejemplo mientras se escribe el texto, Word crea un subproceso para verificar la ortografía la cuál señala con una línea roja, entonces Word se dice que es multitarea, esto es, la realización aparente de poder hacer varias tareas “al mismo tiempo”, aunque esto no es verdad puesto que las computadoras solo tienen un único procesador, pero como estos ejecutan millones de instrucciones por segundo nos dan la ilusión de que lo hace en paralelo

Para dar esta ilusión de ejecutar las instrucciones en paralelo en Java, se usan los subprocesos, en nuestro caso se usan en clase Game Canvas, porque esta clase debe aislarse del resto del código, además así se diseño esta clase, para facilitarnos la vida a la hora de programar animaciones y juegos, por eso se agrega a la definición de la clase el “implements Runnable” ese es el primer paso para crear el subproceso, pero todavía faltan más cosas.

Constructor de la clase

Por otro lado, olvidándonos un momentito de los subprocesos, recuerde algo, todas las clases deben llevar su constructor (método que se llama igual que la clase) y que generalmente sirve para inicializar variables que se usaran a lo largo del programa.

El constructor de la clase que hereda de GameCanvas, según la documentación, requiere un parámetro que es de tipo booleano (verdadero o falso), si es verdadero se suprimen los mecanismos para los eventos de las teclas, si es falso se activan los mecanismos y se pueden detectar fácilmente las teclas que se han presionado, esto se verá después por lo pronto nosotros le vamos agregar al constructor el parámetro “true” puesto que solo se mostrará un mensaje en la pantalla, entonces el constructor para la clase que acabamos de crear es así:


public class EjemploGameCanvas extends GameCanvas implements Runnable {
    public EjemploGameCanvas () {
      super(true); // código del constructor
    }
}

Vea la instrucción

super(true)

Justo ahí se le envía el valor de verdadero (true), la instrucción “super” significa que se manda llamar el constructor de la superclase, recuerde la herencia, Canvas es la superclase de GameCanvas, esté es un requisito para usar la clase GameCanvas, si no se llama el constructor de la superclase simplemente nos marca un error de compilación.

El método run

Regresando a los subprocesos, toda clase que lleve en su definición el “implements Runnable” debe a fuerzas implementar el método run() este método es la clave de los subprocesos, cuando se activa el subproceso, este método es el que se ejecuta, la clase ahora agregando el método run toma la forma siguiente:

public class EjemploGameCanvas extends GameCanvas implements Runnable {
   public EjemploGameCanvas () {
      super(true); // código del constructor
   }
   public void run() {
     //Código del subproceso
   }
}

El Método getGraphics()

Por otro lado, la clase GameCanvas contiene varios métodos, uno de ellos es getGraphics(), este método es el primer paso para iniciar a dibujar en el GameCanvas, el método regresa un objeto tipo grafico con el que posteriormente se dibuja, la instrucción para usarlo es así:

g = getGraphics();

g es el objeto gráfico, pero recuerde, en Java todo se debe declarar antes de usar, para declarar un objeto es bien simple, inicia con el nombre de la clase (en este caso Graphics), seguido por el nombre que yo desee (yo quiero la “g”) la declaración queda así :

Graphics g;

¿Donde va este código?, la declaración la colocamos después de la definición de la clase, y la llamada al método en el constructor que es el método que se ejecuta primero, así se prepara todo para iniciar el dibujo en el GameCanvas, queda entonces la clase así:




public class EjemploGameCanvas extends GameCanvas implements Runnable {
  Graphics g;
  public EjemploGameCanvas () {
  super(true); // código del constructor
    g = getGraphics();
  }
  public void run() {
    //Código para el subproceso
  }
}


Creación del Subproceso

Otra vez regresamos a los subprocesos, no basta con escribir el “implements Runnable” y el método “run” se debe en verdad crear el subproceso, esto se hace creando un objeto de la clase Thread, como se crea el objeto, ya lo vimos, primero se declara y se crea usando la palabra new, esto incluso se puede escribir en una sola línea así:

Thread subproceso = new Thread(this);

O como el objeto g, en dos líneas, con la excepción de que g no requiere la palabra new.

Ya está creado el subproceso con la línea anterior pero mientras no se inicie jamás se va a ejecutar el método run, así que para iniciarlo basta con mandar llamar su método start así:

subproceso.start();

¿Dónde va el código? Nos conviene que se inicie inmediatamente, después de todo nuestro primer ejemplo solo mostrará “hola mundo en la pantalla” y ya, así que de nueva cuenta el constructor es buena idea para este código, queda entonces la clase así:


public class EjemploGameCanvas extends GameCanvas implements Runnable {
  Graphics g;
  public EjemploGameCanvas () {
     super(true); // código del constructor
     g = getGraphics();
     Thread subproceso = new Thread(this);
     subproceso.start();
  }
  public void run() {
   //Código
  }
}

Ahora si a Dibujar

Listo tenemos todos los elementos para empezar a dibujar lo que querramos en la pantalla del celular, usando de por medio el objeto “g” tal y como se hizo con la clase Canvas, esto ya se vio por lo que no entrare en detalles, el código siguiente coloca la pantalla del celular en negro y escribe “hola Mundo usando GameCanvas”, en color magenta creo.


// pantalla en negro
g.setColor(0x000000);
g.fillRect(0, 0, getWidth(), getHeight());
// dibujo de las letras “hola mundo…
g.setColor(0xff00FF);
g.drawString("Hola mundo, con GameCanvas", 0, 60, Graphics.LEFT | Graphics.TOP);

¿Dónde va el código? En el método run() después de todo es el que se ejecuta al iniciar el subproceso, antes de ver donde, veamos otro método de la clase GameCanvas.

El método flushGraphics();

Este método, también de la clase GameCanvas es usado para colocar realmente en la pantalla del celular lo dibujado por el objeto “g”, el código anterior que pinta la pantalla de negro y dibuja el letrero esta en la memoria o como le llaman en el “buffer” y no se puede ver, hasta que se invoque el método flushGraphics(), al hacerlo se ve ahora si lo dibujado, este código va al final, despueés del método drawString, también va en el método run, queda finalmente el código así:


public class EjemploGameCanvas extends GameCanvas implements Runnable {
  Graphics g;
  public EjemploGameCanvas () {
    super(true); // código del constructor
    g = getGraphics();
    Thread subproceso = new Thread(this);
    subproceso.start();
  }
  public void run() {
    // pantalla en negro
    g.setColor(0x000000);
    g.fillRect(0, 0, getWidth(), getHeight());
    // dibujo de las letras “hola mundo…
    g.setColor(0xff00FF);
    g.drawString("Hola mundo, con GameCanvas", 0, 60, Graphics.LEFT |   Graphics.TOP);
   flushGraphics();
  }
}

Video

Enseguida se muestra el video para este ejemplo, recuerde que se requiere el MIDlet principal para mandar llamar la clase que hereda de GameCanvas esto ya se vio en un post anterior, por eso no lo repito aquí, aún así el tutorial muestra todo el procedimiento, todo él código para agregar la clase creada al MIDlet.




Clic AQUI para leer más...!