XIAO Hopper

Greetings, everyone, and welcome back. Here's something FUN.

The XIAO Hopper, a XIAO ESP32 C6 Based Flappy Bird-inspired game made from scratch.

Here, we use a custom 16x8 WS2812B LED matrix as a display and a button to control the Pixel.

The term XIAO hoppers derives from the fact that this is our version of Flappy Bird, which uses an XIAO Microcontroller; thus, the name XIAO Hopper.

This is our version of Flappy Bird, in which the Bird, represented by a single pixel, moves through gaps in moving pillars on a 16x8 LED matrix. The goal is to avoid hitting the pillars while you navigate between the spaces. The gameplay is handled by a single button, and the challenge grows with time.

The pillars are randomly allocated spaces through which the bird must travel.

When the button is pressed, the bird travels upward; when the button is released, gravity drags it downward.

This Article is about the full build process of this project, so let's get started with the build.

Materials Required

These are the components used in this build.

• XIAO ESP32 C6 DEV board
• CUSTOM PCB (Provided by Seeed Fusion)
• WS2812B LEDs
• Jumper Wires
• Breadboard
• Push Button

XIAO ESP32 C6 DEV BOARD

In this project, we are utilizing the XIAO ESP32 C6 development board, which is based on the ESP32-C6 SoC and features twin 32-bit RISC-V processors, one with a high-performance core operating at 160 MHz and the other with a low-power core running at 20 MHz, enabling efficient multitasking and energy savings.

Its 512KB SRAM and 4MB Flash provide sufficient space for program execution and storage, making it an excellent choice for projects that demand both speed and memory efficiency.

The XIAO ESP32 C6 stands out for its connectivity, which supports advanced protocols such as Wi-Fi 6, Bluetooth 5.3, and Zigbee/Thread, allowing for smooth integration with smart home systems and IoT devices. The board has 11 GPIO pins and various interfaces, such as UART, SPI, I2C, and ADC, allowing for easy connection to sensors and peripherals. Its small footprint (21 x 17.8 mm) and USB Type-C power input make it perfect for space-constrained and portable projects, such as your LED matrix game console.

Visit its product page if you want one, or its wiki page to learn more about the dev board.

https://www.seeedstudio.com/Seeed-Studio-XIAO-ESP32C6-p-5884.html

https://wiki.seeedstudio.com/xiao_esp32c6_getting_started/

16X8 WS2812B LED MATRIX

In this project, we are using one of our previously made matrix projects, which consists of 128 WS2812B LEDs placed in a 16x8 Matrix Layout, with 16 LEDs laid in 16 rows and 8 columns.

Each WS2812B LED is wired in parallel with one another. To control all 128 LEDs, only one GPIO is required because each LED is connected in a unique configuration in which the first LED Dout is connected to the second LED Din port, the second LED Dout is connected to the Din of the third LED, and so on until the last 128th LED.

For a more in-depth look at this display's development process, please see my prior article, in which I briefly explained it.

https://www.hackster.io/Arnov_Sharma_makes/custom-16x8-ws2812-matrix-project-89778d#toc-pcb-design-2

Seeed Studio Fusion

Seeed Fusion PCBService offers one-stop prototyping for PCB manufacture and PCB assembly, and as a result, they produce superior-quality PCBs and fast turnkey PCBAs within 7 working days.

Seeed Studio Fusion PCB Assembly Service takes care of the entire fabrication process, from Seeed Studio Fusion Agile manufacturing and hardware customization to parts sourcing, assembly, and testing services, so you can be sure that they are getting a quality product.

After gauging market interest and verifying a working prototype, Seeed Propagate Service can help you bring the product to market with professional guidance and a strong network of connections.

BREADBOARD ASSEMBLY

• To begin assembly, we place the XIAO ESP32 C6 microcontroller on the breadboard. Then, we add the Push Button next to it.
• We begin the wiring process by connecting the matrix's VCC to XIAO's 5V.
• GND of the matrix is then connected to GND of the XIAO.
• We wired one terminal of the Push Button to GND and the other to GPIO 1.
• The matrix data wire connects to the GPIO0 of the XIAO.

