PROGRAMACIN DE VIDEOJUEGOS III, DESARROLLO DE VIDEOJUEGOS WEB TUTORIAL DE ECLIPSE y FIREBUG 1

TECNICATURA EN DISEO Y PROGRAMACIN DE VIDEOJUEGOS FICH-UNL

Tutorial de Eclipse y Firebug

En esta asignatura vamos a usar Eclipse como Interfaz de Programacin de

Aplicaciones (API, del ingls Application Programming Interface) recomendada, aunque

cualquier otra, o incluso algn editor de texto comn, podra servir.

Gua de configuracin de Eclipse

En este apartado explicaremos cmo configurar un nuevo proyecto en Eclipse.

Ante todo, hay que descargar la API desde la pgina del proyecto:

http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-

developers/indigor

Eclipse no se instala, es portable.

Una vez que terminamos de descargarla y acomodarla a nuestras necesidades, la

ejecutamos.

Veremos una pantalla de carga (tarda unos segundos en cargar). Luego, se abre un

cuadro de dilogo donde debemos seleccionar la ubicacin que deseamos asignarle al

workspace, que es la carpeta raz en la cual se alojarn nuestros proyectos.

La estructura que utilizaremos consistir en una carpeta principal llamada own, dentro

de la cual guardaremos cada uno de los proyectos que haremos por unidad: game0,

game1, game2, etc.

No obstante, cada alumno es libre de estructurar las carpetas como desee.

Simplemente realizamos esta aclaracin porque es la estructura que utilizaremos en

esta gua explicativa.

Figura 1. Estructura de la carpeta Own.

Cabe aclarar que .metadata es una carpeta de configuracin que crea

automticamente Eclipse.

Volviendo a nuestro workspace, la carpeta raz es, entonces, /own/.

Para crear un nuevo proyecto, podemos hacerlo desde uno vaco, o bien desde una

carpeta creada. Esta ltima opcin es ms recomendable, ya que agrega todos los

archivos al proyecto automticamente y nos evita tener que incorporar archivo por

archivo en forma manual.

Para crear un nuevo proyecto, partiendo de una carpeta existente, vamos a:

File -> New -> JavaScript Project

Y creamos, por ejemplo, el proyecto game0.

PROGRAMACIN DE VIDEOJUEGOS III, DESARROLLO DE VIDEOJUEGOS WEB TUTORIAL DE ECLIPSE y FIREBUG 2

TECNICATURA EN DISEO Y PROGRAMACIN DE VIDEOJUEGOS FICH-UNL

En el nombre de proyecto colocamos game0, tildamos la opcin create project from

existing source y buscamos la carpeta game0 que ya tenemos en el workspace.

Figura 2. Ventana para crear un nuevo proyecto en JavaScript.

Luego, presionamos Finish.

PROGRAMACIN DE VIDEOJUEGOS III, DESARROLLO DE VIDEOJUEGOS WEB TUTORIAL DE ECLIPSE y FIREBUG 3

TECNICATURA EN DISEO Y PROGRAMACIN DE VIDEOJUEGOS FICH-UNL

A continuacin, en el margen izquierdo de la imagen, podemos visualizar nuestro

proyecto agregado al rbol de proyectos.

Figura 3. Visualizacin del rbol de proyectos.

La estructura de archivos que usaremos en la carpeta de los juegos es la siguiente:

En el directorio raz se alojar el archivo HTML de nuestro proyecto, llamado juego.html.

En la carpeta js colocaremos los scripts que vayamos generando y en la carpeta lib, las libreras que utilizaremos (en nuestro caso, las libreras de CAAT).

La ventaja de utilizar una API reside en la buena visin que tenemos de las tareas que

realizamos.

Por ejemplo, si queremos tener una documentacin de los mtodos de CAAT, abrimos

el archivo CAAT.js en el rbol de proyectos, en la carpeta lib, y se extendern todos los

objetos y mtodos que contiene.

PROGRAMACIN DE VIDEOJUEGOS III, DESARROLLO DE VIDEOJUEGOS WEB TUTORIAL DE ECLIPSE y FIREBUG 4

TECNICATURA EN DISEO Y PROGRAMACIN DE VIDEOJUEGOS FICH-UNL

As, si deseamos ver el mtodo paint del objeto Actor vamos a:

CAAT -> Actor -> paint

Figura 4. Visualizacin del mtodo paint del objeto Actor, correspondiente al archivo CAAT.

Para observar el resultado de lo que vayamos creando, debemos ir a un navegador y

abrir el archivo juego.html.

Depurar con Firebug

En JavaScript no existe un entorno de compilacin que busque los errores, ya que es

un lenguaje interpretado. Por ello, no hay una forma de depurar tan clara como en

otros lenguajes. Sin embargo, existen algunas herramientas para lograr algo similar.

La manera ms bsica de depurar errores es mediante banderas alert(). Si bien es una forma muy arcaica, es bastante til.

Otra forma de realizar la depuracin de la aplicacin es utilizando la extensin Firebug,

que fue creada para FireFox, pero ya funciona prcticamente en todos los navegadores.

Para Firefox, se puede descargar desde:

https://addons.mozilla.org/es-ES/firefox/collections/mozilla/webdeveloper/

Nosotros utilizaremos esta versin, ya que resulta ms estable.

La instalacin de Firebug depende de cada browser, pero hay que buscarlo como un

complemento. En algunos navegadores, como IE, se encuentra instalado un elemento

similar, que se puede encontrar en herramientas de desarrollo.

PROGRAMACIN DE VIDEOJUEGOS III, DESARROLLO DE VIDEOJUEGOS WEB TUTORIAL DE ECLIPSE y FIREBUG 5

TECNICATURA EN DISEO Y PROGRAMACIN DE VIDEOJUEGOS FICH-UNL

Figura 5. Procedimiento para abrir Firebug desde Firefox.

Con Firebug podemos explorar prcticamente todos los elementos web. A nosotros nos

interesa el HTML y, especialmente, el script. Tambin podemos pasar parmetros por

consola y hacer una depuracin.

Para esto ltimo debemos ir a la solapa de script y elegir el archivo js que deseamos depurar:

Figura 6. Seleccin del archivo a depurar.

PROGRAMACIN DE VIDEOJUEGOS III, DESARROLLO DE VIDEOJUEGOS WEB TUTORIAL DE ECLIPSE y FIREBUG 6

TECNICATURA EN DISEO Y PROGRAMACIN DE VIDEOJUEGOS FICH-UNL

Para la depuracin, debemos hacer click sobre la lnea a la cual deseemos agregarle

un punto de interrupcin (o breakpoint), en la parte izquierda del Firebug:

Figura 7. Colocacin del punto de interrupcin (o breakpoint).

Luego de recargar la pgina (presionando F5), podremos controlar la secuencia de

ejecucin con los botones play (F8), reload, entrar, salir y saltar, que se encuentran en

la parte superior del Firebug:

Figura 8. Control de la secuencia de ejecucin.