1. Objetivo
¿Quieres crear un pequeño juego divertido para tu robot? Tal vez hayas jugado al clásico Flappy Bird. Las reglas son sencillas, pero exige buenos reflejos. En esta actividad usarás la pantalla del robot para construir una versión sencilla de Flappy Bird y aprenderás el proceso completo, desde dibujar la pantalla hasta implementar la lógica del juego.
2. Materiales
3. Software
4. Conceptos básicos
Partes Necesarias de un Juego Tipo Flappy Bird
Construir una escena de juego clara.
Hacer que los tubos aparezcan y se muevan.
Controlar el personaje para que siga saltando.
Diseñar un sistema de puntuación.
Piensa: ¿Cuál es la clave para pasar entre los tubos? ¿Qué sistemas necesitamos y cómo debemos diseñarlos?
Cambio de estado: Define la pantalla inicial, el estado de juego y la pantalla de final. Controla la transición entre ellas.
Bucle principal: Mientras el juego está activo, actualiza la imagen y la lógica muchas veces.
Reglas y detección: Añade puntuación, detección de colisiones y comprobaciones de límites que terminan el juego.
Bloques Que Vas a Usar
Bloques principales: En esta actividad usamos sobre todo bloques de la biblioteca TFT. La pantalla se usa para la interfaz, el personaje y los elementos en movimiento, así que TFT es la biblioteca principal del juego.
Este bloque tiene 5 entradas importantes:
Texto: El texto que se mostrará. También puedes usar una variable.
Posición x / y: Las coordenadas de la esquina superior izquierda.
Color: El color del texto.
Escala: La proporción del tamaño del texto. Haz clic en el pequeño triángulo blanco para ver esta entrada. Un valor de 1 significa que se usa un píxel como unidad mínima, mientras que 60 significa que el texto usa 60 píxeles como unidad.
También necesitamos dos bloques para dibujar figuras: rectángulo y círculo.
5. Diseñar una Herramienta de Texto
- Dibujar texto: La pantalla inicial y la pantalla de final usan texto. Si configuramos tamaño, color y posición cada vez, el trabajo se vuelve repetitivo y fácil de equivocar. Podemos crear un bloque de texto personalizado, una pequeña herramienta de texto, para reutilizar el mismo estilo.
Al llamar este bloque personalizado con diferentes entradas, podemos escribir distintos textos en la pantalla.
En esta herramienta de texto, la posición x está centrada. ¿Por qué debe calcularse así la variable width?
- Dibujar pantallas: Cuando este bloque de texto personalizado está listo, dibujar la pantalla inicial y la de final es más fácil. Llamamos el bloque e introducimos el texto que queremos mostrar, manteniendo un estilo uniforme.
En la pantalla inicial solo necesitamos la información más importante:
El nombre del juego.
Cómo empezar a jugar.
Así el jugador entiende enseguida qué juego es y qué debe pulsar.
La pantalla de final debe mostrar dos cosas:
Que el juego terminó, por ejemplo Game Over.
La puntuación, que es lo que más interesa al jugador.
Por eso preparamos una variable de puntuación llamada score. Cada vez que el jugador gana un punto, score aumenta en 1. Al final del juego, mostramos SCORE: seguido de score.
Prueba distintos valores de scale y posiciones para que las pantallas no se superpongan.
6. Diseñar los Elementos Principales
- Dibujar la pelota: La pelota es el personaje principal. Su posición cambia durante el juego, así que cada actualización debe borrar la pelota anterior y dibujar la nueva. Usa la posición y anterior para cubrir la pelota vieja con el color de fondo y luego dibuja la pelota en la nueva posición.
PS: Aquí, X ball radius significa que la pelota se mantiene cerca del lado izquierdo de la pantalla. Su coordenada x casi no cambia, mientras que la coordenada y sí cambia.
Quizá te preguntes cómo se relacionan previous ball y y ball y. La pelota debe caer automáticamente cuando no se pulsa ningún botón. Si no, quedaría flotando en el aire.
- Movimiento de la pelota: En el mundo real, una pelota cae cada vez más rápido por la aceleración. En el juego usamos dos variables: aceleración y velocidad. Cada fotograma actualiza la velocidad y luego la posición de la pelota.
Puedes configurar tú mismo los valores iniciales de velocidad y aceleración.
Después de actualizar la velocidad, previous ball y guarda el valor de ball y del fotograma anterior:
Cuando el jugador pulsa un botón, la pelota salta hacia arriba. Podemos poner la velocidad en 0 y luego usar la aceleración para mover la pelota hacia arriba. Como esta acción es independiente, la convertimos en una función:
El bloque button pressed solo comprueba si se ha pulsado un botón. La variable playing es booleana e indica si el juego sigue activo. Juntos controlan el ritmo del juego.
Si el jugador pulsa demasiado rápido, la pelota puede salir por la parte superior. Elegimos añadir un techo: cuando ball y sea demasiado pequeño, lo forzamos a volver dentro de la pantalla.
También necesitamos comprobar si la pelota cae por debajo de la pantalla. Podemos comparar ball y con la altura de la pantalla.
Cuando estas partes están completas, el movimiento de la pelota por fotogramas se puede agrupar en una función llamada step ball:
Dibujar los tubos:
Los tubos se parecen a la pelota: borramos la posición anterior y dibujamos la nueva. Pero un tubo no es una sola figura. Tiene una parte superior, una parte inferior y un espacio entre ellas.
Necesitamos controlar:
La posición y altura del tubo superior.
La posición y altura del tubo inferior.
El espacio entre ellos, llamado gap.
Los valores y de los tubos se determinan fácilmente usando la altura de la pantalla, el espacio y 0. La clave del movimiento es pipe x. Para mover el tubo hacia la izquierda, pipe x debe disminuir en cada fotograma.
Como con la pelota, el movimiento del tubo también puede dividirse por fotogramas.
- Primero, mueve el tubo a la izquierda con una velocidad fija:
Para que el juego sea más interesante, la dificultad puede aumentar cuando sube score. Podemos conectar el movimiento de pipe x con score:
- Cuando el tubo se ha movido lo suficiente hacia la izquierda, ya pasó al jugador.
Entonces se reinicia la posición del tubo y se genera aleatoriamente una nueva altura para el siguiente reto.
También podemos crear un bloque step pipe para describir el movimiento del tubo por fotogramas:
- Detección de colisiones: Si la pelota toca un tubo, el juego termina. Como la pelota se mantiene cerca del lado izquierdo y los tubos se mueven, la colisión ocurre cuando el tubo llega a la zona izquierda.
La primera condición es pipe x <= pipe width:
La segunda condición comprueba si la pelota toca el borde superior o inferior del espacio:
Cuando ambas condiciones son verdaderas, define playing como falso para completar la detección de colisiones.
PS: ¿Notaste que los cálculos con ball y suelen incluir / 10? Al inicio multiplicamos ball y por 10 para conseguir un movimiento más suave usando enteros. Al comprobar colisiones o dibujar, recuerda dividir entre 10 para volver a la posición real de la pantalla.
- Definir valores iniciales de variables:
7. Reto
Ya tienes las partes principales de un juego interactivo completo:
Variables -> movimiento -> límites -> colisiones -> puntuación -> pantallas -> mejoras
Prueba a construir el programa en MicroBlocks. Una versión funcional se completa conectando los bloques anteriores:
