Creando un juego 3D-Frogger

3D-Frogger Creando un juego 3D-Frogger Eres una Rana. Tu tarea es simple: saltar a través de una carretera muy transitada, esquivando coches y camiones, hasta llegar a la orilla del río, donde debes evitar ahogarte cruzando con seguridad hacia tu cueva en la parte superior de la pantalla, saltando sobre los troncos y las espaldas de las tortugas Creado por: Susan Miller, University of Colorado, School of Education. Adaptaciones usando AgentCubes realizadas por Cathy Brand. Adaptado al español: Silvia Iliana Ramírez Ramírez, Tecnológico de Monterrey Este currículo ha sido diseñado como parte del proyecto Scalable Game Design. Fue creado utilizando ideas y porciones de trabajo previo desarrollado por: Fred Gluck, Cathy Brand, Carla Hester-Croff, Jason Reub, Sandy Wilder y Mark Shouldice. Este material está basado en trabajo apoyado por la National Science Foundation bajo la subvención No. DRL- 1312129 y CNS-1138526. Cualesquiera opiniones, resultados, conclusiones o recomendaciones expresadas en este material son las del autor (es) y no reflejan necesariamente los puntos de vista de la National Science Foundation. 3D - Frogger Currículo v1.0 Página 1 de 18 Scalable Game Design

3D-Frogger Vocabulario/Definiciones Absorción... patrón opuesto de Generar. En vez de que un agente genere a otros agentes, un agente absorbe un flujo de agentes en el patrón de absorción (por ejemplo un túnel absorbiendo autos), haciéndolos desaparecer. Acción... el comportamiento solicitado a un agente si las condiciones son verdaderas. Agente... un personaje en el juego. Arreglo... un arreglo rectangular de agentes. Colisión... la situación cuando dos agentes chocan físicamente. Condición... la situación que debe ser verdadera para que una acción ocurra. Forma... una segunda imagen del agente original. Por ejemplo, la Rana puede tener dos formas: como se ve usualmente y como se ve después de ser aplastada. Generar... la habilidad de crear un nuevo agente. Para satisfacer este patrón, un agente debe generar un flujo de otros agentes; por ejemplo, autos apareciendo de un túnel. Cueva... el lugar donde se localiza la meta, que debe ser alcanzada para ganar el juego. Transportar... representa la situación en que un agente carga a otro agente; la habilidad de un agente de estar arriba de, y moverse con, otro agente. 3D - Frogger Currículo v1.0 Página 2 de 18 Scalable Game Design

Paso 1 3D-Frogger Material para el Alumno Parte 1A: Crear un juego Crear el juego Oprime el botón New Project (Nuevo Proyecto) localizado en la parte inferior de la ventana Project Chooser (Elegir Proyecto) Paso 2 O selecciona el menú File (Archivo), y elige New Project Dar nombre al juego Escribe el nombre Frogger y oprime OK 3D - Frogger Currículo v1.0 Página 3 de 18 Scalable Game Design

Paso 3 Crear agentes Crear Agente 3D-Frogger Material para el Alumno Parte 1B: Oprime el botón +Agent localizado en la esquina inferior izquierda de la ventana de AgentCubes Paso 4 Selecciona Inflatable Icon (icono inflable) de la lista Shape localizada a la izquierda, luego Animals de la lista en el centro y finalmente Frog (Rana) de la lista a la derecha. Asegúrate de darle a tu agente un nombre como Rana Oprime OK para guardar tu agente. El cual aparecerá en el lado izquierdo de tu pantalla. 3D - Frogger Currículo v1.0 Página 4 de 18 Scalable Game Design

3D-Frogger (Continúa) Tú puedes dar doble clic al agente para editar cómo se ve. Entonces, esta pantalla aparecerá. Paso 5 Utiliza el botón llamado clear para borrar la Rana. O utiliza la herramienta lápiz para agregar detalles a la Rana. Paso 6 Oprime la herramienta lápiz para dibujar. Oprime el cuadro de colores para elegir un color. Utiliza el botón + para inflar tu dibujo y hacerlo 3D. Oprime Save para guardar los cambios. Inflation = Inflado en 3D Ceiling = Techo (sube o baja) Noise = Ruido Smooth = Alizar Clear = Borrar Flatten = aplanar z offset = Mueve al agente arriba o abajo Upright = Parar Surfaces = Superficies Distance = Distancia 3D - Frogger Currículo v1.0 Página 5 de 18 Scalable Game Design

