VIDEOJUEGOS PARA APRENDER A PROGRAMAR VIDEOJUEGOS ______________ MEMORIA DEL PROYECTO Laura María de Castro Saturio Samuel García Segador Mariano Hernández García Dirigido por Guillermo Jiménez Díaz Trabajo de fin de grado en Ingeniería Informática Departamento de Ingeniería del Software e Inteligencia Artificial Facultad de Informática Universidad Complutense de Madrid Junio 2015 2 VIDEOJUEGOS PARA APRENDER A PROGRAMAR VIDEOJUEGOS Memoria del proyecto 06/15 Departamento de Ingeniería del Software e Inteligencia Artificial Facultad de Informática Universidad Complutense de Madrid Junio 2015 Licencia MIT 3 4 Autorización Nosotros, Laura María de Castro Saturio, Samuel García Segador y Mariano Hernández García, alumnos matriculados en la asignatura Trabajo de Final de Grado (TFG) en la Universidad Complutense de Madrid durante el curso 2014/2015; dirigidos por Guillermo Jiménez Díaz, autorizamos la difusión y utilización con fines académicos, no comerciales, y mencionando expresamente a sus autores del contenido de esta memoria, el código, la documentación adicional y el prototipo desarrollado. Laura María de Castro Saturio Samuel García Segador Mariano Hernández García 5 6 Agradecimientos En primer lugar, queremos agradecer a nuestro director de proyecto, Guillermo Jiménez Díaz, la oportunidad que nos ha dado para adentrarnos en la programación de videojuegos aceptando el proyecto que nosotros le propusimos. No ha sido fácil avanzar en el desarrollo del videojuego, pero Guille siempre ha estado ahí proporcionándonos información y soluciones varias para salir de los aprietos. Nunca nos ha puesto la solución delante de nosotros, sino que nos ha guiado para que la encontráramos por nosotros mismos, cosa que nos ha gustado sobremanera. Nos hemos reunido con él siempre que lo hemos necesitado y siempre nos ha dado su punto de vista de forma sincera. Gracias Guille. Han pasado cuatro/cinco años desde que entramos por esas puertas moradas que han cambiado totalmente nuestra manera de pensar. A lo largo de estos años hemos ido conociendo gente que, poco a poco, ha ido cambiando nuestra mentalidad y nuestra capacidad de expresarnos mejor con el resto de compañeros. Hemos tenido profesores buenos y otros no tan buenos pero, gracias a todos ellos, estamos hoy aquí. Nos han ayudado a madurar y nos han enseñado a buscarnos la vida por nuestra cuenta. Durante este periodo hemos conocido a muchos compañeros. A algunos los conocimos el primer día al entrar en el aula, mientras que a otros después de varios años en la facultad. Queremos agradecer en especial a Eddy, Jorge, Manu, Omar, Stephanía y a todos aquellos que, por unas circunstancias u otras perdimos el contacto, todo lo que nos han enseñado, los momentos que hemos tenido con cada uno, los grandes días que pasamos juntos y los que nos quedan por pasar. Muchas gracias chicos. Ya fuera del ambiente de nuestra facultad, queremos agradecer a nuestros amigos y amigas todos los años de apoyo y diversión que nos han dado. Siempre han estado allí y siempre estaréis. Por último, aunque no por ello menos importante, queremos agradecer a nuestras familias la oportunidad que nos han dado para estudiar lo que realmente nos gusta. Gracias a ellos estamos a punto de terminar un ciclo que nos permitirá dedicarnos a trabajar en lo que más amamos. No hay palabras en el mundo suficientes para agradecerles todo lo que han hecho, hacen y harán por nosotros. Muchas gracias a todos. Laura, Samuel & Mariano. 7 8 Resumen Desde siempre nos han gustado los videojuegos. Actualmente forman parte de la cultura de un país, como pueden ser el cine o el teatro y desde hace unos años es posible ganarse la vida desarrollando videojuegos. El objetivo de este proyecto es desarrollar una herramienta que enseñe a programar un videojuego. La particularidad de esta herramienta es que será un videojuego, es decir, desarrollaremos un videojuego que enseñará las bases de la programación de videojuegos. En concreto, llevaremos a cabo esta tarea utilizando el framework de desarrollo de videojuegos llamado Phaser. No sólo desarrollaremos dicho videojuego, sino que además tendremos que enfrentarnos a los problemas que plantea ejecutar en tiempo real el código que el jugador escriba dentro de nuestra herramienta. También necesitaremos verificar si el código escrito por el usuario es correcto, darle ayudas en caso de que sea erróneo y mostrarle la documentación del framework que hemos utilizado. Además, queremos validar con usuarios reales el prototipo que entreguemos. Palabras clave: framework, JavaScript, HTML5, Phaser, lenguaje de programación. 9 10 Abstract We have always been passionate about videogames. Nowadays they form part of the country’s culture as the cinema or the theater and for some years ago it’s possible to work in developing videogames. The goal of this project is the development of a tool to teach how to program a videogame. The point of this tool is that it will be a videogame, that is to say, we will develop a videogame that will teach the bases of videogame programming. Concretely, we will use for this purpose the videogame developer framework called Phaser. We do not only develop this game, but also we will have to deal with some problems as inserting user’s code within the videogame. Also we will need to check if the code written by the user is correct, give him/her some tips in case the code will be wrong and show him/her the frameworks’ documentation that we have used. Finally, we will want to validate with real users our prototype. Keywords: framework, JavaScript, HTML5, Phaser, program language 11 12 Índice de contenidos Autorización .......................................................................................................................... 5 Agradecimientos ................................................................................................................... 7 Resumen .............................................................................................................................. 9 Abstract............................................................................................................................... 11 Índice de figuras .................................................................................................................. 17 Índice de tablas ................................................................................................................... 19 1. Motivación y objetivos ..................................................................................................... 21 1.1 Objetivos ................................................................................................................... 22 1.2 Organización de la memoria ...................................................................................... 23 1.3 Motivation and goals .................................................................................................. 24 1.3.1 Goals .................................................................................................................. 24 1.3.2 Project organization ............................................................................................ 25 2. Estado del arte ............................................................................................................ 28 2.1 Entornos de enseñanza de programación ................................................................. 28 2.1.1 Scratch ................................................................................................................ 28 2.1.2 Alice 3D .............................................................................................................. 30 2.1.3 KhanAcademy ..................................................................................................... 32 2.1.4 CodeSpells .......................................................................................................... 33 2.1.5 Code Avengers ................................................................................................... 35 2.1.6 Light Bot .............................................................................................................. 37 2.1.7 Code Combat ...................................................................................................... 38 2.2 Tabla comparativa ..................................................................................................... 41 2.3 Conclusiones ............................................................................................................. 44 3. Desarrollo de videojuegos en HTML5 ............................................................................. 46 3.1 Estructura general de un videojuego ......................................................................... 46 3.1.1 Arquitectura basada en componentes ................................................................. 47 3.1.2 Arquitectura basada en objetos o herencia ......................................................... 48 3.2 Motores de desarrollo de videojuegos en HTML5 ...................................................... 49 3.2.1 Create.js ............................................................................................................. 49 3.2.2 Quintus ............................................................................................................... 50 3.2.3 Phaser.js ............................................................................................................. 51 3.2.4 Cocos 2D ...........................................................................................................