Catch Makey Robot Video Game
1-2 hours
Ages 11+
What Will You Make?
We will create a video game with Wio terminal, where you will have to catch as many Makey Robots as you can, and be careful because it is a very fast robot.
What Will You Learn?
We will program the interaction using the IMU (Inertial Measurement Unit) to move within the game, as well as programming difficulty levels and a meter for scoring.
Grab your materials...let's get started!
Step 1
To start programming, we will open the Arduino IDE, go to preferences to Additional Boards Manager URLs and paste:
“https://files.seeedstudio.com/arduino/package_seeeduino_boards_index.json”
Step 2
We select Tools > Dashboard > Dashboard Manager, here we will search for Wio Terminal and download it. Select the entry in the menu, Tools > Dashboard. Selection of the Wio Terminal.
Step 3
Now add Sketch > Include Library > Manage Libraries, we add “LIS3DHTR”. To download the other library we go to Seeed_Arduino_LCD and add it by going to Sketch > Include Library > Add ZIP Library.
Step 4
Below the magnifying glass (Monitor Serial), we have a button and select “New Tab”, we will name it “Free_Fonts.h”, inside it we paste the following content: https://raw.githubusercontent.com/Diego-Luna/Maker-Camp-2022/main/Atrapa_a_makey/Free_Fonts.h
This to be able to have a better control of the sources, for our screen.
Let's start coding!
Step 5
It’s time to program, at the top we will bring our libraries and create a new class to use them:
#include”LIS3DHTR.h”
#include”TFT_eSPI.h”
#include”Free_Fonts.h”
LIS3DHTR<TwoWire> lis;
TFT_eSPI tft;
Step 6
We are going to create the variables that will help us with our gyroscope, Makey position, times and level. We will create a character string where we will store the level. We will have two other variables for the main colors of the game:
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;
Step 7
We are going to work on the “void setup”. We will start the serial communication and our sensory turn.
Important fact: It only runs once when we turn on the device.
void setup() {
Serial.begin(115200);
lis.begin(Wire1);
}
We check that the Gyro Sensor is working and prepare it for use:
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
We prepare our tft screen, start its communication, change the rotation and make it blank:
tft.begin();
tft.setRotation(3);
tft.fillScreen(TFT_WHITE);
It is time to declare what we are going to do in the buzzer pins, buttons, LED.
Important fact: In the “pinMode”, we specify if it is an input or output pin. Our wio terminal already has them integrated and to call it we use its name, for example “WIO_5S_PRESS” and we specify that it will give us a value with “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);
And to finish with the “void setup” we turn off our integrated led and call our “subtract” function.
digitalWrite(LED_BUILTIN, LOW);
restar();
}
Step 8
We will create the “restart” function, to restart information on the screen such as the name and its section.
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);
}
Step 9
We are going to create the “Void Loop”, where we will move between the menu and the game.
Important fact: Within “void loop” we will program the logic of the game, this will be executed as long as our arduino has electricity.
void loop() {
if (MAKEYwaitTime == 0) {
menu();
} else {
game();
}
}
Step 10
Let’s create the “menu” function.
void menu()
{
}
Inside the function we write all the graphic parts of the screen to select the difficulty.
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);
Let’s put the difficulties.
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();
}
Step 11
Now we will create the “onButton” function:
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);
}
Step 12
Now we will program the video game, we go to the bottom of our code and create our function:
void game()
{
}
We put the following inside the function:
Important fact: The function “tft.drawString” only accepts character string, and to transform to character we use the function “sprintf” that comes by default in the c language, and I pass them to “level” to put it on screen.
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);
We save the values of our gyroscope:
x_values = lis.getAccelerationX();
y_values = lis.getAccelerationY();
We put a condition that when we have not found Mackay in a predetermined time, we restart the game
if (lastChangeTime + MAKEYwaitTime < millis()) {
generateRandomMAKEY();
level = 0;
}
We place two conditions, if we press the button, being in the same position as Makey we win a point, and if not, we restart the game.
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();
}
Step 13
We are going to create the “generateRandomMAKEY” function, we go to the end of the code and place:
Important fact: We use the “random” function, so that it gives us a number from 0 – 8, being a total of 9 positions, where Makey is in the table.
void generateRandomMAKEY() {
MAKEYpos = random(0, 9);
lastChangeTime = millis();
}
Step 14
It’s time to create the “drawHoles” function. We go to the end of our code and place:
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);
}
}
}
}
}
Step 15
The Calibration function, which will take the potion from the gyroscope and use it as a reference for the function “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));
}
}
Step 16
The last function is “drawMAKEY”, which will help us to draw it depending on the position in X and Y.
Important data: It is very important to specify the data type, for example a number, character, 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!
Step 17
Finally we are going to connect our Wio Terminal to our computer, We are going to select our board Tools > Board > Seeed samd > Wio Terminal. Then we go to Tools > Port and select our Wio Terminal and upload our code.
In a few seconds we will be able to see our menu on the Wio terminal screen and it’s time to play.
Finished Project
What Is Happening Here?
functions, variables, buttons
We are using the components of our Wio terminal to create a fun video game. Programming functions, variables, using IMU, buttons, the tft screen, among other things with the Wio Terminal, we create the logic of a video game by refreshing the screen with new information.
What Is Next?
Now experiment by adding new elements to customize your video game, change the colors of Makey Robot or include your initial, change the difficulty levels and add a new section to save the highest points.
Then try these projects...
About MoonMakers
MoonMakers — led by Camila and Diego Luna — are a community of creators passionate about knowledge. A Makerspace, an open space with different digital manufacturing machines. And a YouTube channel where we promote science, technology and the maker movement.
MoonMakers have collaborated with companies such as: Sesame Street, Make Community and in Mexico with Educational Television and Fundación Televisa, creating educational content.
We have given workshops throughout the Mexican Republic with: Talent Land, Secretary of Education in Jalisco, Conacyt, Centro Cultural España.
Materials:
- Wio Terminal
- Usbc to usb cable