The wiring process is now completed.

CODE

This was the code used in this project and it's a simple one.

#include <Adafruit_NeoMatrix.h>
#define MATRIX_PIN 0
#define MATRIX_WIDTH 16
#define MATRIX_HEIGHT 8
Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(MATRIX_WIDTH, MATRIX_HEIGHT, MATRIX_PIN,
NEO_MATRIX_TOP + NEO_MATRIX_LEFT + NEO_MATRIX_ROWS, NEO_GRB + NEO_KHZ800);
#define BUTTON_PIN 1
int birdY = MATRIX_HEIGHT / 2;
struct Pillar {
int x;
int gapStart;
int gapHeight;
};
Pillar pillars[5];
int gameSpeed = 200; // Initial game speed
int difficultyCounter = 0; // Difficulty tracking
void setup() {
matrix.begin();
matrix.setBrightness(50);
matrix.fillScreen(0);
matrix.show();
pinMode(BUTTON_PIN, INPUT_PULLUP);
for (int i = 0; i < 5; i++) {
pillars[i].x = MATRIX_WIDTH + i * 8;
pillars[i].gapStart = random(2, MATRIX_HEIGHT - 2);
pillars[i].gapHeight = 3;
}
Serial.begin(115200);
}
void loop() {
matrix.fillScreen(0);
// Bird movement based on button hold
if (digitalRead(BUTTON_PIN) == LOW) {
birdY -= 1; // Bird moves upward while button is held
} else {
birdY += 1; // Gravity pulls bird downward when button is released
}
// Clamp bird position to stay within matrix bounds
if (birdY < 0) birdY = 0;
if (birdY >= MATRIX_HEIGHT) birdY = MATRIX_HEIGHT - 1;
// Draw bird
matrix.drawPixel(3, birdY, matrix.Color(255, 255, 0)); // Yellow bird
// Move and draw pillars
uint32_t pillarColor = matrix.Color(128, 0, 128); // Purple for initial difficulty
if (difficultyCounter > 50) {
pillarColor = matrix.Color(255, 0, 0); // Transition to red for higher difficulty
}
for (int i = 0; i < 5; i++) {
pillars[i].x--;
if (pillars[i].x < 0) {
pillars[i].x = MATRIX_WIDTH;
pillars[i].gapStart = random(2, MATRIX_HEIGHT - 2);
difficultyCounter++;
}
for (int y = 0; y < MATRIX_HEIGHT; y++) {
if (y < pillars[i].gapStart || y > pillars[i].gapStart + pillars[i].gapHeight) {
matrix.drawPixel(pillars[i].x, y, pillarColor);
}
}
}
// Collision detection
for (int i = 0; i < 5; i++) {
if (pillars[i].x == 3 && (birdY < pillars[i].gapStart || birdY > pillars[i].gapStart + pillars[i].gapHeight)) {
matrix.fillScreen(matrix.Color(255, 0, 0)); // Game over
matrix.show();
delay(2000);
setup(); // Restart game
return;
}
}
matrix.show();
if (difficultyCounter % 10 == 0 && gameSpeed > 150) {
gameSpeed -= 5;
}
delay(gameSpeed);
}

Let's have a brief breakdown of our code.

We use the Adafruit_NeoMatrix.h library to control the 16x8 WS2812B LED matrix. This library helps us draw pixels, shapes, and animations.

#define MATRIX_PIN 0
#define MATRIX_WIDTH 16
#define MATRIX_HEIGHT 8
Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(MATRIX_WIDTH, MATRIX_HEIGHT, MATRIX_PIN, NEO_MATRIX_TOP + NEO_MATRIX_LEFT + NEO_MATRIX_ROWS, NEO_GRB + NEO_KHZ800);

#define BUTTON_PIN 1

The matrix is initialized to match its physical layout and color format.

BUTTON_PIN connects to a button, which controls the bird's movement.

