Button Freak: DIY ESP32 Game Console Make Yours Now

Welcome to the Button Freak Instructable! In this guide, we'll walk through the process of creating a DIY game console using the ESP32 FireBeetle. This console features two classic games: Snake and Bouncing Ball. We'll also cover how to use a single button for navigation and gameplay, and how to include custom icons in your project.

Supplies

Beetle ESP32 C6 Mini: The microcontroller for this project. [Link To Purchase]

Fermion: 2.0" 320X240 IPS TFT Display: 320x240 IPS LCD. [Link To Purchase]

Button: Single button for navigation and gameplay.

Buzzer: For sound effects.

Power Supply: Battery or USB power source.

Step 1: Software

Development Environment: Arduino IDE.

Libraries:
DFRobot_GDL - For display handling.

Icons

Icons: Downloaded as 32x32 pixel images, converted into byte arrays using the image2array online tool. Convert the images to byte array and paste them in your code.

Step 2: Wiring

Connect the Display:

Follow the display’s wiring instructions to connect it to the ESP32. Ensure all connections are correct and secure.

Connect the Button:

Wire the single button to the ESP32. This button will be used for navigating the menu and controlling gameplay.

Connect the Buzzer:

Connect the buzzer to the ESP32 to enable sound effects.

Step 3: Building the Hardware

Assemble the Components:

Attach the display, button, and buzzer to the ESP32. If needed, use a breadboard or solder the components onto a PCB.

Enclosure (Optional):

Design and build an enclosure for your game console if desired. You can use materials like acrylic or 3D-print a custom case.

Step 4: Programming the Console

Clone the Repository:

git clone https://github.com/hackhobby-lab/button_freak.git

cd button-freak

Open the Project:

Open the project in your Arduino IDE.

Install Required Libraries:

Install the DFRobot_GDL library and any other necessary libraries.

Upload the Code:

Select the correct board and port in your IDE.
Upload the code to the ESP32.

Step 5: Code Overview

Icon Integration:

Icons are included as byte arrays in the code. You can replace or add new icons by converting images into byte arrays using the
image2cpp tool and updating the code.


const unsigned char snakeio [] PROGMEM = { //Its for snake icon
    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xfc, 0x00, 0x00, 0x03, 0xff, 0x00, 0x00,
    0x07, 0xff, 0x80, 0x00, 0x0f, 0x7f, 0xc0, 0x00, 0x2f, 0xff, 0xe0, 0x00, 0x3f, 0xff, 0xe0, 0x00,
    0x37, 0xe7, 0xf0, 0x00, 0x03, 0x81, 0xf0, 0x00, 0x00, 0x1e, 0xf0, 0x00, 0x00, 0x0e, 0x70, 0x00,
    0x00, 0x0f, 0x70, 0x00, 0x00, 0x0f, 0x70, 0x00, 0x00, 0x0f, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00,
    0x00, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xfe, 0x00, 0x0f, 0xff, 0xff, 0x00, 0x1f, 0xff, 0xff, 0x80,
    0x1f, 0xff, 0xff, 0x80, 0x0f, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x07, 0x7f, 0xff, 0xff, 0xcf,
    0xff, 0xff, 0xff, 0xe7, 0xff, 0xff, 0xff, 0xf7, 0xff, 0xff, 0xff, 0xf6, 0xff, 0xff, 0xff, 0xf4,
    0x7f, 0xff, 0xff, 0xe0, 0x3f, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};

Single Button Navigation:

The single button is used to navigate through the menu and interact with the games. Here’s a simplified example of how the button is handled in the code:


void loop() {
  if (buttonPressed()) {
    // Navigate or interact based on current state
    switch (currentState) {
      case MAIN_MENU:
        // Navigate menu
        break;
      case GAME_PLAY:
        // Control game
        break;
    }
  }
}

Step 6: Game Mechanics

Snake Game:

Use the single button to control the snake’s direction. The game will display on the screen, and you need to avoid collisions to score high.

Bouncing Ball Game:

Control the paddle with the single button to keep the ball bouncing and score points. The game mechanics are similar to classic arcade games.

Step 7: Troubleshooting

Display Issues: Check all wiring connections and ensure the display library is correctly installed.

Button Response: Ensure the button is connected properly and debounce logic is implemented.

Sound Problems: Verify buzzer connections and test the sound functions in the code.

Step 8: Customization

The Button Freak project combines retro gaming with modern microcontroller technology. It’s a fun and educational way to build your own game console. I hope this guide helps you in creating your own Button Freak console and customizing it to your liking.

Introduction: Button Freak: DIY ESP32 Game Console Make Yours Now