3D-Frogger (Continúa) Paso 7 Crea el Camión, los túneles del lado izquierdo y del lado derecho, la carretera, el piso y la cueva o meta. Utiliza el icono inflable (inflatable icon) eligiendo entre las categorías Vehicle y Landscape, para crear las distintas formas. Estarás listo para continuar cuando tengas los siguientes agentes creados que encontrarás donde se indica: Rana (tú la creas de un ícono inflable cualquiera) Camión o Shape =Inflatable Icon (ícono inflable). Vehicle. Cualquier auto o camión cuyo frente mira hacia la izquierda Túnel del lado izquierdo o Inflatable Icon. Landscape. TunnelL (left = izquierda) Túnel del lado derecho o Inflatable Icon. Landscape. TunnelR (R = derecha) Cueva o Inflatable. Cualquier forma que te agrade ya que es la meta, por ejemplo una estrella o bandera. Carretera o Inflatable. Landscape. Road Piso (puedes elegir el que quieras, esta es una opción) o Inflatable. Plants. Gross 3D - Frogger Currículo v1.0 Página 6 de 18 Scalable Game Design

3D-Frogger Material para el Alumno Parte 2: Crear un Mundo El Mundo es el espacio del juego donde los agentes llevan a cabo sus acciones. Paso 8 Paso 9 Crear un mundo Oprime el símbolo + localizado al lado de World en la barra superior de la ventana de AgentCubes Dale el nombre a tu nuevo mundo de: Nivel 1 No cambies los números para tu primer mundo. Oprime OK Paso 10 Prueba las herramientas del Mundo. Herramienta Flecha o Seleccionadora para seleccionar y mover agentes. La herramienta Lápiz para dibujar agentes en el Mundo. La Herramienta Mosaico para dibujar grupos o arreglos de agentes. La herramienta Borrador. La herramienta Disparador, llama un método definido por el usuario. 3D - Frogger Currículo v1.0 Página 7 de 18 Scalable Game Design

Paso 11 Paso 12 Paso 13 Utiliza estas herramientas para colocar los agentes Frogger en el Mundo y crear la escena de la carretera. Prueba las herramientas de movimiento 3D Rotar Panorámica (movimiento de la cámara vertical) Acercamiento (Zoom) Mueve tu Mundo para que puedas ver las figuras 3D. Utiliza el botón Save localizado a un lado del nombre de tu Mundo para guardar tu Mundo cuando te guste como se ve. 3D-Frogger (Continúa) Es muy importante que no dibujes sobre la Rana con el agente Carretera. Esto significa que si colocas una Rana en la malla, no dibujes la Carretera sobre la Rana sin antes borrarla. Solamente guarda tu Mundo cuando hayas diseñado el espacio del juego para iniciar un juego. De esta forma podrás usar el botón Reiniciar Que volverá al punto de inicio, es decir el último diseño de juego que guardaste. Tu mundo podría verse como éste: 3D - Frogger Currículo v1.0 Página 8 de 18 Scalable Game Design

3D-Frogger Material para el Alumno Parte 3: Entendiendo Condiciones y Acciones Explica cada acción o condición presentada: Condiciones: A B C D E F G Acciones: A B C D E 3D - Frogger Currículo v1.0 Página 9 de 18 Scalable Game Design

3D-Frogger (Continúa) Material para el Alumno Parte 3: CLAVE DE RESPUESTAS Entendiendo Condiciones y Acciones Explica cada acción o condición presentada Condiciones: A SI el agente ve un carro a la derecha B SI el agente se encuentra encima del carro C SI no hay nada a la derecha D SI el jugador presiona la tecla A E Una vez cada 5 segundos F SI edad es menor de 21 años G SI el agente está seguido de menos de 2 o igual a 2 carros Acciones: Amover a la derecha B Borrar el agente (borrar a sí mismo) C Recargar el mundo guardado D Cambiar el agente a ésta imagen o forma E Decir I am 100 years old! 3D - Frogger Currículo v1.0 Página 10 de 18 Scalable Game Design

3D-Frogger Material para el Alumno Parte 4: Creando comportamientos de Agentes Da clic sobre el agente para agregarle comportamientos Paso 1 Abre el comportamiento de la Rana dando click sobre la Rana que está en la lista de los agentes o en el mundo. Paso 2: Control de Cursor para la Rana Paso 3: Paso 4: Paso 5: Da clic sobre el agente Camión. Agrega una regla para que se mueva hacia la derecha. Utiliza la condición once every para disminuir la velocidad del Camión. Agrega una regla al comportamiento del Túnel izquierdo para generar Camiones. Utiliza las condiciones once every y % chance para controlar que tan seguido aparecerán. Agrega una regla al Camión para que se elimine a sí mismo cuando vea el Túnel derecho. Esta regla hace que la Rana se mueva hacia ARRIBA cuando oprimes la flecha hacia arriba. Utiliza el botón + Rule localizado en la parte inferior de la ventana para agregar 3 reglas más para que la Rana se mueva en las 4 direcciones. Once every = una vez cada Cambia los valores para hacer el juego más fácil o más difícil Once every = una vez cada % chance = % probabilidad IF (si) veo Túnel a mi derecha..then (entonces) me borro 3D - Frogger Currículo v1.0 Página 11 de 18 Scalable Game Design