int birdY = MATRIX_HEIGHT / 2; // Bird starts in the middle vertically
struct Pillar {
  int x;         // Horizontal position
  int gapStart;  // Starting position of the gap
  int gapHeight; // Gap height
};
Pillar pillars[5];

The bird's vertical position (birdY) is tracked.

Pillars are defined with x (horizontal position), gapStart (gap's position), and gapHeight (size).

void setup() {
  matrix.begin();
  matrix.setBrightness(50); // Set LED brightness
  matrix.fillScreen(0);     // Clear the matrix
  matrix.show();

  pinMode(BUTTON_PIN, INPUT_PULLUP); // Button setup

  for (int i = 0; i < 5; i++) {
    pillars[i].x = MATRIX_WIDTH + i * 8; // Spacing pillars evenly
    pillars[i].gapStart = random(2, MATRIX_HEIGHT - 2); // Random gaps
    pillars[i].gapHeight = 3; // Fixed gap height
  }

  Serial.begin(115200); // Serial for debugging
}

This Section prepares the LED matrix, sets the button pin as input, and initializes the pillars.

if (digitalRead(BUTTON_PIN) == LOW) {
  birdY -= 1; // Button pressed, bird goes up
} else {
  birdY += 1; // Button released, gravity pulls bird down
}

if (birdY < 0) birdY = 0;                 // Prevent bird going off-screen
if (birdY >= MATRIX_HEIGHT) birdY = MATRIX_HEIGHT - 1;
matrix.drawPixel(3, birdY, matrix.Color(255, 255, 0)); // Draw yellow bird

The button controls the bird's movement, simulating gravity when released.

The bird's position is clamped within screen bounds and drawn at x=3.

pillars[i].x--;
if (pillars[i].x < 0) {
  pillars[i].x = MATRIX_WIDTH; // Reset pillar position
  pillars[i].gapStart = random(2, MATRIX_HEIGHT - 2); // New random gap
}
for (int y = 0; y < MATRIX_HEIGHT; y++) {
  if (y < pillars[i].gapStart || y > pillars[i].gapStart + pillars[i].gapHeight) {
    matrix.drawPixel(pillars[i].x, y, matrix.Color(128, 0, 128)); // Draw purple pillars
  }
}

Pillars move left and reset with new gap positions when they leave the screen.

if (pillars[i].x == 3 && (birdY < pillars[i].gapStart || birdY > pillars[i].gapStart + pillars[i].gapHeight)) {
  matrix.fillScreen(matrix.Color(255, 0, 0)); // Red screen for Game Over
  matrix.show();
  delay(2000);
  setup(); // Restart game
  return;
}

This Checks if the bird hits a pillar (outside the gap) and Displays "Game Over" in red, then restarts the game.

if (difficultyCounter % 10 == 0 && gameSpeed > 150) {
  gameSpeed -= 5; // Gradually increase game speed
}
delay(gameSpeed);

The game gets harder as the pillars move faster over time.

RESULT and What's next.

Here's the ultimate result of this small build: a working Flappy Bird-like game running on an ESP32-based development board utilizing a custom matrix panel.

We control the movement of the Bird or Pixel using the Push Button; as time passes, the difficulty of the game increases. If we hit any buildings, we are presented with a RED Screen, indicating that the game has ended; the game then resets, and the cycle repeats again.

This is a test project for a small handheld gaming console project that will consist of a single custom matrix PCB with buttons. games will be programmed for that display, and it will look like a Game Boy or similar device but with an RGB LED display. More on the project in the coming months.

Check out a similar project called the Snake game project, which uses PICO 2 and a P64 matrix to run a customized Snake game.

https://www.hackster.io/Arnov_Sharma_makes/snake-game-console-07b378

Leave a comment if you need any help regarding this project. This is it for today, folks.

Thanks to Seeed Studio Fusion for supporting this project.

You guys can check them out if you need great PCB and stencil service for less cost and great quality.

And I'll be back with a new project pretty soon!