Aprender a programar jugando

APRENDER A PROGRAMAR JUGANDO Trabajo de n de Grado Francisco Faulkner Antiñolo Grado en Ingeniería de Computadores Facultad de Informática Universidad Complutense de Madrid Enero 2019 Dirigido por: Alberto de la Encina Vara 1 Índice Agradecimientos 5 Introducción 7 Summary 9 1. Motivación y objetivos 11 1.1. Motivación............................. 11 1.2. Objetivos ............................. 11 Motivation and goals 13 1.3. Motivation............................. 13 1.4. Goals................................ 13 Contenido de la memoria 15 Herramientas utilizadas en este trabajo 17 TeXworks ................................ 17 Brackets................................. 18 2. Webs y aplicaciones que contienen juegos para aprender a programar 19 2.1. Code.org.............................. 19 2.2. CodeMonkey ........................... 21 2.3. CodeForLife........................... 22 2.4. Codecombat............................ 24 2.5. CheckiO.............................. 26 2.6. Kodu................................ 27 2.7. RoboGarden............................ 29 2.8. Tynker............................... 30 2.9. Tabla comparativa. Ventajas y desventajas . . . . . . . . . . . 31 3. Lenguajes y herramientas que utilizan bloques visuales de programación 34 3.1. Scratch............................... 34 3.2. Snap, el legado de Scratch . . . . . . . . . . . . . . . . . . . . 36 3.3. BeetleBlocks ........................... 37 2 3.4. Tynker............................... 38 3.5. Code.org.............................. 39 3.6. GoogleBlockly .......................... 39 3.7. Tabla comparativa. Ventajas y desventajas . . . . . . . . . . . 40 4. Google Blockly 42 4.1. Características .......................... 42 4.2. Utilizar Blockly en un sitio web . . . . . . . . . . . . . . . . . 43 4.3. Toolbox .............................. 44 4.4. Fabricando nuevos bloques . . . . . . . . . . . . . . . . . . . . 46 4.4.1. Codicación de un nuevo bloque . . . . . . . . . . . . . 46 4.4.2. Bloque a partir de la Block Factory . . . . . . . . . . . 47 5. Frameworks para crear videojuegos con HTML5 y Javascript 50 5.1. Panda ............................... 50 5.2. Quintus .............................. 51 5.3. Phaser............................... 51 5.4. Kiwi................................ 52 5.5. Jaws................................ 52 5.6. Melon ............................... 53 5.7. Tabla comparativa. Ventajas y desventajas . . . . . . . . . . . 53 6. Phaser 56 6.1. ¾Dónde encontrar Phaser? . . . . . . . . . . . . . . . . . . . . 56 6.2. EstadosenPhaser ........................ 56 6.3. Sprites estáticos y animados . . . . . . . . . . . . . . . . . . . 57 6.4. Sistema de Colisiones . . . . . . . . . . . . . . . . . . . . . . . 59 6.5. Músicaysonidos ......................... 60 6.6. Juego realizado con Phaser: Peceras . . . . . . . . . . . . . . . 60 7. Combinando Google Blockly y Phaser 66 7.1. Bloques de código . . . . . . . . . . . . . . . . . . . . . . . . . 67 7.2. Bloques condicionales . . . . . . . . . . . . . . . . . . . . . . . 69 7.3. Creando bloques nuevos para un juego realizado en Phaser: Peceras............................... 70 3 8. Juegos realizados para este proyecto 77 8.1. Recolectando plátanos . . . . . . . . . . . . . . . . . . . . . . 77 8.1.1. Instrucciones del juego . . . . . . . . . . . . . . . . . . 77 8.1.2. Conocimientos didácticos que se desean transmitir . . . 78 8.1.3. Validaciones realizadas . . . . . . . . . . . . . . . . . . 78 8.2. Viajeencoche........................... 79 8.2.1. Conocimientos didácticos que se desean transmitir . . . 80 8.2.2. Instrucciones del juego . . . . . . . . . . . . . . . . . . 80 8.2.3. Validaciones realizadas . . . . . . . . . . . . . . . . . . 80 8.3. NochedeNavidad......................... 81 8.3.1. Conocimientos didácticos que se desean transmitir . . . 82 8.3.2. Instrucciones del juego . . . . . . . . . . . . . . . . . . 82 8.3.3. Validaciones realizadas . . . . . . . . . . . . . . . . . . 82 8.4. Peceras............................... 83 8.4.1. Conocimientos didácticos que se desean transmitir . . . 84 8.4.2. Instrucciones del juego . . . . . . . . . . . . . . . . . . 84 8.4.3. Validaciones realizadas . . . . . . . . . . . . . . . . . . 84 9. Conclusiones 86 Conclusions 89 Bibliografía 91 Información para la memoria . . . . . . . . . . . . . . . . . . . . . 91 Elementos utilizados para los juegos . . . . . . . . . . . . . . . . . . 93 4 Agradecimientos Este trabajo cierra una etapa muy importante de mi vida. Una etapa llena de positivismo en forma de esfuerzo, ilusión y ganas de aprender cosas nuevas. Aunque en numerosas ocasiones ha sido una cuesta con una gran pendiente muy difícil de subir donde han hecho aparición la frustración y la desesperación. Durante estos años he aprendido muchos conocimientos relacionados con la ingeniería, la informática y la programación. Pero precisamente las dicultades, a priori lo peor de todo, han sido las que me han proporcionado las enseñanzas más valiosas para el resto de mi vida. He aprendido a superarme a mí mismo, a darme cuenta de que soy capaz de sacar adelante lo que me proponga, a ser responsable y ambicioso. Y todo esto no habría sido posible sin las personas que me han acompañado en este camino. Quiero agradecer en primer lugar la ayuda que me han proporcionado todas las personas con las que he compartido estos años, alumnos y profesores. A mis compañeros con los que he compartido esta etapa y he compartido días de estudio, alegrías y tristezas. A los profesores que me han enseñado los conocimientos para superar cada una de las asignaturas. Y también mencionar a cualquier persona que me ha ofrecido su ayuda en la universidad siempre que lo he necesitado. Sé que toda la ayuda de todas estas personas me ha llevado a donde estoy ahora. También quiero agradecer a mi familia la oportunidad que me ha proporcionado de poder estudiar un grado universitario. Por su apoyo para que no me rindiera y siguiera adelante sin importar el gasto económico que eso supusiera. Además, quiero mostrar mi agradecimiento a mi tutor, Alberto de la Encima Vara. Me dio la oportunidad de realizar este Trabajo de Fin de Grado tan interesante y me dejó libertad para realizarlo a mi manera. También quiero agradecer sus palabras en el momento adecuado para afrontar este proyecto con éxito. 5 Por último, quiero agradecer a todas las personas que, fuera de la facultad, forman o han formado parte de mi entorno. Amigos de toda la vida, conocidos o personas con las que he perdido el contacto o se distanciaron de mí a lo largo de estos años, pero en su día fueron las más importantes. Esas personas que han creído en mí y me enseñaron a perseguir mis sueños. Muchas gracias a todos. Francisco. 6 Introducción Hace algunos años, parecía impensable que alguien que no fuera un gran informático pudiera aprender a manifestar sus ideas en lenguaje computacional. Pero en la actualidad, la constante evolución tecnológica ha expandido el uso de código informático a la mayoría de campos profesionales. La programación se ha convertido en una herramienta muy importante en la sociedad y prueba de ello es la aparición de multitud de lenguajes de programación aplicados a numerosos campos, a la vez que progresa el avance tecnológico. Ahora no solamente generan código los ingenieros e informáticos. Economistas, matemáticos, físicos o geógrafos son ejemplos de profesiones que han ido transformándose para poder satisfacer los nuevos retos que surgen hoy en día. La programación se ha convertido en un instrumento esencial en muchos de los caminos laborales. Pero no exclusivamente en este ámbito. Conscientes de este gran auge, numerosos países han introducido en sus escuelas asignaturas de fundamentos de la informática y la programación para que los niños puedan descubrir todo lo que ofrece este mundo y así poder elaborar sus primeros códigos. La sociedad se adentra cada vez más y más en la era digital. La tecnología avanza a pasos agigantados y con ello el deseo y la curiosidad de muchas personas por este mundo. Por ello hay una gran cantidad de gente que, a pesar de no dedicarse en su vida profesional a desarrollar código, ha encontrado en la programación un pasatiempo o una manera de dar forma a sus ideas. Existen multitud de posibilidades para empezar a aprender a programar. Tutoriales gratuitos o de pago, videos en plataformas multimedia, cursos online o presenciales, permiten que cualquier persona puede realizar su primer programa en el lenguaje deseado. A su vez, han aparecido páginas web que ofrecen divertidos juegos para que los niños aprendan a programar. Aprovechando que los niños se inician en el uso de aparatos electrónicos a una edad cada más temprana, estos juegos son una opción muy acertada para que los niños desde una tablet, un ordenador o un smartphone, puedan obtener algunos conocimientos sobre este tema. Aprender a dominar un lenguaje de programación está al alcance de todos. Y a partir de esas ideas surge este proyecto. En este trabajo se quieren desarrollar una serie de juegos que ayuden al jugador a aprender algunos conocimientos de programación. Estos juegos se solucionarán mediante bloques visuales de código que simularán algunos conceptos de programación. 7 Pero para realizar este proyecto primero hay que hacer un estudio sobre las diferentes herramientas que implementan bloques visuales de código, sobre las distintas maneras que hay de realizar un juego y sobre las distintas webs que ofrecen juegos para aprender a programar. Una vez se haya recopilado toda esta información podremos elegir las herramientas más adecuadas para realizar tanto los juegos como sus bloques de código visuales para crear sus soluciones además de conseguir que ambos interactúen entre sí. Así mismo, en esta memoria se pretende mostrar el proceso de creación de juegos con la nalidad de que el usuario aprenda algunos conocimientos de programación mediante la resolución de los mismos con bloques visuales de programación. Ya lo dijo Steve Jobs y parece que cada vez más personas son conscientes de ello: Everybody in this country should learn to program a computer, because it teaches you how to think. 8 Contenido de la memoria La memoria comienza con una primera parte donde se resumen los temas principales de los que se va a hablar en este proyecto. En primer lugar, se presenta una introducción que pone en contexto la temática de este trabajo, se exponen las motivaciones que han llevado a realizarlo, se muestran los objetivos que se quieren lograr y los conocimientos que se quieren transmitir al receptor. También se listarán las herramientas software que se han utilizado en este proyecto. En el siguiente capítulo se realiza un recorrido por las páginas webs más representativas que contienen juegos con los que el usuario puede recibir conocimientos sobre programación. De cada una se muestra una breve descripción, funcionamiento, diferencias y virtudes. En el tercer capítulo se darán a conocer algunas herramientas que nos permiten utilizar bloques visuales de código. Se analizarán sus ventajas e inconvenientes para así poder seleccionar la que más se adapta al proyecto que se quiere realizar. El cuarto capítulo hablará exclusivamente de Google Blockly, la tecnología de bloques visuales que hemos elegido para realizar este proyecto. Se enseñan todas sus posibilidades y lo necesario para implementar esta tecnología en un sitio web. Además, se explicarán dos maneras diferentes de crear nuevos bloques de código: codicándolos con Javascript y fabricándolos en la Block Factory. Necesitamos encontrar la mejor herramienta para poder realizar un juego. Actualmente existen diversos Frameworks en distintos lenguajes de programación que ayudan al usuario a realizar el diseño de su juego fácilmente. Con ello se consigue que toda la atención se centre en la lógica del juego. Es por ello que, en este quinto capítulo, se realizará un breve análisis de algunos de los Frameworks más famosos para realizar juegos con HTML y Javascript. Este capítulo ayudará a decantarnos por uno de los frameworks para realizar los juegos de este proyecto. Una vez hemos conocido diferentes Frameworks para realizar juegos en HTML, se escogerá Phaser para diseñar los juegos de este proyecto. El sexto capítulo 15 será una guía sobre el uso de Phaser. El objetivo es que, tras leer este capítulo, el usuario sea capaz de comenzar a crear su propio juego. En este séptimo capítulo se explica el proceso completo para realizar un juego cuya solución se realice mediante bloques visuales de código. Por ello habrá que unir los juegos realizados en Phaser con los bloques creados con Google Blockly. En el octavo capítulo de esta memoria se enseñarán los juegos que se han realizado para este proyecto. Se explicará el concepto del juego, los conocimientos de programación que se quieren simular en él y las validaciones realizadas en cada juego. La memoria termina recogiendo las conclusiones sobre el proyecto realizado. Un resumen general de lo aprendido gracias a la elaboración del trabajo, las dicultades encontradas durante su desarrollo y algunas ideas de trabajo futuro que se podrían realizar a partir de este proyecto, así como la bibliografía utilizada. 16 Herramientas utilizadas en este trabajo Este trabajo está formado por dos partes, la memoria y la aplicación. Esta memoria se ha realizado mediante el lenguaje LaTeX en el editor TeXworks. La aplicación se ha programado con ayuda del editor de código Brackets. A continuación, se detallan las ventajas de estas dos herramientas y el por qué se han utilizado para realizar este trabajo frente a otras: TeXworks Es un editor LaTeX [9] [10] [11] de código abierto. LaTeX es un lenguaje que permite la construcción de textos. Está basado en TeXshop, otro editor LaTeX, pero TeXworks es más simple. Ventajas: Gratuito. Código abierto. Multiplataforma Compatible con Unicode. Autocompletado. Permite visualizar el PDF resultando y se actualiza en tiempo real mientras se edita el código. Interfaz simple y con funcionalidades básicas. 17 Brackets Es un editor de código [12] [13] para trabajar con lenguajes web como son HTML, CSS y Javascript. Está desarrollado por Adobe Systems bajo la licencia MIT. Ventajas: Código abierto. Gratuito. Permite visualizar el resultado en tiempo real mientras se edita el código. Multiplataforma. Soporta múltiples lenguajes de programación. Multilenguaje. Gran cantidad de plugins que aumentan sus funcionalidades. Simplicidad. Múltiples variantes para personalizar el entorno. 18 2. Webs y aplicaciones que contienen juegos para aprender a programar El objetivo de este proyecto consiste en elaborar una serie de juegos que transmitan nociones de programación. Antes de realizarlos y para tener ideas sobre lo que ya existe en el mundo real, se van a analizar algunos de los juegos de este tipo ya existentes. En este capítulo [1] se van a presentar distintas webs que contienen juegos que permiten al usuario aprender a programar. Estas webs son Code.org, CodeMonkey, Code For Life, Codecombat, Check iO, Kodu, Robogarden y Tynker. 2.1. Code.org Tal y como se ha comentado en la introducción de esta memoria, en los tiempos actuales la programación es un pilar fundamental en numerosos trabajos de nuestra sociedad. Cada vez existen más campos profesionales en los que se demandan conocimientos mínimos de programación. Se prevé que al menos en Estados Unidos los puestos de empleo relacionados con programación se extenderán a un millón y medio. Es por ello que surge la idea de que cualquier persona debería aprender a programar. Una buena solución a ello sería impartir estas enseñanzas como asignatura en los colegios o institutos de todo el mundo. A partir de esta idea, nace en Estados Unidos la organización no gubernamental Code de la mano de los hermanos iraníes Ali Partovi y Hadi Partovi. Code ha crecido inmensamente a lo largo de los años y cuenta con un gran número de estrellas para promocionarlo: desde grandes nombres de la informática como son Bill Gates o Mark Zuckerberg, músicos como Enrique Iglesias o Will.i.am, deportistas como la tenista Serena Williams o el jugador de la NBA Chris Bosh, hasta importantes ilustres como expresidente de Estados Unidos Barack Obama o el cientíco Stephen Hawkings Todo este gran plantel tiene el objetivo de acercar la programación al mayor número de personas posibles mediante diversas plataformas. Y una de estas plataformas es Code.org [25]. Code.org es un sitio web que enseña a programar a través de sencillos de juegos. Es una de las webs más completas de este tipo pues contiene un extenso catálogo de cursos, videos y retos en forma de juegos para diversas edades y niveles. Está orientada a la enseñanza de la programación y por 19 tanto, para que pueda ser utilizada tanto por educadores, como por alumnos, como por personas anónimas. Los retos y cursos de Code.org se pueden utilizar sin necesidad de registro pero si se quiere tener un seguimiento de la propia cuenta o de un alumno se debe crear una cuenta. Existen dos tipos de cuentas: alumno y profesor. La nalidad del tipo de cuenta profesor es poder crear grupos de alumnos y asignarles uno o más cursos. De esta manera, profesores (o padres) tienen la posibilidad de realizar un seguimiento de cada uno de los alumnos para observar su progresión. La cuenta de tipo alumno sirve para saber cual fue el último reto o curso que realizamos o llevar un seguimiento del progreso personal. Code.org utiliza bloques visuales de Google Blockly para codicar la solución de los distintos juegos de los módulos que constituyen cada curso (de forma muy similar al objetivo que se pretende con este trabajo de n de grado). Estos juegos son muy atractivos para el público más joven, pues Code.org cuenta con licencias muy aclamadas como Minecraft, Plantas vs Zombies o Frozen de Disney. También permite crear nuestros propios juegos y aplicaciones utilizando los bloques visuales de código. En el capítulo 3, sección 3.5 se aportará más información sobre el editor de Code.org. 20 Figura 1: Ejemplo de nivel de Codeorg. Imagen descargada de http://i0.wp.com/robwirving.com 2.2. CodeMonkey Como si de un juego de Code.org se tratara, CodeMonkey [2] nos presenta una interesante manera de aprender a programar desde un navegador web. Un simpático mono será el protagonista de numerosos niveles que el usuario deberá ir solucionando. El objetivo de cada nivel será recoger todos los plátanos del mapa, desplazándonos hacia ellos, cruzando puentes o ríos sobre una tortuga a la que también habrá que programar sus movimientos mediante simples instrucciones. En cada nivel, se mostrará abajo las posibles acciones a realizar, pero no será mediante bloques visuales, sino mediante código escrito. Por ejemplo, en el primer nivel, el más sencillo de todos, se muestra al personaje y al plátano a recoger a una cierta distancia. El usuario en este caso, tendrá que escribir la instrucción step y el número de pasos a dar hasta el objetivo para completar el nivel. En niveles más avanzados, habrá que escribir instrucciones como turn left , turn right (para girar a la 21 izquierda o a la derecha) o turtle.step para mover la tortuga y que así pueda llevar al protagonista a su objetivo. CodeMonkey es una de las herramientas para aprender a programar algo más diferente, pues se aleja de la idea de la programación por bloques, obligando al usuario a tener que escribir sencillas líneas de código. Pero su mayor desventaja es que no es gratuito pues cuesta alrededor de 30 dólares al año. Figura 2: Ejemplo de nivel de CodeMonkey. Imagen descargada de https://angel.co/codemonkey-studios/jobs 2.3. Code For Life Code For Life [27] es una iniciativa sin ánimo de lucro creada en el año 2014 en Reino Unido por los voluntarios de Ocado Technology. Su objetivo consiste en apoyar a maestros y estudiantes para llevar la programación al mayor número posible de personas. La idea surgió tras la aparición de un nuevo plan de estudios que contenía ciencias informáticas. La mayoría de los 22 institutos de Reino Unido no tenían herramientas sucientes para proporcionar la enseñanza de programación a sus alumnos, y eso pretende ser Code For Life. Una herramienta que permita a los profesores enseñar fácilmente y a los alumnos aprender de forma divertida. Se caracteriza por su código abierto. Cualquier persona que quiera contribuir voluntariamente puede hacerlo de diferentes maneras. La primera es que cualquiera que haya utilizado su web envíe comentarios sobre Code For Life, pues a sus desarrolladores les interesa bastante las opiniones de sus usuarios. La segunda manera de aportar al proyecto es desde su Github. Cualquier desarrollador puede intentar implementar nuevas funciones o únicamente proponerlas para que otros las puedan llevar a cabo. Esa es la esencia de Code For Life pues cada tipo de persona, sea programador, alumno o profesor puede formar parte de este proyecto de una u otra manera. En su web podemos encontrar juegos cuya resolución requiere utilizar bloques visuales Blockly. Al igual que en Code.org existen cuentas para profesores y para alumnos. Para los alumnos se proporcionan juegos de aprendizaje. Actualmente solamente existe el juego Rapid Router, en el que debemos guiar a un camión a lo largo de una carretera hasta su destino. Para ello habrá que escoger los bloques correctos. Pero no solamente hay bloques para mover el camión. También es necesario utilizar bucles y condicionales, por ejemplo, para poder parar el camión mientras el semáforo esté en rojo, habrá que utilizar un bucle while para parar el camión hasta que el semáforo se ponga en verde y permita el paso. En los niveles más avanzados se encuentra una de las mejores características que posee esta web. Al posicionar los bloques que se quieren utilizar sobre el panel de bloques se muestra la traducción en código Python para que el alumno aprenda que hacen realmente dichos bloques. Realmente con ello se garantiza que el alumno acabará los cursos de la web con algunas nociones de Python y así poder dar el salto a la codicación. La web también contiene un editor de niveles sencillo de utilizar, pero con muchas opciones que permiten crear un recorrido propio para el camión pudiendo diseñar la carretera, los obstáculos y los bloques Blockly que se deben utilizar para resolverlo. Para las cuentas de profesores, se pueden organizar grupos de alumnos para hacer un seguimiento, ver sus puntuaciones e incluso existen vídeos para guiar al mentor y proporcionarle un modelo de enseñanza para sus pupilos. Además de cara al futuro, se está implementando un nuevo juego llamado AI:MMO. Este juego destinado a niños de edades comprendidas entre 13 y 16 años, será un juego multijugador en línea orientado a 23 enseñar conocimientos de Python e Inteligencia Articial. Figura 3: Ejemplo de nivel de Code For Life. Imagen propia 2.4. Codecombat Una de las opciones más completas y atractivas para aprender a programar. Codecombat [28] nos presenta un interesante juego de rol realizado en HTML5 y CoeeScript. Está formado por numerosos niveles y en cada uno de ellos se aprenderá y se utilizará código Python y código Javascript. Permite elegir un héroe entre los 16 que se ofrecen. Cada uno de los personajes tiene su propio tipo como puede ser guerrero a corta distancia, a larga distancia o mago, sus propias estadísticas de ataque, salud y velocidad y sus propias armas y habilidades. Además, la dicultad del juego será más fácil o difícil según el protagonista que se haya escogido. Algunos héroes no son gratuitos y requieren una suscripción mensual por 10 dólares o una única suscripción de 100 dólares para poder usarlos siempre. Una vez elegido, antes de cada nivel podremos personalizarlo con ropa y objetos que iremos consiguiendo a lo largo del juego. Estos objetos proporcionan puntos extra de ataque, salud o velocidad, pero también nuevas acciones (que se traducen en una función de programación asociada al personaje). También podremos comprar algunos objetos pagando con las gemas que conseguiremos a lo largo del juego. Cada uno de los desafíos plantea un punto origen desde el cual habrá que llegar al 24 Figura 8: Tynker. Imagen descargada de https://www.tynker.com 2.9. Tabla comparativa. Ventajas y desventajas En la tabla 1 se van a resumir las virtudes y defectos entre las webs presentadas. En las las se muestra cada web y en las columnas el nombre, sus virtudes y sus defectos. Desde mi punto de vista me ha gustado mucho recopilar información sobre estas webs porque me ha parecido una manera muy interesante de que los usuarios puedan obtener conocimientos de programación. De hecho, es muy probable que utilice alguna de ellas en un futuro como CheckiO o Codecombat. La web más completa y mejor organizada para mí es Code.org. Cuenta con un editor para poder realizar creaciones propias, retos para solucionar mediante Blockly, cuentas tipo profesor y alumno además, de licencias muy atractivas. También me parece la más apta para los más jóvenes y principiantes. Para usuarios que tengan conocimientos de programación, CodeMonkey, CheckiO y Codecombat me parecen las más didácticas pues no utilizan bloques visuales, sino que hay que tener una uidez a la hora de editar código en los retos más avanzados. En cuanto a nivel de diversión, las webs que más me han entretenido a la hora de realizar este recorrido han sido sin duda Robogarden y Codecombat. De Robogarden me impresionaron 31 mucho sus grácos en tres dimensiones y su interfaz. De Codecombat me ha gustado todo pues, es un juego mi completo y personalizable y a mí realmente me entretuvo tanto que solucioné bastantes niveles y seguiré haciéndolo en un futuro. Además, al utilizar código directamente y ser tan entretenido me parece muy adecuado para gente que como yo, está realizando estudios de programación. 32 Nombre Virtudes Defectos CodeMonkey Aprendizaje directo pues se utilizan líneas código para la resolución de los juegos. Poco apto para novatos pues no hay bloques de código. No es gratuito. Code.org Multitud de retos para solucionar con Blockly. Varios tipos de cuentas. Licencias muy atractivas para los más jóvenes. Editor propio. Aparantemente no se pueden exportar todos los tipos de creaciones realizadas por el usuario. Code For Life Aprendizaje mediante Blockly pero al terminar los juegos muestra su traducción Python. Editor propio. Varios tipos de cuentas. Cualquier persona puede aportar al proyecto. Actualmente solo hay un tipo de juego disponible. Codecombat Uso de código Javascript y Python. Un completo y verdadero juego de rol, subida de niveles, personalización... Algunos contenidos son de pago, aunque son complementarios. No utiliza bloques visuales de código. CheckiO Uso de código Javascript y Python. Es el juego que más cerca está de enfrentar al usuario con un código de programación real. Buen seguimiento de estadísticas por parte del usuario. No utiliza bloques visuales de código. Se necesitan conocimientos previos de programación. No todos los niveles son gratuitos. Kodu Entorno tridimensional. Interfaz sencilla para los usuarios más jóvenes. Requiere instalación previa. Entorno muy limitado. Robogarden Uso de Google Blockly. 680 retos. Entorno tridimensional muy atractivo. Requiere instalación previa. Tynker Permite usar tanto bloques visuales como código Javascript, Python o HTML. Múltiples tipos de cuenta. Editor propio Contenidos de pago. Tabla 1: Comparación de Frameworks para crear juegos. 33 3. Lenguajes y herramientas que utilizan bloques visuales de programación En el apartado anterior se ha realizado un análisis sobre las webs que contienen juegos para aprender a programar. Algunas de ellas utilizan bloques visuales de código. En este apartado [25] [20] vamos a hacer un análisis de varias herramientas que nos permiten desarrollar nuevas aplicaciones con esos bloques de programación y no solamente solucionar juegos ya creados por la propia plataforma. 3.1. Scratch El grupo Lifelong Kindergarten de MIT fue el responsable de Scratch [5] [6], uno de los primeros pioneros en utilizar la programación visual por bloques. Su versión ocial apareció en 2005 tras varias versiones de test desde el año 2002. En 2015 se lanzó una actualización llamada Scratch 2.0. y en agosto de 2018 salió la última versión existente, Scratch 3.0. Es tan popular que se utiliza en numerosos cursos y escuelas de todo el mundo como herramienta de aprendizaje. Su objetivo consiste en poder crear animaciones y juegos mediante una interfaz sencilla, pero a la vez completa, sin que el usuario tenga previamente conocimientos en programación. Para ello se nos proporcionan una serie de elementos a los que dotaremos de acciones o movimientos mediante los bloques. Como si de un rompecabezas se tratara, se irán concatenando los bloques de acciones para obtener el comportamiento deseado de una manera similar a lo visto en Google Blockly. Estos bloques están divididos en varias secciones: Movimiento: permite desplazar un elemento sobre la pantalla. Apariencia: permite cambiar las propiedades de los elementos como su tamaño o color. Sonido: con este tipo de bloques podremos reproducir audios. 34 Lápiz: permite dibujar sobre la pantalla. Datos: permite declarar variables y darles valor. Eventos: los eventos permiten lanzar una determinada acción sobre un elemento o el entorno. Control: permite utilizar simplicadamente los típicos bucles que se encuentran en cualquier lenguaje de programación como los bucles If o los bucles For. Operadores: permiten realizar operaciones lógicas y matemáticas. Sensores: se utilizan para que los elemento interactúen entre ellos o con el entorno. La mayor ventaja que presenta Scratch es la posibilidad de compartir las creaciones vía Web en su extensa comunidad virtual y descargar los proyectos de otras personas para modicarlos o ampliarlos. Cualquiera puede escoger un proyecto publicado en su web y abrirlo en su propia interfaz para poder tener su código de bloques. Otra ventaja es la posibilidad de utilizarlo desde la aplicación de escritorio o desde el navegador mediante su web. Además, es software libre y válido para todos los sistemas operativos. 35 Figura 9: Scratch. Imagen descargada de https://www.paviles.net 3.2. Snap, el legado de Scratch El legado que ha dejado Scratch ha sido muy signicativo y prueba de ello son las numerosas herramientas que han surgido derivadas de él, extendiendo algunas de sus funcionalidades. Uno de los sucesores de Scratch más conocidos es Snap [3] [4]. Snap implementa la mayoría de funcionalidades de su progenitor y proporciona algunas mejoras. Está creado con Javascript y HTML5 para ser compatible con todo tipo de navegadores por lo que es más versátil. Además, se ha mejorado la capacidad para crear bloques nuevos, siendo una mejor opción que Scratch si lo que se quiere es añadir funcionalidades nuevas a los bloques visuales. Otra mejora es la posibilidad de agrupar variables por listas y así poder darles un comportamiento en conjunto. Por ello Snap es más recomendado para usuarios que ya tienen una cierta experiencia en Scratch y quieren crear proyectos más extensos. 36 Figura 10: Snap. Imagen descargada de https://snap.berkeley.edu/ 3.3. Beetle Blocks Scratch y Snap tienen una gran limitación que es la posibilidad de realizar proyectos en mundos de tres dimensiones. Beetle Blocks [34] soluciona esa carencia y aunque es muy similar a Scratch, incorpora numerosos bloques para poder incorporar una coordenada Z. Con ellos se puede crear cualquier cosa que salga de la imaginación del usuario de forma más realista. Un uso muy útil que se le puede dar es crear el borrador en tres dimensiones de algún objeto que se quiere reproducir en la realidad. En la web ocial podemos encontrar numerosos ejemplos y códigos de otros usuarios para usarlos a modo de guía o para modicarlos y usarlos como punto de partida. No requiere instalación pues el entorno está integrado en su web y es totalmente gratuito. 37 Figura 11: Beetle Blocks. Imagen descargada de scoop.it 3.4. Tynker En el capítulo 2, sección 2.8, hemos hablado de Tynker como web que contiene juegos para aprender a programar. Pero Tynker dispone de un completo editor para materializar cualquier idea que se le ocurra al usuario utilizando bloques visuales. Se pueden crear elementos, agregar sonidos, música y escenarios y realizar interacciones entre ellos mediante los bloques. El mayor problema del editor de Tynker lo encontramos en la exportación pues, aunque se pueden compartir las creaciones, no se pueden exportar de la interfaz de Tynker ni acceder al código interno. 38 3.5. Code.org También hemos hablado de Code.org en el capítulo 2, sección 2.1. Pero al igual que Tynker, Code.org dispone de un potente editor para poder realizar juegos y aplicaciones mediante bloques visuales. Inicialmente se optó por esta herramienta para realizar los juegos de este Trabajo de Fin de Grado, pero nalmente se comprobó que, aunque los juegos se pueden compartir e introducir en sitios web, aparentemente no se puede acceder al código interno de ellos y entonces no se podrían mover dichos juegos mediante bloques visuales de código. 3.6. Google Blockly Google Blockly [21] [22] [23] es un lenguaje de programación mediante bloques visuales creado por Google. Permite al usuario elaborar código Python, Javascript o PHP mediante los bloques para así no cometer errores de sintaxis. Es la base de multitud de webs mencionadas anteriormente como Code.org, Code For Life o RoboGarden. Cuenta con algunos juegos de ejemplo para solucionar por medio de bloques llamados Blockly Games. Permite al usuario crear cualquier tipo de bloques nuevos para mover con ellos cualquier tipo de código. Tanto el entorno Blockly como los Blockly Games se pueden descargar e implementarlos en otro proyecto combinando sus códigos internos con el código del proyecto. Por ello es la tecnología ideal para poder mover cualquier código ya hecho mediante los bloques y la que se ha elegido para realizar los juegos de este Trabajo de Fin de Grado. Se hablará extensamente de Google Blockly en el capítulo 4. 39 Figura 12: Ejemplo de nivel de Blockly Games. Imagen descargada de Blockly Games 3.7. Tabla comparativa. Ventajas y desventajas En la tabla 2 se van a mostrar las principales ventajas y desventajas de las herramientas que se han presentado. En las las se representa cada herramienta y en cada columna el nombre, sus ventajas y sus desventajas. En mi opinión me han parecido herramientas muy interesantes pues sirven para crear cualquier cosa que uno pueda imaginar con ayuda de los bloques, dentro de las limitaciones de cada una. Para este proyecto he elegido Google Blockly porque es la herramienta que me permite crear bloques para mover un código externo, en este caso los juegos. No quería realizar el juego y los bloques con la misma herramienta sino unir dos tecnologías diferentes. Me parece una herramienta muy útil pues con ella se podría mover cualquier código de programación existente mediante los bloques y no solamente códigos que componen un juego. 40 Type es el nombre que se le da al bloque y por el que será identicado dentro de nuestro código para poder operar con él. Message0 es el nombre que aparecerá en la toolbox para ese bloque. Es el nombre que se nos muestra por pantalla cuando se quiere utilizar ese bloque. Colour denirá el color del bloque. Ya está creada la parte externa del bloque. Ahora hay que denir la funcionalidad de este bloque. Para ello se utilizará la siguiente función: Blockly . JavaScript [ ' type ' ] = function ( block ) { // Aquí se escribe el código Javascript que ejecutara el bloque . }; Esta función recibirá como parámetro el bloque al que se le quiere otorgar la funcionalidad y para ello le pasaremos como argumento el nombre como se denió previamente en type . Una vez realizado todo este proceso, solamente faltaría por agregar el bloque a la toolbox tal y como se explicó en el apartado anterior y ya podremos empezar a utilizarlo en el panel de bloques para codicar nuestro propio programa. 4.4.2. Bloque a partir de la Block Factory Otra manera de crear los nuevos bloques es desde un editor de desarrollo web llamado Blockly Developer Tools . Esta herramienta se encarga de simplicar algunas tareas de conguración, entre ellas, el desarrollo de nuevos bloques desde la Block Factory . De esta forma, mediante una interfaz se podrá denir la estructura y la funcionalidad sin tener que escribir el código manualmente. Se compone de cuatro secciones: 1. Un editor Blockly. 2. Un cuadro de vista donde se puede ver el aspecto visual del bloque creado. 3. Una vista del código que permite generar el bloque. Es el código de la parte estructural. 47 4. El código resultante de la ejecución de ese bloque. Es el código de la parte funcional. Tras ponerle un nombre al nuevo bloque se deben utilizar las distintas opciones que hay a la izquierda del editor Blockly para empezar a elaborarlo: Colour: con esta opción se puede elegir entre 360 grados de tonalidad de colores para nuestro bloque. Input: permite asignarle una o más entradas a nuestro bloque. Cada una de ellas debe tener un nombre. También cada bloque puede tener conexiones laterales, superiores o inferiores para interactuar con otros bloques. Field: permiten al usuario agregar campos de entrada al bloque. Por ejemplo, una entrada de texto, de ángulos (de 0 a 360 grados), un campo desplegable con distintas opciones o una variable. Type: asigna un tipo al bloque de manera que solo aceptara entradas del tipo denido. Puede ser Any (cualquier tipo), Boolean, String, Number, Array o se puede crear un nuevo tipo con la opción Other. Una vez desarrollado el bloque solamente hay que copiar el código de la parte estructural y de la parte funcional en nuestro Javascript y, añadir el nuevo bloque a la toolbox de nuestro HTML principal. La interfaz de la Block Factory Block Factory se muestra en la gura 15. 48 Figura 15: Entorno Blocky 49 5. Frameworks para crear videojuegos con HTML5 y Javascript Para desarrollar un videojuego existen algunos frameworks que facilitan al usuario la elaboración del mismo. Existen multitud de frameworks para realizar videojuegos en HTML y Javascript. Para poder realizar los juegos de este proyecto necesitaremos utilizar uno de estos frameworks. Por este motivo, en este capítulo se hablará de algunos de los frameworks más conocidos y se analizarán sus ventajas y desventajas con el n de encontrar el más adecuado para nuestro proyecto. En primer lugar se van a denir algunos conceptos que se utilizarán durante el análisis de estos frameworks: Sprite: es una imagen que representa un elemento del juego, ya sea un personaje o un objeto. Spritesheet: conjunto de imágenes de un mismo tipo que alternándose entre ellas forman una animación. Canvas: es un elemento que nos permite generar grácos y animaciones por medio de Javascript. WebGL: característica de Javascript que mejora las capacidades grá- cas que puede mostrar un navegador web. 5.1. Panda Es uno de los frameworks [14] más potentes que existen para fabricar juegos con HTML y Javascript. A nales de 2017 se lanzó una nueva versión nal llamada Panda 2. Tiene compatibilidad con todos los sistemas operativos ya sean Windows, Linux y Mac. Cuenta con un sistema de animaciones y de físicas de colisión propio. Trae incorporado un potente editor de código de Javascript donde se puede realizar el código del juego. Este editor facilita la codicación pues cuenta con múltiples características como autocompletado, ejecución en vivo mientras se escribe el código, selección múltiple o personalización a medida del usuario. Además, hay que destacar como una de sus mejores virtudes, su panel de depuración. En él se puede ejecutar el código paso a paso y consultar la información sobre el estado de sus variables y de los elementos que lo componen, así como las interacciones entre ellos y de esta forma poder encontrar posibles errores o comportamientos incorrectos. 50 También cuenta con una aplicación llamada Panda Remote con la que podremos conectar un dispositivo (ya sea Android, iOS, incluso Xbox One) y así seguir en tiempo real los cambios que se generan en el proyecto. Es posible incorporar numerosos plugin desde su web ocial y que aumentaran las capacidades de este framework. Por ejemplo, existen plugin que nos permiten hacer juegos para Facebook, añadir un gamepad para poder controlar nuestro juego desde un mando o para agregar físicas y grácos en tres dimensiones al juego. El gran inconveniente que presenta Panda es la disponibilidad de una versión de pago y una de prueba. La versión de prueba nos permitirá utilizar la mayoría de sus funciones descritas anteriormente, pero si queremos exportar los juegos generados directamente en archivos con extensión IPA y APK para así publicarlos en el store de Android y Apple o utilizar las plantillas de juegos ya completados que están disponibles en la web de Panda, se debe comprar la versión completa. Esta versión completa tiene un precio de 50 dólares al año o 200 dólares si se quiere tener siempre disponible. 5.2. Quintus Quintus [16] [17] es una librería Javascript que permite crear juegos en dos dimensiones mediante lenguaje HMTL para navegadores, teléfonos móviles o incluso televisiones Smart. Tiene su propio sistema de colisiones y físicas. Una de sus principales características es la posibilidad de utilizar herencia entre sus componentes como si de programación orientada a objetos se tratase. Esta característica es útil cuando, por ejemplo, se quiere declarar un nuevo sprite y dotarlo de propiedades que ya posee un sprite ya creado. Esto favorece a la reutilización, ordenación y limpieza del código. Otra gran característica es la posibilidad de crear los niveles en archivos JSON separados y así solamente cargar los niveles que se quieran utilizar fácilmente desde la función de carga. Otro aspecto destacable en Quintus es la utilización de elementos JQuery. 5.3. Phaser Phaser es un framework basado en Pixi.Js que permite desarrollar juegos en HTML5. Es capaz de soportar tanto WebGL como Canvas. La creación de juegos se desarrolla mediante estados que permiten cargar sprites, animaciones y elementos de manera muy simple. A esta sencillez en la carga de 51 elementos hay que sumar que Phaser es uno de los frameworks más usados pues en la red existe una gran cantidad de documentación, ejemplos y guías. Por estos motivos se ha elegido Phaser como la herramienta adecuada para realizar nuestros juegos de este Trabajo de Fin de Grado. En el capítulo 6 se hablará más extensamente de Phaser y se enseñarán algunas instrucciones básicas para comenzar a desarrollar un juego. 5.4. Kiwi Kiwi [19] es un framework que se utiliza para poder hacer juegos en dos dimensiones para navegadores, sistemas iOS y sistemas Android. Utiliza Canvas y WebGL. Tiene bastantes similitudes con Phaser. Se pueden crear grupos y subgrupos de objetos para poder compartir propiedades y comportamientos de dichos objetos. La forma de añadir al juego elementos como imágenes, sonidos y demás recursos necesarios y su sistema de codicación de estados es muy similar al de Phaser. Los juegos hechos con Kiwi tienen un estado 'Create' donde se declaran las variables y se denen las imágenes, sonidos y demás elementos que se van a utilizar en el juego y un estado 'preload' donde realizan acciones como la carga de esas imágenes en forma de sprites, se les asignan propiedades o se cargan los fondos que van a usar. 5.5. Jaws Inspirada en una librería de Ruby llamada Chingu, Jaws [18] es una librería utilizada para desarrollar juegos en dos dimensiones en lenguaje HTML5. Se puede utilizar como una librería independiente. Como algunos de los otros frameworks vistos en esta misma sección, Jaws utiliza diferentes estados que seccionan algunas funciones del código y el uso de SpriteSheets para realizar animaciones como en Phaser. También comparte con Phaser la facilidad para denir sprites y asignarles teclas para su movimiento. Una de sus principales de ventajas es la posibilidad de utilizar una versión del framework que trae su código en diferentes fragmentos. Esta versión sirve para poder depurar errores pues se carga sección a sección. También dispone de una versión reducida que contiene el Closure Compiler de Google, permitiendo que el código se ejecute de una manera más ecaz y con mayor velocidad. Además es bastante útil para los más principiantes pues si, por ejemplo, al usuario se le olvida 52 realizar la acción de refresco del juego, Jaws lo refrescará automáticamente. 5.6. Melon Melon [33] es otro framework que se utiliza para crear juegos en dos dimensiones en HTML5. Utiliza WebGL y WebAudio. Es compatible con todos los navegadores existentes y en su propia web se puede comprobar el estado de esa compatibilidad con cada uno de ellos. Se puede utilizar como una librería independiente. Utiliza el algoritmo SAT de colisión basado en polígono para su sistema de colisiones. Incluye funciones exclusivas para facilitar el tratamiento de matrices y vectores. Como se ha visto en otros frameworks también permite agrupar objetos para aplicar propiedades o funciones a la vez a todos ellos y el uso de spritesheets para realizar animaciones. Otra gran ventaja es la posibilidad de integrar mapas en formato JSON o XML. Melon también ofrece todo tipo de compatibilidad con periféricos externos como ratón, teclado e incluso gamepad para poder manejar el juego. 5.7. Tabla comparativa. Ventajas y desventajas A continuación se muestran las tabla 3 y 4 que resumen las ventajas y desventajas de los frameworks presentados. En las las se representa cada framework y en cada columna el nombre, sus principales ventajas y sus principales desventajas. En mi opinión no hay ningún framework mejor que otro sino que depende de lo que se quiera crear con él. Por eso en algunos no ha sido posible hablar de una desventaja frente a los demás. En este proyecto se escogió Phaser por su desarrollo medante estados y por el gran número de guías y ejemplos que existen en internet. Estas características me parecieron ideales para realizar los juegos de este proyecto con él aunque se podrían haber realizado con alguno de los otros. De hecho, en las conclusiones nales se plantea como una idea de trabajo futuro. 53 Nombre Ventajas Desventajas Panda Cuenta con un editor completo con funcionalidades como autocompletado o personalización. Posee un panel de depuración. Numerosos plugin que amplían la funcionalidad del framework. La versión completa con todas las funcionalidades es de pago Quintus Utiliza propiedades de herencia para poder reutilizar el código. También se pueden crear juegos para móviles y televisores Smart. Posibilidad de crear los niveles en JSON separados. Más complejo que Scratch, puede ser más inaccesible para usuarios poco experimentados. Phaser Muy fácil de usar. Instrucciones muy simples. Numerosa documentación, guías y comunidades. Desarrollo del juego por estados bien estructurada. No se ha encontrado ninguna desventaja notable Kiwi Sirve también para hacer juegos Android e iOS. Uso de estado. No se ha encontrado ninguna desventaja notable. Melon Permite utilizar periféricos. Facilidad para tratar matrices y vectores. Limitado para realizar juegos más complejos. Tabla 3: Comparación de Frameworks para crear juegos. 54 Nombre Ventajas Desventajas Jaws Uso de estados e instrucciones simples para cargar elementos del juego. No se ha encontrado ninguna desventaja notable. Versión del framework en distintas secciones para depurar. Melon Permite utilizar periféricos. Facilidad para tratar matrices y vectores. Limitado para realizar juegos más complejos. Tabla 4: Comparación de Frameworks para crear juegos. 55 6. Phaser Phaser [31] [32] es un framework de código abierto que permite crear juegos en HTML5. Proporciona una serie de herramientas (carga y animación de sprites, precarga de archivos, sistema de colisiones, movimiento por teclado, etc.) que permiten al usuario agilizar el proceso de desarrollo de un juego. Este desarrollo puede ser para navegadores de escritorio o navegadores móviles. Soporta Canvas y WebGL. Phaser fue ideado por Richard Davey, un apasionado desarrollador de videojuegos de 36 años. Para llevar a cabo el famoso framework, Richard se basó en Pixi.js. Su pasión por este sector y su deseo que de que muchas personas pudieran hacer reales sus ideas le llevaron a realizarlo. Es mantenido por una extensa comunidad. 6.1. ¾Dónde encontrar Phaser? Phaser se puede descargar en su web https://phaser.io/ o en su Github. Una vez descargado el archivo Javascript que contiene el Framework, sólamente hay que añadirlo al HTML propio: < script src = " phaser . min . js " > </ script > A partir de ahí ya es posible utilizar toda la funcionalidad que ofrece y comenzar a crear cualquier juego. 6.2. Estados en Phaser Phaser está basado en una sucesión de estados. Cada estado proporciona una funcionalidad a la aplicación, ya sea la precarga del juego y sus archivos, la inicialización del juego, cada uno de los niveles que componen el juego o el menú inicial. Dentro de cada estado existen una serie de funciones que ayudan a realizar las tareas básicas necesarias. Algunos ejemplos de funciones son: Init: estado inicial del juego. Es el primer estado en cargar al iniciarse el juego. Preload: en este estado se cargan los recursos necesarios del juego como las imágenes de los sprites para los personajes, los fondos de pantalla o el audio. 56 pez3 = this . add . sprite (350 , 415 , ' peces ') ; pez3 . scale . setTo (1.3) ; pez3 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez3 . animations . play ( ' pezazul ') ; pez4 = this . add . sprite (400 , 415 , ' peces ') ; pez4 . scale . setTo (1.3) ; pez4 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez4 . animations . play ( ' pezazul ') ; pez5 = this . add . sprite (450 , 415 , ' peces ') ; pez5 . scale . setTo (1.3) ; pez5 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez5 . animations . play ( ' pezazul ') ; pez6 = this . add . sprite (500 , 415 , ' peces ') ; pez6 . scale . setTo (1.3) ; pez6 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez6 . animations . play ( ' pezazul ') ; pez7 = this . add . sprite (375 , 475 , ' peces ') ; pez7 . scale . setTo (1.3) ; pez7 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez7 . animations . play ( ' pezazul ') ; pez11 = this . add . sprite (40 , 120 , ' peces ') ; pez11 . scale . setTo (1.3) ; pez11 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez11 . animations . play ( ' pezazul ') ; pez11 . alpha = 0; pez12 = this . add . sprite (80 , 120 , ' peces ') ; pez12 . scale . setTo (1.3) ; pez12 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez12 . animations . play ( ' pezazul ') ; pez12 . alpha = 0; pez13 = this . add . sprite (120 , 120 , ' peces ' ) ; pez13 . scale . setTo (1.3) ; pez13 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez13 . animations . play ( ' pezazul ') ; pez13 . alpha = 0; pez21 = this . add . sprite (365 , 140 , ' peces ' ) ; pez21 . scale . setTo (1.3) ; pez21 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez21 . animations . play ( ' pezazul ') ; pez21 . alpha = 0; pez31 = this . add . sprite (600 , 120 , ' peces ' ) ; pez31 . scale . setTo (1.3) ; pez31 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; 63 pez31 . animations . play ( ' pezazul ') ; pez31 . alpha = 0; pez32 = this . add . sprite (640 , 120 , ' peces ' ) ; pez32 . scale . setTo (1.3) ; pez32 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez32 . animations . play ( ' pezazul ') ; pez32 . alpha = 0; pez33 = this . add . sprite (680 , 120 , ' peces ' ) ; pez33 . scale . setTo (1.3) ; pez33 . animations . add( ' pezazul ' ,[0 ,1 ,2] , 10 , true ) ; pez33 . animations . play ( ' pezazul ') ; pez33 . alpha = 0; music = juego . add . audio ( ' song ') ; music . play () ; } La última función que se necesita para terminar la parte visual es create . Está función se ejecutará constantemente y se utilizará para vericar la condición para ganar el juego que es que los peces de las peceras superiores estén visibles, es decir, que tengan su propiedad alpha a uno y los peces de la pecera inferior tengan su propiedad alpha a cero. Si es así la variable text que se ha creado en el anterior estado mostrará Juego superado . function update () { i f ( pez11 . alpha == 1 && pez12 . alpha == 1 && pez13 . alpha == 1 && pez21 . alpha == 1 && pez31 . alpha == 1 && pez32 . alpha == 1 && pez33 . alpha == 1 ) { text . setText ("Juego superado") ; } } Utilizando Phaser se ha podido crear la parte visual del juego. Existen multitud de instrucciones en Phaser que nos permitirán realizar juegos más completos y complejos. 64 Figura 16: Juego creado para este trabajo: Peceras 65 7. Combinando Google Blockly y Phaser Una vez se ha visto cómo utilizar Google Blockly y como desarrollar juegos con el framework Phaser, se necesita realizar una interacción mutua entre ambos elementos. En este capítulo se explica cómo combinar Blockly con un juego realizado con Phaser y como hacer que los bloques muevan el código del juego. Una vez tenemos nuestro juego desarrollado con Phaser, es hora de añadirle los bloques que lo moverán. En primer lugar, hay que crear un archivo HTML que contenga tanto el juego realizado con Phaser, como los archivos de Google Blockly tal y como se muestra a continuación: < script src ="Phaser . js "> </ script > < script src ="blockly/acorn_interpreter . js "> </ script > < script src ="blockly/myinterpreter . html"> </ script > < script src ="blockly/blockly_compressed . js "> </ script > < script src ="blockly/blocks_compressed . js "> </ script > < script src ="blockly/wait_block . js "> </ script > < script src ="blockly/javascript_compressed . js "> </ script > < script src ="blockly/bloqueNuevo . js "> </ script > < script src ="blockly/msg/ js /en . js "> </ script > < script src ="JuegoPhaser . js "> </ script > A continuación, hay que insertar la ToolBox tal y como se explicó en la sección ?? del capítulo 4. Una vez hecho esto y tras ordenar los elementos y darles el tamaño adecuado, ya tendríamos en nuestro HTML tanto el panel de bloques como el juego desarrollado en Phaser. También se necesitan las funciones que hagan funcionar el Interpreter para ir ejecutando cada uno de los bloques. Estas funciones se pueden mirar en la web de Blockly https://developers.google.com/blockly/guides/app-integration/running-javascript , que contiene un ejemplo del que se puede extraer todo el código del panel de bloques. Para llamar al Interpreter hay que utilizar la siguiente función: var code = Blockly . JavaScript . workspaceToCode( workspace ) ; var myInterpreter = new Interpreter ( code ) ; myInterpreter.run() ; También necesitamos la función de la llamada a la API a la que se llamará cada vez que haya un bloque en el panel que no se ha ejecutado aún: function initApi ( interpreter , scope ) { 66 // Add an API function for the alert () block . var wrapper = function ( text ) { return alert (arguments . length ? text : ' ') ; }; interpreter . setProperty ( scope , ' alert ' , interpreter . createNativeFunction (wrapper ) ) ; // Add an API function for the prompt () block . wrapper = function ( text ) { return prompt( text ) ; }; interpreter . setProperty ( scope , 'prompt ' , interpreter . createNativeFunction (wrapper ) ) ; } El siguiente paso va a ser crear un nuevo archivo Javascript que contendrá los bloques nuevos que se quieran crear y añadirlo a nuestro HTML: < script src ="MisBloques . js "> </ script > En este archivo vamos a desarrollar todos los bloques nuevos que van a ser utilizados en nuestro juego. Tal y como explicamos en el la sección ?? del capítulo 4, para crear un bloque primero hay que denir su estructura con la función Blockly.deneBlocksWithJsonArray . Para denir el código que ejecutará ese bloque necesitamos dos funciones más. Esta división en dos funciones es útil si se quieren utilizar los nuevos bloques dentro de bucles de programación. Llegados a este punto vamos a diferenciar entre dos tipos de bloques: bloques condicionales y bloques de código, que presentaremos a continuación. 7.1. Bloques de código Los bloques de código son los que contienen instrucciones que modican alguna parte del programa, en este caso de nuestro juego. En primer lugar, deniremos una primera función que llevará como parámetro el nombre del bloque y que solamente devolverá una llamada a la segunda función: Blockly . JavaScript [ ' NombreBloque ' ] = function ( block ) { return "nombreSegundaFuncion() ;\n" } 67 A continuación, creamos la segunda función con la siguiente estructura y deniendo el código que va a ejecutar el bloque en el lugar correspondiente: function initInterpreterNombreDeLaFuncion ( interpreter , scope ) { Blockly . JavaScript . addReservedWords ( ' nombreSegundaFuncion ') ; var wrapper = interpreter . createAsyncFunction ( function ( callback ) { setTimeout ( function () { // Codigo que va a ejecutar el bloque callback(); } ,1000 ) ; }) ; interpreter . setProperty ( scope , ' nombreSegundaFuncion ' , wrapper ) ; } Ahora que tenemos las dos funciones denidas tenemos que agregar el nombre de esta última función en el initApi del Interpreter de Blockly: function initApi ( interpreter , scope ) { // Add an API function for the alert () block . var wrapper = function ( text ) { return alert (arguments . length ? text : ' ') ; }; interpreter . setProperty ( scope , ' alert ' , interpreter . createNativeFunction (wrapper ) ) ; // Add an API function for the prompt () block . wrapper = function ( text ) { return prompt( text ) ; }; interpreter . setProperty ( scope , 'prompt ' , interpreter . createNativeFunction (wrapper ) ) ; initInterpreterNombreDeLaFuncion ( interpreter , scope ) Por último, solamente queda crear el nuevo bloque en la toolbox . Se puede meter dentro de una categoría existente o crear una nueva: <block type ="nombreDelBloque"> </block> 68 7.2. Bloques condicionales Los bloques condicionales son los que se unen a los bloques que representan instrucciones de control para denir su condición de parada. Normalmente hay que denirlos como booleanos para que evalúen si la condición es o no correcta. Para denir la parte visual hay que añadir un campo output que tenga valor boolean . Al igual que hicimos con los bloques de código, necesitamos denir dos funciones, pero no de la misma manera. La primera función sería: Blockly . JavaScript [ ' NombreDelBloque ' ] = function ( block ) { var code = 'NombreDeLaSegundaFuncion () '; return [ code , Blockly . JavaScript .ORDER_MEMBER] ; }; La diferencia principal es que para los bloques condicionales debemos devolver a la segunda función una estructura que además de la llamada a la función devuelva Blockly.Javascript.ORDER-MEMBER . La segunda función también varía ligeramente respecto al bloque de código: function initInterpreterNombreDeLaFuncion ( interpreter , scope ) { Blockly . JavaScript . addReservedWords ( ' nombreSegundaFuncion ') ; var wrapper = interpreter . createNativeFunction ( function () { return ( Condicion a evaluar . Un ejemplo ser í a i f (x > 3) ) }) ; interpreter . setProperty ( scope , ' nombreSegundaFuncion ' , wrapper ) ; } En este caso no se requiere la llamada a callback como ocurría en el bloque de código ya que directamente se devuelve la condición a evaluar. Por último, al igual que en el otro tipo de bloques, quedaría denir la función en el Interpreter y crear el bloque en la toolbox . Con estas funciones los bloques nuevos ya están listos para usarse y ejecutarse con éxito. Si queremos acceder a un elemento del juego desarrollado en Phaser, solamente tenemos que denir el código correspondiente en uno de los bloques nuevos y dicho bloque modicará el comportamiento de ese elemento. 69 7.3. Creando bloques nuevos para un juego realizado en Phaser: Peceras A continuación, se van a ver los pasos explicados en este capítulo aplicados a un juego real que se ha realizado para este proyecto. En la sección 6.6 del capítulo 6 se explicó cómo realizar la parte visual del juego Peceras . Ahora para que el juego funcione debemos crear bloques nuevos que muevan los peces de una pecera a otra. Realmente lo que se hará es hacer invisible al pez que queremos mover y hacer visible al pez de la posición destino donde queremos moverlo. Para ello habrá que cambiar los valores alpha de cada pez a cero o a uno según se quiera hacer invisible o visible. En primer lugar, se va a explicar cómo crear un bloque de código que permita mover los peces de la pecera grande a la primera pecera y después se explicará cómo realizar un bloque condicional siguendo el proceso de codicación de bloques. Se necesita un archivo Javascript nuevo donde irán los nuevos bloques. Para crear el bloque de código hay que denir su parte visual con la siguiente función: Blockly.defineBlocksWithJsonArray([ { "type" : "grandeauno" , "message0" : "Mover pez de la pecera grande a la primera pecera" , "previousStatement": null , "nextStatement" : null , "colour" : 170 , } ]) ; Como se explicó en el capítulo 4, sección 4.4.1 para crear la parte visual de un bloque se requiere la función Blockly.deneBlocksWithJsonArray . El argumento type indica el identicador del bloque y el argumento message0 indica el mensaje que contendrá el bloque y que se verá en el panel de bloques. Después se indica que no es necesario que lleven un bloque previo encajado a él ni un argumento y se indica el color del bloque. Con esta función ya está denida la parte visual del bloque. Como hemos visto en la sección 7.1 de este capítulo, para denir la parte funcional necesitamos dos funciones que llamaremos Blockly.JavaScript['grandeauno'] y initInterpretergrandeauno . La primera de estas funciones solamente devuelve un valor de retorno que llama a la palabra reservada de la segunda función: 70 Blockly . JavaScript [ ' grandeauno ' ] = function ( block ) { return "grandea1 () ;\n" ; }; La función initInterpretergrandeauno implementará el código que va a ejecutar el nuevo bloque. Este bloque lo que tendrá que hacer es hacer invisible al pez que se va a mover desde la pecera grande y hacer visible al pez de la pecera uno. Para ello habrá que comprobar cuantos peces hay en la pecera grande y cuantos hay en la pecera uno para así saber cuáles son los peces cuya propiedad alpha hay que cambiar: function initInterpretergrandeauno ( interpreter , scope ) { Blockly . JavaScript . addReservedWords ( ' grandea1 ') ; var wrapper = interpreter . createAsyncFunction ( function ( callback ) { setTimeout ( function () { i f (numpeces == 6) { i f (numpeces1 == 0) { pez6 . alpha = 0; pez11 . alpha = 1; numpeces −− ; numpeces1++; } else i f (numpeces1 == 1) { pez6 . alpha = 0; pez12 . alpha = 1; numpeces −− ; numpeces1++; } else i f (numpeces1 == 2) { pez5 . alpha = 0; pez13 . alpha = 1; numpeces −− ; numpeces1++; } } else i f (numpeces == 5) { i f (numpeces1 == 0) { pez5 . alpha = 0; pez11 . alpha = 1; numpeces −− ; numpeces1++; } else i f (numpeces1 == 1) { pez5 . alpha = 0; 71 pez12 . alpha = 1; numpeces −− ; numpeces1++; } else i f (numpeces1 == 2) { pez5 . alpha = 0; pez13 . alpha = 1; numpeces −− ; numpeces1++; } } else i f (numpeces == 4) { i f (numpeces1 == 0) { pez4 . alpha = 0; pez11 . alpha = 1; numpeces −− ; numpeces1++; } else i f (numpeces1 == 1) { pez4 . alpha = 0; pez12 . alpha = 1; numpeces −− ; numpeces1++; } else i f (numpeces1 == 2) { pez5 . alpha = 0; pez13 . alpha = 1; numpeces −− ; numpeces1++; } } else i f (numpeces == 3) { i f (numpeces1 == 0) { pez3 . alpha = 0; pez11 . alpha = 1; numpeces −− ; numpeces1++; } else i f (numpeces1 == 1) { pez3 . alpha = 0; pez12 . alpha = 1; numpeces −− ; numpeces1++; } else i f (numpeces1 == 2) { pez3 . alpha = 0; pez13 . alpha = 1; numpeces −− ; numpeces3++; } } else i f (numpeces == 2) { i f (numpeces1 == 0) { 72 Figura 18: Juego creado para este trabajo: Recolectando plátanos 8.2. Viaje en coche Juego basado en el problema "Viaje en coche"de la asignatura Diseño de Algoritmos del Grado en Ingeniería de Computadores de la Universidad Complutense de Madrid. Un viajante tiene que viajar en coche de un punto a otra siguiendo una ruta preestablecida. Con el depósito lleno su coche puede recorrer un máximo de kilómetros y por el camino existen varias gasolineras en las que el viajante puede parar para llenar su depósito. El viajante quiere parar el menor número de veces en su camino por lo que tiene que elegir en que gasolineras debe parar y en cuáles no. ¾Será capaz de encontrar una solución óptima a su problema? 79 8.2.1. Conocimientos didácticos que se desean transmitir Este juego presenta un problema cuya solución se puede obtener mediante un método voraz. El jugador debe elegir al encontrarse una gasolinera, si debe parar o no para rellenar el depósito para así encontrar la solución en la que menos veces tenga que parar el coche, es decir, la solución óptima. Sólo se dará como ganador al jugador cuando haya encontrado una solución óptima. 8.2.2. Instrucciones del juego El jugador puede mover el coche con los bloques de código. El coche comienza con el depósito vacío de gasolina. Cuando el coche esté enfrente de una gasolinera, se podrá utilizar el bloque llenar depósito para rellenar completamente el depósito de gasolina del coche. Si se queda sin gasolina no podrá seguir avanzando y habrá que comenzar desde el principio. Solamente cuando se consiga la solución óptima que incluya el menor número de paradas, se dará por superado el juego. El número entre gasolineras indica la distancia que hay entre el espacio de las dos gasolineras. 8.2.3. Validaciones realizadas En este apartado se han realizado una serie de validaciones para comprobar posibles errores que puedan ocurrir durante el juego. Todos los casos que se exponen han sido comprobados para garantizar el buen funcionamiento del juego. El coche no puede repostar cuando no hay una gasolinera. El coche no puede moverse si no tiene gasolina. Se gana la partida cuando se encuentra la solución con el menor número de paradas. Se pierde la partida cuando no se encuentra la solución óptima. 80 Figura 19: Juego creado para este trabajo: Viaje en coche 8.3. Noche de Navidad Por n es Navidad y como cada año Santa Claus debe repartir los regalos por toda la ciudad. Una tarea tan agotadora que ha provocado que en la última ciudad que visitó olvidó dejar regalos en todas las casas. ¾Serás capaz de utilizar los bucles e instrucciones de programación para que los habitantes de esas casas no se queden sin regalo de Navidad? 81 8.3.1. Conocimientos didácticos que se desean transmitir Para solucionar este juego de la manera más completa posible hay que utilizar bloques de instrucciones de control y condicionales pues si se deja un regalo en una casa que ya tenía uno, no se podrá completar el juego. Por ello se recomienda comprobar en que casa hay un regalo y en cual no para que el algoritmo quede lo más completo posible. De esta manera el jugador podrá reforzar o demostrar conocimientos utilizando los bloques while , if y condicionales. 8.3.2. Instrucciones del juego El jugador debe recoger los regalos del trineo (Santa únicamente puede cargar con dos regalos, pero podría volver a por más en caso de ser necesario) y moverse por cada una de las casas con las instrucciones de movimiento. Solamente se debe dejar el regalo en las casas que no lo tienen pues si se deja en una de las casas que lo tienen, habrá que volver al trineo a recoger otro regalo. El juego termina cuando todas las casas tienen un regalo y Santa Claus no lleve ninguno encima (En caso contrario hay que dejarlos en el trineo). 8.3.3. Validaciones realizadas En este apartado se han realizado una serie de validaciones para comprobar posibles errores que puedan ocurrir durante el juego. Todos los casos que se exponen han sido comprobados para garantizar el buen funcionamiento del juego. El personaje no puede moverse a una zona donde no haya un edicio. No se puede dejar un regalo en una casa si el personaje no lleva ningún regalo. Sólo se pueden llevar encima dos regalos. Al dejar un regalo en una casa el número de regalos decrece en uno. 82 La partida termina si todas las casas tienen regalo y Santa no lleva ninguno encima. Figura 20: Juego creado para este trabajo: Noche de Navidad 8.4. Peceras Una tienda de animales ha recibido siete maravillosos ejemplares de peces azules en una gran pecera. Para tenerlos más visibles por toda la tienda, el dueño quiere repartirlos en tres peceras: dos peceras contendrán tres peces cada uno y la otra pecera contendrá sólamente un pez. ¾Podrías ser capaz de repartir correctamente los peces en cada pecera? 83 8.4.1. Conocimientos didácticos que se desean transmitir Para solucionar este juego de la manera más completa posible hay que utilizar bloques de instrucciones de control y condicionales. La idea del juego es que además de resolverlo, el jugador sea capaz de realizar bucles y condicionales para ir moviendo los peces de un lugar a otro. Además de adquirir habilidad utilizando las instrucciones de control if y while , también se tiene en cuenta problemas de capacidad que se pueden dar en el mundo de la programación real con algunas estructuras de datos. 8.4.2. Instrucciones del juego El jugador debe mover los peces desde la pecera grande a las otras tres peceras. En la primera pecera caben tres peces, en la segunda cabe un pez y en la tercera caben tres peces. Se recomienda al jugador que además de resolver el juego, practique la realización de bucles y condicionales pasando los peces de la pecera grande a la primera pecera, y después cada uno de los peces pase por la segunda pecera y por la tercera pecera. 8.4.3. Validaciones realizadas En este apartado se han realizado una serie de validaciones para comprobar posibles errores que puedan ocurrir durante el juego. Todos los casos que se exponen han sido comprobados para garantizar el buen funcionamiento del juego. No se puede sobrepasar el máximo de peces de cada pecera. Al pasar un pez de una pecera a otra, éste pasa a estar solamente en la pecera destino. El juego termina cuando las tres peceras están llenas y la pecera grande está vacía. 84 Figura 21: Juego creado para este trabajo: Peceras 85 9. Conclusiones En este capítulo se va a analizar los objetivos que se han alcanzado con la realización de este trabajo. También se analizarán los puntos a mejorar, las dicultades que se han encontrado durante la realización del trabajo y que trabajo futuro se podría plantear a partir de este proyecto. Los primeros objetivos consistían en realizar diferentes estudios sobre las webs que contienen juegos para programar, las herramientas que utilizan bloques visuales de programación y los frameworks que se utilizan para crear videojuegos, y realizar una comparativa entre ellos. Estos estudios han sido recogidos en esta memoria, pero podrían mejorarse con una comparación más profunda entre ellos. Esta comparativa ha servido para poder seleccionar los elementos más adecuados para realizar los juegos. Se ha escogido Phaser como framework para realizar los juegos y Google Blockly para implementar el sistema de bloques. Se ha elegido Google Blockly por su sencilla implementación en una web HTML y por la facilidad que tiene para crear bloques propios que sean capaz de mover un código de programación. Por otro lado, se ha elegido Phaser como framework para diseñar los juegos debido a su sencillez para cargar los elementos, por su división en estados y por las numerosas guías, ejemplos y documentación que se puede encontrar sobre este framework en la red. Una vez se han seleccionado las herramientas ha habido que aprender cómo utilizar cada una de ellas. En el caso de Phaser ha habido que aprender cómo realizar un juego en HTML y Javascript con ayuda del framework. Además, se planteaba como objetivo que la información recogida en esta memoria sirviera como guía para ayudar a desarrollar nuevos juegos. Este objetivo se ha cumplido al enseñar cómo crear los elementos básicos y los estados para realizar un juego, pero podría haberse profundizado en aspectos más avanzados. En el caso de Blockly ha habido que aprender a implementarlo en una web, a crear nuevos bloques y como hacer que interactúe con el HTML y Javascript del juego, objetivo que se ha cumplido, aunque se podría mejorar la explicación de cómo juntar ambas tecnologías pues puede resultar difícil de entender si no se tiene algún conocimiento previo sobre el tema. Una vez se han obtenido los conocimientos necesarios para llevar a cabo el objetivo nal de nuestro proyecto, se han realizado cuatro juegos en HTML y Javascript que se solucionan mediante los bloques de Google Blockly y algunos otros bloques nuevos creados para cada juego. Aunque el desarrollo de los juegos con las dos tecnologías ha podido realizarse, considero que no se 86 ha conseguido ese objetivo didáctivo en todos ellos. Una vez realizados se ha comprobado que se pueden realizar juegos de este tipo juntando varias tecnologías. Uniendo Phaser y Blockly se podrían realizar muchos de los juegos que hemos visto en cada una de las webs. Se ha logrado realizar una herramienta con la que se puede transmitir conocimientos informáticos a los jugadores. Durante la realización de este proyecto se han encontrado algunas di- cultades. La compatibilidad en todos los navegadores ha sido un problema frecuente. El panel de bloques se ve oscuro en Internet Explorer mientras que en Google Chrome se ve perfectamente. Por otro lado, el audio no siempre se escucha en Google Chrome mientras que en Internet Explorer carga perfectamente. Esto es debido a un problema de políticas CORS del navegador de Google y se puede solucionar usando el protocolo Http o instalando ciertas extensiones de Chrome. También en Chrome se observa que a veces no funciona la papelera para eliminar bloques del panel de Blockly. En su lugar se puede eliminar haciendo clic derecho sobre el bloque y seleccionando la opción correspondiente. Otro problema que ha surgido al realizar este proyecto está relacionado con las animaciones de los juegos. Para mover un sprite de un lugar a otro y que no se mueva bruscamente si no con una animación desde el punto origen hasta el punto destino, hay que utilizar una instrucción de Phaser llamada body.moveTo (Ya hablamos de está instrucción en el capítulo dedicado a Phaser). Al utilizar está instrucción se pierden las coordenadas X, Y del sprite. Aunque se puede saber en qué posición está el sprite, si queremos acceder a las coordenadas aparecerán como nulas. Este hecho ha provocado que los juegos que se han realizado para este proyecto no tengan transiciones de movimiento, pues todos se han basado en posiciones y coordenadas para los eventos que ocurren en ellos. Considero que este trabajo construye una base con la cual se pueden crear algunas ideas interesantes que quedan pendientes. Una buena idea sería realizar ejercicios de asignaturas impartidas en la Facultad de Informática de la Universidad Complutense de Madrid como pueden ser Estructura de Datos y Algoritmos o Diseño de Algoritmos. Otra propuesta sería realizar estos mismos juegos u otros nuevos utilizando otra herramienta diferente 87 a Google Blockly y otro framework diferente a Phaser. De esta manera se podrían comprobar con más detalle las diferencias y limitaciones de cada herramienta para realizar el mismo tipo de juego. Una última propuesta que me encantaría realizar en un futuro sería implementar Google Blockly en aplicaciones software hechas con distintos lenguajes de programación y usar los bloques visuales para mover su código. 88