3D-Frogger
3D - Frogger Currículo v4.0-17 Página 1 de 20 Scalable Game Design México
Eres una Rana. Tu tarea es simple: saltar a través de una carretera muy transitada, esquivando coches o 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 Revisado: Ma. Guadalupe Roque Díaz de León, 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.
Creando un juego
“3D-Frogger”
3D-Frogger
3D - Frogger Currículo v4.0-17 Página 2 de 20 Scalable Game Design México
Vocabulario/Definiciones
Absorción ............ La habilidad de desaparecer un agente. Patrón opuesto
de Generar. El 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 ............... El patrón de colisión se presenta 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. Patrón opuesto
a Absorció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
3D - Frogger Currículo v4.0-17 Página 3 de 20 Scalable Game Design México
Material para el Alumno
Parte 1A: Crear un juego Paso 1 Crear el juego
Oprime el botón
New Project…
(Nuevo Proyecto) localizado en la parte inferior de la ventana Project Chooser (Elegir Proyecto) O selecciona el menú File (Archivo), y elige New Project
Paso 2 Dar nombre al juego Escribe el nombre
Frogger y oprime
OK
3D-Frogger
3D - Frogger Currículo v4.0-17 Página 4 de 20 Scalable Game Design México
Material para el Alumno
Parte 1B: Crear agentes Paso 3 Crear
Agente 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 (Continúa)
3D - Frogger Currículo v4.0-17 Página 5 de 20 Scalable Game Design
Tú puedes dar doble clic al agente para cambiar la forma cómo se ve. Entonces, te aparecerá esta pantalla.
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 el
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 (Continúa)
3D - Frogger Currículo v4.0-17 Página 6 de 20 Scalable Game Design
Paso 7 Crea los agentes: • Camión
• Túnel del lado izquierdo
• Túnel del lado derecho
• La carretera
• El piso
• La cueva o meta.
Utiliza el icono inflable
(inflatable icon).
Estarás listo para continuar cuando tengas los siguientes Agentes, los
encontrarás donde se indica: nombra a tus
agentes sin dejar espacios en blanco:
□ Rana (tú la creas desde cualquier ícono inflable)
□ Camión o Inflatable Icon (ícono inflable).
▪ Vehicle. Cualquier auto o camión cuyo frente mira hacia la izquierda
□ Túnel del lado izquierdo (TunelIzquierdo) o Inflatable Icon.
▪ Landscape.
• TunnelL (left = izquierda)
□ Túnel del lado derecho (TunelDerecho) 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 Icon.
▪ Landscape.
• Road
□ Piso (puedes elegir el que quieras, esta es una opción) o Inflatable Icon.
▪ Plants.
• Gross
3D-Frogger (Continúa)
3D - Frogger Currículo v4.0-17 Página 7 de 20 Scalable Game Design
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 Crear un Mundo Oprime el símbolo
+ localizado al lado de World en la barra superior de la ventana.
Paso 9 Dale el nombre a tu nuevo mundo de, Teclea
Nivel 1
No cambies los números para tu primer mundo. Ahora 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. Más adelante se probará.
3D-Frogger (Continúa)
3D - Frogger Currículo v4.0-17 Página 8 de 20 Scalable Game Design
Paso 11 Utiliza estas herramientas
para colocar los agentes Frogger en el Mundo y crear la escena de la carretera.
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.
Paso 12 Prueba las herramientas de movimiento 3D
Rotar Panorámica
Acercamiento
(Zoom) Mueve tu Mundo para que puedas ver las figuras 3D.
Paso 13 Utiliza el botón
Save localizado a un lado del nombre de tu Mundo para guardar tu Mundo cuando te guste como se ve.
Solamente guarda Save 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
3D - Frogger Currículo v4.0-17 Página 9 de 20 Scalable Game Design México
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 (Continúa)
3D - Frogger Currículo v4.0-17 Página 10 de 20 Scalable Game Design
Material para el Alumno Parte 3: CLAVE DE RESPUESTAS Entendiendo Condiciones y Acciones
Condiciones
SI el agente ve un carro a la derecha SI el agente esta encima del carro
SI el jugador presiona la tecla A Una vez cada 5 segundos
SI no hay nada a la derecha SI edad es menor de 21 años
SI el agente está seguido de al menos o igual a 2 carros
Acciones
mover a la derecha Borrar el agente (borrarse a sí mismo)
Recargar el mundo guardado Decir “I am 100 years old!”
Cambiar el agente a ésta imagen o forma
3D-Frogger
3D - Frogger Currículo v4.0-17 Página 11 de 20 Scalable Game Design México
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: Da clic sobre el agente
Rana Programando el Control de Cursor
Utiliza el botón
+ Rule para agregar 3 reglas más para →, ←,↓
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. Modifica las reglas que añadiste para que se mueva en las otras 3 direcciones.
Paso 3: Da clic sobre el agente
Camión.
Agrega una regla para que se mueva hacia la derecha.
move [ →] Utiliza las condiciones Si
once every [ .5 ] sec para disminuir la velocidad del Camión definir cada cuanto tiempo se mueve y solo se mueve si ve carretera a su derecha
see[ →] carretera
Once every = una vez cada .5 segundos Se mueve el camión Si quieres que el camion se mueva más lento que valor tecleas? Si quieres que el camion se mueva más rápido que valor tecleas?
3D-Frogger (Continúa)
3D - Frogger Currículo v4.0-17 Página 12 de 20 Scalable Game Design
Paso 4: Da clic sobre el agente
Túnel izquierdo para
generar Camiones Utiliza las condiciones para controlar que tan seguido aparecerán.
once every [ 3 ] sec probabilidad de generar
% chance[ 50] y avanza solo si ve carretera en esa dirección
see[ →] carretera Entonces Utiliza la Acción: Crear un nuevo agente en la dirección indicada
new [ →]Agente
Cambia los valores 3 y 50 para hacer el juego más fácil o más difícil Once every = una vez cada % chance = % probabilidad
Paso 5: Da clic sobre el agente
Camion Agrega una regla al Camión para que se elimine a sí mismo si ve el tunelDerecho en la dirección indicada en este caso →
IF (Si) yo agente Camion veo un TunelDerecho a mi derecha….. THEN (entonces)…me borro Si ve el TúnelDerecho a su derecha
see[ →] TúnelDerecho Entonces El camión se absorbe a si mismo, se desaparece
erase [ ● ]
3D-Frogger (Continúa)
3D - Frogger Currículo v4.0-17 Página 13 de 20 Scalable Game Design
Paso 6: Da clic sobre el agente
Rana Crea una Rana aplastada - atropellada Después oprime el botón
+Shape localizado debajo de la lista de agentes. Dale nombre a la nueva forma:
RanaAplastada Haz doble clic en la imagen en seguida del nombre. Utiliza las herramientas de dibujo para hacer que tu RanaAplastada parezca aplastada.
Paso 7: Da clic sobre el agente
Rana Utiliza el botón
+ Rule para agregar el nuevo comportamiento Cambiar la Rana a la apariencia de RanaAplastada y Reproducir un sonido y detener la simulación cuando la rana colisione con el Camión.
Si ve un camion a la izquierda
see a[ ←] Camion Entonces Cambia de apariencia a la ranaAplastada
change[●]ranaAplastada
el juego se detiene 1 seg wait [1.0]sec
toca la canción que esta en el archivo explode.mp3 play sound[explode.mp3]
despliega Perdiste… show message[Perdiste]
detiene el juego stop simulation
3D-Frogger (Continúa)
3D - Frogger Currículo v4.0-17 Página 14 de 20 Scalable Game Design
Paso 8: Da clic sobre el agente
Rana ¡Ahora a programar el comportamiento de la Rana para cuando llegue a la meta! ¡Ganas!!
Si esta encima de la meta
Stacked[somewhere above] meta Entonces Toca la canción del archivo Hallelujah.mp3
play sound [Hallelujah.mp3] Muestra el mensaje Ganaste!...
show message[Ganaste!] Detiene la simulación
stop simulation
Estarás listo para avanzar cuando los siguientes aspectos del juego funcionen correctamente…
• ¿La Rana se mueve en las 4 direcciones ↑ ↓ ← →?
• ¿Los Camiones son generados (creados) y absorbidos (borrados)?
• ¿La colisión Rana-Camión funciona correctamente?
• ¿Se reproduce o aparece un mensaje cuando la Rana llega a la meta?
3D-Frogger (Continúa)
3D - Frogger Currículo v4.0-17 Página 15 de 20 Scalable Game Design
Material para el Alumno
Parte 5: El Río
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 - desaparecer si se cae al río.
Agente: Tronco • Flota en el Agua. Los troncos flotan 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) • GENERAR Troncos si hay agua a la derecha (los Troncos flotan de izquierda a derecha).
Agente: Tortuga • Flota en el Agua. 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 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 tu Mundo.
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 (Continúa)
3D - Frogger Currículo v4.0-17 Página 16 de 20 Scalable Game Design
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
3D - Frogger Currículo v4.0-17 Página 17 de 20 Scalable Game Design México
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
3D - Frogger Currículo v4.0-17 Página 18 de 20 Scalable Game Design México
Material para el alumno: Reto 1.0: Cocodrilos.
Antes de que comiences 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.
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.
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.
Cocodrilos
Agrega cocodrilos al río.
3D-Frogger
3D - Frogger Currículo v4.0-17 Página 19 de 20 Scalable Game Design México
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.
Reto de Diseño: Crear controles para que no se pueda hacer trampa para ganar el juego… La Rana no debe de ser capaz de caminar sobre los túneles, islas o lirios acuáticos o autos.
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. Diseña los siguientes comportamientos de los agentes:
• La Rana no debe poder moverse sobre los túneles, islas, camiones o ¿Cómo evitarás que esto pase?
• Tip
Observa en la parte inferior de la ventana el operador lógico NOT
• Para negar una condición, selecciona la condición y oprime el botón NOT, esto hace que
la condición se vea de esta forma lo cual indica que si el agente no ve en esa dirección el túnel izquierdo entonces…
Si la rana ve el tunelIzquierdo Si la rana NO ve el tunelIzquierdo en esa dirección… en esa dirección …
Esta Regla indica si se oprime la tecla → Y NO se ve en ese sentido el tunelIzquierdo entonces el
agente se mueve en esa dirección →, de esa forma NO hace trampa porque ya no se podrá
mover si esta el túnel.
NOT
3D-Frogger
3D - Frogger Currículo v4.0-17 Página 20 de 20 Scalable Game Design México
Material para el Alumno: Reto 3.0: Esquivar autos y camiones.
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… 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 el Mundo con los nuevos agentes. Actualizar Comportamientos:
• Los Autos son generados y absorbidos (¿Necesitarás túneles nuevos?).
• Los Autos se mueven a la izquierda ←
• Las Ranas son aplastadas si son atropelladas por los Autos o los Camiones
• Una Rana aplastada significa que el juego ha terminado.
Esquiva los autos
¡Evita a los autos que van en la otra
dirección!