Upload
alejandro-fort-villa
View
15
Download
0
Embed Size (px)
Citation preview
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.