Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Disear un Juego y Crear un Proyecto en NetBeans 5.5.1

Prerrequisitos
Es indispensable sino haber ledo la gua anterior Introduccin a Java Micro Edition y NetBeans, o por lo menos saber que es Java ME y sus limitaciones en cuanto a imgenes y sonidos, MIDP, CDLC, y tener instalado NetBeans (en ingls o espaol), con su paquete mvil. Adems, aunque es ms bien una recomendacin, se debe aclarar que el presente tutorial est orientado para las personas que no son familiares con la programacin en Java y la orientacin a objetos, si se conocen estos aspectos o se desea aprender sobre ellos usando programacin para celulares, se recomienda leer Programacin de juegos para mviles con J2ME.

Diseo de la Mecnica del Juego

La mecnica del juego no es ms que el objetivo que se persigue en el juego y como se juega. Este es un factor muy importante, pues no importa que tan bien queden los efectos de sonido, los grficos o la programacin, si el juego es aburrido este no se juega y punto. La creacin de un juego es algo muy subjetivo pues hay muchos gneros de juegos (disparos en primera persona, espaciales, deportivos, plataforma, RPG, etc.) y adems los gustos de las personas son muy variados. Es por esto que aqu se usar un juego clsico de la dcada del 80 llamado Frogger (Figura 1).

Figura 1

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

La idea es atravesar la pantalla, de abajo a arriba, esquivando primero los carros, luego llegando a una zona segura en la mitad y luego subindose a los troncos y tortugas que haba en el ro, para finalmente llegar a la parte superior. Nada complicado, pero tampoco muy fcil. Como bosquejo del juego que se har se tiene la Figura 3, la cual tiene las zonas seguras de color caf, el agua azul, la carretera gris y las reas de relleno (para ocupar toda la pantalla de celulares de mayor tamao) de color negro, esta zona es opcional en los juegos, pero aqu se trabajar con ella. Cada lnea horizontal indica una divisin de 17 pxeles en la cual la rana salta, pero para mantener el juego simple, los saltos sern cada dos divisiones, para as tener menos carros y troncos.

Figura 3 Java ME tiene un componente muy til para armar los escenarios llamado TiledLayer el cual permite crear una escena a partir de mosaicos y verificar que el personaje se encuentra dentro de la zona de estos mosaicos. Los mosaicos son figuras pequeas (cuadros o rectngulos) que juntos forman una figura que se repite, tal como los mosaicos que se usan para el piso de algunas construcciones. Para usar este componente se necesita tener los cuadros que formen la figura requerida, estos pueden ser bajados de pginas de recursos para juegos en Internet, o se pueden dibujar en cualquier editor de imgenes (The Gimp por ejemplo), lo importante es que estos deben ser PNG. La Figura 4(a) muestra el mosaico del agua, la 4(b) la de la carretera, la 4(c) la de las zonas seguras y la 4(d) la de las zonas de relleno. En el caso del de la carretera, se destaca el hecho de que una imagen para mosaico puede TiledLayer puede dividirla en cuadros ms pequeos (ms adelante se explicar como se hace).

Figura 4(a)

Figura 4(b)

Figura 4(c)

Figura 4(d)

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Ahora hay que tener los personajes y dems objetos que forman parte del juego. Primero los ms fciles, los carros y los troncos, estos pueden ser imgenes PNG comunes y corrientes, con las transparencias necesarias, y con unas dimensiones acordes al escenario; hay que recordar que las imgenes pueden obtenerse de Internet y/o dibujarse para luego escalarlas segn se necesite. Las Figura 5 muestra los carros elegidos y la 5(b) es la de los troncos.

Figura 5(a)

Figura 5(b)

Finalmente se trae a consideracin la rana. Esta debe tener todos los movimientos para la animacin de los saltos que tendr disponible, o por lo menos los de arriba o abajo e izquierda o derecha, ya que en Java ME es posible usar un efecto de espejo cuando no se tienen todos los movimientos de la animacin, como si se tienen en la Figura 6.

