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.