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.