Figura 6 Los personajes son controlados con el componente Sprite y debe tenerse cuidado especial con la imagen de las ranas, pues cada una representa lo que se llama un Cuadro de Animacin. Sprite puede manejar estos cuadros, al igual que el efecto espejo, pero se debe tener cuidado ya que el tamao en pxeles de cada cuadro debe coincidir con el que ocupa cada rana, junto con sus alrededores transparentes. Para saber las dimensiones de cada cuadro basta con tan solo dividir la anchura total por el nmero de ranas a lo largo (72/3=24) para obtener el ancho, mientras que dividiendo el alto por el nmero de ranas en lo alto (128/4=32) se obtiene la altura.

Ejercicio Propuesto:
En este juego no se requiere que la rana saque la lengua. Se propone que, usando algn editor de imgenes, se eliminen estos cuadros, los de la vertical derecha, y se recalcule el cuadro de la animacin.

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Creando el Proyecto
Antes de empezar a desarrollar el cdigo es esencial iniciar NetBeans y abrir o crear un proyecto de aplicacin mvil.

Abrir un proyecto existente

En el archivo Frogger.zip que se incluye con este tutorial se encuentra una carpeta que contiene toda la estructura del proyecto ya creada, lo nico que se requiere es extraerla y abrirla desde NetBeans eligiendo Archivo (File)-Abrir Proyecto (Open Project) y buscar la ubicacin de esta. Al hacerlo una ventana mostrar un error de referencia (Reference Problem), este se resuelve haciendo clic derecho sobre le nombre del proyecto (Frogger), de all se elige Resolver Problema de Referencia (Resolve Reference Problem), lo cual muestra una ventana que tiene un botn de Resolver (Resolve), al presionarlo se debe buscar la librera ProyectoIcesi.jar que se encuentra dentro de la carpeta del proyecto y el problema se soluciona.

Figura 7

Crear un nuevo proyecto

Se explica como crear un proyecto desde cero para que al menos se tenga una idea de cmo se hace y adems para cubrir el caso de que la versin que se use de NetBeans que se tenga no sea compatible con la que se us al hacer el archivo Frogger.zip (NetBeans IDE 5.5.1, paquete mvil 7.3).

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Para hacer esto se debe crear un proyecto de aplicacin mvil (Figura 8), llamarlo Frogger, dejndolo como el proyecto principal (Main Project) y quitando la opcin de Hello MIDlet (Figura 9). Luego se elige la plataforma de emuladores, en este caso Sun Java(TM) Wireless Toolkit 2.5.1 for CLDC (o la versin que se tenga), como celular el MediaControlSkin, la configuracin CLDC 1.1 y el perfil MIDP-2.0. No selecciona ninguna Platilla (Template) cuando se pida.

Figura 8

Figura 9

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Ahora hay que cargar la librera (componente) ProyectoIcesi.jar, que se da junto con este tutorial, la cual contiene varios servicios que se usarn para facilitar an ms la programacin del juego. Para esto se debe hacer clic derecho sobre el nombre del proyecto en NetBeans (Frogger) y se selecciona Propiedades (Properties) del men, de all se va a la opcin Libreras y Recursos (Libraries and Resources) y se adiciona el Jar (Add Jar/Zip) como se ve en la Figura 10. Se recomienda que la librera se ponga en la carpeta del proyecto para que esta no sea borrada por accidente o se pierda.

