Atrapa a Makey Robot Videojuego
1-2 hours
Ages 11+
¿Qué vas a hacer?
Crearemos un videojuego con Wio terminal, donde tendrás que atrapar la mayor cantidad de Makey Robots que puedas, y cuidado por que es un robot muy veloz.
¿Qué aprenderás?
Programaremos la interacción utilizando el IMU (Unidad de medición inercial) para movernos dentro del juego, al igual que programaremos niveles de dificultad y un medidor para la puntuación.
Coge tus materiales... ¡empecemos!
Paso 1
Para iniciar a programar, abriremos el Arduino IDE, vamos a preferencias a Additional Boards Manager URLs y pegamos:
“https://files.seeedstudio.com/arduino/package_seeeduino_boards_index.json”
Paso 2
Seleccionamos Herramientas > Tablero > Administrador de tableros, aquí buscaremos Wio Terminal y lo descargamos.Selecciona la entrada en el menú, Herramientas > Tablero. Selección de la Wio Terminal.
Paso 3
Ahora agrega las librerías Sketch > Include Library > Manage Libraries, agregamos “LIS3DHTR”. Para descargar la otra librería vamos a Seeed_Arduino_LCD y la agregamos vamos a Sketch > Include Library > Add ZIP Library.
Paso 4
Abajo de la lupa (Monitor Serial), tenemos un boton y seleccionamos “New Tab”, lo nombraremos “Free_Fonts.h”, dentro de el pegamos el contenido a continuacion: https://raw.githubusercontent.com/Diego-Luna/Maker-Camp-2022/main/Atrapa_a_makey/Free_Fonts.h
Esto para poder tener un mejor control de las fuentes, para nuestra pantalla.
¡Comencemos a codificar!
Paso 5
Es momento de programar, en la parte superior vamos a traer nuestras librerías y crearemos una nueva clase para usarlas:
#include”LIS3DHTR.h”
#include”TFT_eSPI.h”
#include”Free_Fonts.h”
LIS3DHTR<TwoWire> lis;
TFT_eSPI tft;
Paso 6
Vamos a crear las variables que nos ayudarán con nuestro giroscopio, posición de Makey, tiempos y nivel, Crearemos una cadena de caracteres donde almacenaremos el nivel. Tendremos otras dos variables para los colores principales del juego:
float x_values, y_values, z_values;
bool isOnTarget = false;
int MAKEYpos = 0;
unsigned long lastChangeTime = 0;
int MAKEYwaitTime = 0;
int level = 0;
char cadena_1[10];
uint32_t color_1 = TFT_RED;
uint32_t color_2 = 0xD85C5D;
int operation_x = 0;
int operation_y = 0;
Paso 7
Vamos a trabajar en el “void setup” .Iniciaremos la comunicación serial y de nuestro giro sensorial.
Dato importante: Solo se ejecuta una vez cuando encendemos el dispositivo.
void setup() {
Serial.begin(115200);
lis.begin(Wire1);
}
Comprobamos que el Girosensor está funcionando y lo preparamos para usar:
if (!lis) {
Serial.println(“ERROR”);
while (1);
}
lis.setOutputDataRate(LIS3DHTR_DATARATE_25HZ); //Data output rate
lis.setFullScaleRange(LIS3DHTR_RANGE_2G); //Scale range set to 2g
Preparamos nuestra pantalla tft, iniciamos su comunicación, cambiamos la rotación y la ponemos en blanco:
tft.begin();
tft.setRotation(3);
tft.fillScreen(TFT_WHITE);
Es momento de declarar que vamos a hacer en los pines buzzer, los botones, led.
Dato importante: En el “pinMode”, especificamos si es un pin de entrada o salida. Nuestra wio terminal ya los tiene integrados y para llamarlo usamos su nombre, por ejemplo “WIO_5S_PRESS” y le especificamos que nos dará un valor con “INPUT_PULLUP”.
pinMode(WIO_5S_PRESS, INPUT_PULLUP);
pinMode(WIO_KEY_A, INPUT_PULLUP);
pinMode(WIO_KEY_B, INPUT_PULLUP);
pinMode(WIO_KEY_C, INPUT_PULLUP);
pinMode(WIO_BUZZER, OUTPUT);
pinMode(LED_BUILTIN, OUTPUT);
Y para terminar con el “void setup” apagamos nuestro led integrado y llamamos a nuestra función “restar”.
digitalWrite(LED_BUILTIN, LOW);
restar();
}
Paso 8
Crearemos la función “restart”, para reiniciar información en pantalla como el nombre y su sección
void restar()
{
tft.fillScreen(TFT_WHITE);
tft.fillRect( 0, 0, 320, 60, color_1);
tft.setTextColor(TFT_WHITE);
tft.setFreeFont(FF23);
tft.drawString(“Maker Camp”, 10, 15);
}
Paso 9
Vamos a crear el “Void Loop”, donde nos moveremos entre el menú y el juego.
Dato importante: Dentro de “void loop” programaremos la lógica del juego, esto se ejecutará siempre que nuestro arduino tenga electricidad.
void loop() {
if (MAKEYwaitTime == 0) {
menu();
} else {
game();
}
}
Paso 10
Vamos a crear la función “menu”
void menu()
{
}
Dentro de la función escribimos toda la parte gráfica de la pantalla para seleccionar la dificultad.
tft.setTextColor(TFT_BLACK);
tft.setFreeFont(FF22);
tft.drawString(“Select the level”, 75, 80);
tft.setFreeFont(FF21);
tft.drawString(“Easy”, 40, 130);
tft.drawString(“Normal”, 130, 130);
tft.drawString(“Hard”, 240, 130);
tft.drawString(“C”, 55, 170);
tft.drawString(“Button”, 30, 190);
tft.drawRect( 20, 160, 80, 60, TFT_BLACK);
tft.drawString(“B”, 155, 170);
tft.drawString(“Button”, 130, 190);
tft.drawRect( 120, 160, 80, 60, TFT_BLACK);
tft.drawString(“A”, 260, 170);
tft.drawString(“Button”, 235, 190);
tft.drawRect( 225, 160, 80, 60, TFT_BLACK);
Vamos a colocar las dificultades.
if (digitalRead(WIO_KEY_A) == LOW) {
Serial.println(“A Key pressed”);
onButton(260, 170, “A”);
MAKEYwaitTime = 1000;
delay(2000);
restar();
}
else if (digitalRead(WIO_KEY_B) == LOW) {
Serial.println(“B Key pressed”);
onButton(155, 170, “B”);
MAKEYwaitTime = 2000;
delay(2000);
restar();
}
else if (digitalRead(WIO_KEY_C) == LOW) {
Serial.println(“C Key pressed”);
onButton(55, 170, “C”);
MAKEYwaitTime = 4000;
delay(2000);
restar();
}
Paso 11
Ahora crearemos la funcion “onButton”:
void onButton(int x, int y, char *b)
{
tft.fillRect( x – 35, y – 10, 80, 60, color_2);
tft.drawString(b, x, y);
tft.drawString(“Button”, x – 25, y + 20);
}
Paso 12
Ahora programaremos el videojuego, vamos a la parte inferior de nuestro código y creamos nuestra función:
void game()
{
}
Colocamos lo siguiente dentro de la función:
Dato importante: La función “tft.drawString” solo acepta cadena de caracteres, y para transformar a carácter usamos la función “sprintf” que viene por default en el lenguaje c, y los paso a “level” para ponerlo en pantalla.
tft.setTextColor(TFT_WHITE);
tft.setFreeFont(FF21);
tft.fillRect( 240, 10, 75, 17, color_1);
sprintf(cadena_1, “%d”, level);
tft.drawString(cadena_1, 270, 12);
tft.drawString(“Points”, 250, 32);
Guardamos los valores de nuestro giroscopio:
x_values = lis.getAccelerationX();
y_values = lis.getAccelerationY();
Ponemos una condición para cuando no hemos encontrado a Mackay en un tiempo predeterminado, reiniciemos el juego
if (lastChangeTime + MAKEYwaitTime < millis()) {
generateRandomMAKEY();
level = 0;
}
Colocamos dos condiciones, si apretamos el botón, estando en la misma posición que Makey ganamos un punto, y si no es así reiniciamos el juego.
drawHoles();
if (digitalRead(WIO_5S_PRESS) == LOW) {
if (isOnTarget) {
Serial.println(“Hit!”);
digitalWrite(LED_BUILTIN, HIGH);
analogWrite(WIO_BUZZER, 128);
delay(300);
digitalWrite(LED_BUILTIN, LOW);
analogWrite(WIO_BUZZER, 0);
level++;
}
}
if (digitalRead(WIO_5S_PRESS) == LOW) {
if (isOnTarget) {
Serial.println(“Hit!”);
digitalWrite(LED_BUILTIN, HIGH);
analogWrite(WIO_BUZZER, 128);
delay(300);
digitalWrite(LED_BUILTIN, LOW);
analogWrite(WIO_BUZZER, 0);
level++;
} else {
Serial.println(“Miss!”);
level = 0;
delay(300);
}
generateRandomMAKEY();
}
Paso 13
Vamos a crear la función “generateRandomMAKEY”, vamos al final del código y colocamos:
Dato importante: Usamos la Función “random”, para que nos de un número del 0 – 8, siendo un total de 9 posiciones, donde está Makey en la tabla.
void generateRandomMAKEY() {
MAKEYpos = random(0, 9);
lastChangeTime = millis();
}
Paso 14
Es momento de crear la función “drawHoles”. Vamos al final de nuestro código y colocamos:
void drawHoles() {
for (int i = -1; i <= 1; i++) {
for (int j = -1; j <= 1; j++) {
bool isShaded = (((int)(y_values * -5) + operation_y) == i) && (((int)(x_values * 5) – operation_x) == j);
calibrate_game();
int index = (i + 1) + (j + 1) * 3;
tft.fillRect(111 + i * 108, 125 + j * 60, 100, 52, isShaded ? color_2 : TFT_DARKGREY);
if (index == MAKEYpos) {
isOnTarget = isShaded;
if (isShaded == false) {
drawMAKEY(111 + i * 108, 125 + j * 60);
}
}
}
}
}
Paso 15
La función de Calibración, que tomará la poción del giroscopio y lo usa de referencia para la función “drawHoles”.
void calibrate_game() {
if (digitalRead(WIO_KEY_C) == LOW) {
Serial.println(“C Key pressed”);
operation_x = -((int)(x_values * -5));
operation_y = -((int)(y_values * -5));
}
}
Paso 16
La última función es “drawMAKEY”, que nos ayudará a dibujar lo dependiendo la posición en X y Y.
Dato importante: Es muy importante especificar el tipo de dato por ejemplo un número, carácter, etc.
void drawMAKEY(int x, int y) {
tft.fillRect(x, y, 100, 52, TFT_RED);
tft.fillCircle(x + 50, y + 26, 20, TFT_WHITE);
tft.setTextColor(TFT_RED);
tft.setFreeFont(FF22);
tft.drawString(“M”, x + 40, y + 17);
tft.fillRect(x, y + 26 – 4, 30, 8, TFT_WHITE);
tft.fillRect(x + 60, y + 26 – 4, 40, 8, TFT_WHITE);
}
Let's test our code!
Paso 17
Por último vamos a conectar nuestra Wio Terminal a nuestra computadora, Vamos a seleccionar nuestra placa Tools > Board > Seeed samd > Wio Terminal. Después vamos a Tools > Port y seleccionamos nuestra Wio Terminal y subimos nuestro código.
En unos segundos vamos a poder ver nuestro menú en la pantalla de la Wio terminal y es momento de jugar.
Proyecto terminado
¿Qué está pasando aquí?
funciones, variables, botones
Estamos usando los componentes de nuestra Wio terminal para crear un divertido videojuego. Programando funciones, variables, utilizando IMU, botones, la pantalla tft, entre otras cosas más con la Wio Terminal, creamos la lógica de un video juego refrescando la pantalla con nueva información.
¿Qué es lo siguiente?
Ahora experimenta agregando nuevos elementos para personalizar tu videojuego, cambia los colores de Makey Robot o incluye tu inicial, cambia los niveles de dificultad y agrega una nueva sección para guardar los puntos más altos.
Entonces prueba estos proyectos...
Acerca de MoonMakers
MoonMakers — lideradas por Camila and Diego Luna — somos una comunidad de creadores apasionados por el conocimiento. Un Makerspace, un espacio abierto con diferentes máquinas de fabricación digital. Y un canal de YouTube donde promovemos la ciencia, la tecnología y el movimiento maker.
MoonMakers ha colaborado con empresas como: Sesame Street, Make Community y en México con Televisión Educativa y Fundación Televisa, creando contenido educativo.
Hemos imparto talleres por la República Mexicana con: Talent Land, Secretaría de educación en Jalisco, Conacyt, Centro Cultural España.
Materials:
- Wio Terminal
- Cable usbc a usb