3D-Frogger (Continúa) Paso 6: El túnel absorbe un Camión. Crea una Rana aplastada Haz clic sobre el agente Rana. Después oprime el botón +Shape (+Forma) localizado debajo de la lista de agentes. Dale nombre a la nueva forma. Haz doble clic en la imagen en seguida del nombre. Utiliza las herramientas de dibujo para hacer que tu Rana parezca aplastada. Paso 7: Reproduce un sonido y borra la Rana cuando colisione con el Camión. Nota: el comando SHOW MESSAGE (mostrar mensaje) tiene dos líneas de texto usa la flecha pequeña para ver las dos líneas! Estarás listo para avanzar cuando los siguientes aspectos del juego funcionen correctamente La Rana se mueve hacia todas las direcciones? Los Camiones son generados (creados) y absorbidos (borrados)? La colisión Rana-Camión funciona correctamente? 3D - Frogger Currículo v1.0 Página 12 de 18 Scalable Game Design

3D-Frogger Río Material para el Alumno Parte 5: El Tú tienes la tarea de crear la escena del río de Frogger. Aquí están las reglas: Agente: Río La Rana se debe ahogar si se cae al río. Agente: Tronco Flota en el Agua. Tendremos a los troncos flotando de izquierda a derecha Los troncos deben TRANSPORTAR Ranas Los troncos deben desaparecer cuando lleguen al final del río Agente: Fábrica de Troncos (Isla) GENERA Troncos si hay agua a la derecha (los Troncos flotan de izquierda a derecha) Agente: Tortuga Flota en el Agua. A comparación de los troncos, las tortugas flotarán de derecha a izquierda. La Rana deberá poder saltar encima de la Tortuga Las tortugas deben desaparecer cuando lleguen al final del río Agente: Fábrica de Tortugas (Lirio Acuático) Crea Tortugas si hay si agua a la izquierda (porque queremos que las Tortugas vayan de derecha a izquierda). Agente: Rana: Debemos actualizar el agente Rana Brinca encima de y se mueve con, los Troncos y las Tortugas El jugador pierde si la Rana se cae al agua (la Rana se ahoga) Agente: Cueva/Meta Si la Rana llega a la cueva: El jugador gana! Paso 1: Crea los agentes que faltan (río, tronco, isla, tortuga, lirio acuático, cueva/meta) y luego agrégalos a la hoja de trabajo. Paso 2: Programa la isla para generar troncos. Programa los troncos para desaparecer cuando lleguen al final del agua (sean ABSORBIDOS). Paso 3: Programa el tronco para flotar sobre el río, de izquierda a derecha. Observa las reglas del tronco a continuación. Nota que usamos TRANSPORT (AR), no MOVE (R). Esto es para que el tronco pueda cargar una Rana! 3D - Frogger Currículo v1.0 Página 13 de 18 Scalable Game Design

3D-Frogger (Continúa) Paso 4: Probar el programa. Estás listo para continuar con el siguiente paso si puedes contestar SI a estas preguntas: Se crean troncos? Los troncos se mueven por el río y desaparecen cuando llegan al Agente Fábrica de Troncos? Las Ranas son Transportadas cuando saltan encima de un tronco? Paso 5: Programa el lirio acuático para generar tortugas. Programa las tortugas para desaparecer cuando llegan al final del agua (ser absorbidas). Asegúrate que las tortugas floten de DERECHA a IZQUIERDA. Paso 6: Probar tu programa. Ya estás listo para continuar con el siguiente paso si puedes contestar SI a estas preguntas: Se crean tortugas? Las tortugas se mueven y desaparecen cuando llegan al Agente Fábrica de Tortugas? Ahora, controla la Rana e intenta saltar encima de una tortuga. Qué pasa? La Rana se mueve con la tortuga? Paso 7: Programa el juego para que ganes cuando la Rana llegue a la meta. Dale a la Rana este comportamiento: Paso 8: Prueba tu programa. Ya estás listo para continuar con el siguiente paso si puedes contestar SI a estas preguntas: Se reproduce o aparece un mensaje cuando la Rana llega a la cueva? Todo lo demás funciona como esperabas? 3D - Frogger Currículo v1.0 Página 14 de 18 Scalable Game Design

3D-Frogger FIN DE LA UNIDAD. Hoja de Revisión Frogger A) Los principales patrones de pensamiento computacional que aprendimos son: 1) Control de Cursor: mover a un agente intencionalmente. a. Usar las teclas del teclado para mover a un agente. b. Un ejemplo es mover a la Rana. 2) Generar: crear nuevos agentes en la pantalla. a. Utiliza la acción New en AgentCubes. b. Ejemplos son generar nuevos camiones, tortugas y troncos en Frogger. 3) Absorber: eliminar o borrar agentes en la pantalla. a. Utiliza la acción Erase en AgentCubes. b. Ejemplos son eliminar los camiones, tortugas y troncos en un extremo de la pantalla. 4) Transportar: que un agente transporte a otro, como si un agente cargara al otro. a. Utiliza la acción Transport en AgentCubes. b. Ejemplos son transportar a las Ranas sobre los troncos y las tortugas. 5) Colisión: cuando 2 agentes chocan (se topan unos con otros). a. Utiliza la condición See (ve) b. Utiliza la condición Stacked (apilado), o c. Utiliza la condición Next to (junto a). d. Ejemplos son los camiones chocando con la Rana. B) Otros conceptos que cubrimos en AgentCubes son: 1) Crear proyectos, mundos y agentes. 2) Cambiar formas para diferentes circunstancias, como lo es la forma de Rana aplastada. 3) Detener y Reiniciar la simulación. 4) Resolver problemas en la simulación y considerar el orden de reglas. 5) Utilizar sonidos y mensajes en el juego. 6) Coordinación de la frecuencia de nuestras acciones usando la condición Once every. 7) Crear algunas acciones aleatorias utilizando la condición % chance, como cuando queríamos generar camiones pero no muchos para evitar el tráfico pesado. 8) Crear comentarios o notas que explican que estás haciendo con el código. Te ayuda a recordar lo que hace el código cuando lo leas en el futuro o lo compartas con otros usuarios. 3D - Frogger Currículo v1.0 Página 15 de 18 Scalable Game Design

Reto 1.0: Cocodrilos Antes de que comiences este reto: Material para el alumno: Debes tener un juego básico Frogger completo con una carretera y un río. La Rana debe morir si choca con un Camión o si se cae al río. 3D-Frogger Cocodrilos Reto de Diseño: Las Ranas deben ser capaces de brincar encima de los cocodrilos y viajar encima de ellos como lo hacen con los troncos. PERO las Ranas deben morir si se encuentran ENFRENTE de un cocodrilo. Agrega cocodrilos al río. Jugando a diseñar la actividad: Circula sustantivos para identificar los agentes y subraya los verbos para identificar las acciones asociadas con cada agente. Marca los adjetivos para identificar las nuevas formas para un agente. Crea un nuevo agente: Cocodrilo Crea nuevos comportamientos de agente: La Rana puede viajar encima de los Cocodrilos La Rana muere si se encuentra enfrente de la boca de un Cocodrilo. 3D - Frogger Currículo v1.0 Página 16 de 18 Scalable Game Design

Material para el Alumno: Reto 2.0: Evitar hacer Trampa Antes de empezar este reto: Debes tener un juego básico Frogger completo con una carretera y un río. La Rana debe morir si choca con un Camión o si se cae al río. 3D-Frogger No Trampa Reto de Diseño: Crear controles para que no se pueda hacer trampa para ganar el juego Evita que cualquiera haga trampa con el fin de ganar el juego La Rana debe morir si viaja todo el camino hasta el final del agua La Rana no debe de ser capaz de caminar sobre los túneles, islas o lirios acuáticos Jugando a diseñar la actividad: Circula sustantivos para identificar los agentes y subraya los verbos para identificar las acciones asociadas con cada agente. Marca los adjetivos para identificar las nuevas formas que tendrá un agente. Crear comportamientos de un agente: La Rana debe morir si viaja todo el camino hasta el final del agua o Cómo puedes hacer esto? Cuáles agentes necesitan comportamientos nuevos? o Utilizarás una nueva representación para la Rana? La Rana no debe poder caminar sobre los túneles o islas o Cómo evitarás que esto pase? 3D - Frogger Currículo v1.0 Página 17 de 18 Scalable Game Design

Alumno: Reto 3.0: Esquivar autos y camiones Material para el 3D-Frogger Esquiva los autos Antes de empezar este reto: Debes tener un juego básico Frogger completo con una carretera y río. La Rana debe morir si choca con un Camión o si se cae al río. Reto de Diseño: Crear controles para que la Rana no solamente evite los camiones, sino también a los autos que van en la otra dirección Evita a los autos que van en la otra dirección! Nuevos Agentes: Crear un agente Auto Actualizar Hoja de Trabajo Crear una ( o dos!) calle(s) de dos sentidos. Los camiones deben moverse a la derecha, los autos se mueven a la izquierda. Guarda la hoja de trabajo nueva. Actualizar Comportamientos Los Autos son generados y absorbidos ( Necesitarás túneles nuevos?) Los carros se mueven a la izquierda Las Ranas son aplastadas si son atropelladas por los autos Una Rana aplastada significa que el juego ha terminado 3D - Frogger Currículo v1.0 Página 18 de 18 Scalable Game Design