Figura 10 Lo siguiente es agregar el archivo Juego2D.java, que tambin se incluye con esta gua, para ello nicamente cuestin de copiar el archivo desde su ubicacin hasta la siguiente estructura de carpetas: carpeta_del_proyecto/src/. En caso de no recordar la capeta del proyecto, esta puede verse en la ventana de Propiedades, opcin General. Con esto en la pestaa de Proyectos (Projects, parte superior izquierda) el nodo paquete por defecto (dafault package, en otro tutorial se explicar que es) contiene este archivo y se puede abrir dentro de NetBeans haciendo doble clic sobre este. La Figura 11 muestra lo que debera verse.

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Figura 11 No hay que dejarse impresionar o asustar por las lneas de cdigo que all se ven, en prximas guas se explicar la funcin de cada bloque de manera detallada. Lo que hay que saber por ahora es que recuadro con el signo mas (+) o con el signo menos (-) indica la compresin o expansin de las lneas de cdigo que estn entre la lnea vertical que est debajo de cada recuadro. Los renglones azules indican que NetBeans no permite que se modifique lo escrito en ellos lo cual se defini para que no se dae la estructura del archivo; en caso de abrir este archivo con cualquier otro editor de texto (Word, OpenOffice Write, Bloc de Notas, etc.) en estos renglones se ver //GEN-, esta instruccin es la que le indica a NetBeans que no permita la edicin del rengln, y por lo tanto se recomienda que no se borre. Una caracterstica interesante acerca de las aplicaciones hechas en Java ME es que estas pueden guardar informacin sobre su desarrollador(a) y sobre la aplicacin misma, en este caso un juego. Para ver y editar esta informacin se debe ir a la ventana de Propiedades del proyecto, opcin Atributos (Attributes), hay tres (3) datos que son obligatorios: Nombre de la aplicacin (MIDlet-Name), Empresa Vendedora (MIDlet-Vendor) y la Versin (MIDlet-Version), estos son modificables haciendo doble clic sobre ellos. Tambin es posible agregar otros datos opcionales, con el botn Agregar (Add), como se ve en la Figura 12.

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Figura 12 Un paso que es obligatorio es declarar cual va a ser el MIDlet del proyecto (el componente que hace la vez de aplicacin). Para hacer esto, en la misma ventana de Propiedades del proyecto, se selecciona MIDlets y se presiona Aadir (Add), esto muestra otra ventana en la que se pide el nombre que se muestra en el celular, el componente que hace la funcin del MIDlet y el icono que se muestra en el mvil, que tambin debe ser una imagen PNG, se escribe de dos maneras: /nombre_imagen.png si est en la carpeta src o /carpeta/nombre_carpetas/nombre_imagen.png si est en una o varias carpetas ms adentro de src.

Figura 13

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Lo nico que resta es crear una carpeta para guardar las imgenes y otra para los sonidos dentro del proyecto, ms exactamente dentro de la carpeta src, no porque crearlas sea obligatorio sino porque ayudan a mantener cierto orden. Para crearlas se hace clic derecho en default package y se selecciona Nuevo (New)Archivo/Carpeta (File/Folder), esto muestra una ventana, donde se selecciona Otro (Other) en Categoras (Categories) y Carpeta (Folder) en Tipos (File Types), como se aprecia en la Figura 14. Lo siguiente que se pide es el nombre, en cada caso ser imagenes y sonidos, recordando no poner tildes en estos para no tener problemas con determinados Sistemas Operativos en ingls.

Figura 14 Ya en estas carpetas se pueden copiar las imgenes y sonidos que vienen con este tutorial y todo queda listo para empezar a comprender y desarrollar el cdigo del juego.

Guardar una platillla

Un paso opcional es guardar el archivo Juego2D.java como una plantilla en NetBeans para que este quede accesible all en cualquier momento. Lo nico que hay que hacer es doble clic en el nombre del archivo y elegir Guardar como Plantilla (Save as Template). Esto abre una ventana, en donde se debe escoger MIDP, como se ve en la Figura 15, y presionar OK.

Facultad de Ingeniera Ingeniera de Sistemas Proyecto de Grado

Figura 15 En los prximos tutoriales ya se entrar en el desarrollo del cdigo del juego y la comprensin del lenguaje de programacin Java ME.