ESP32 VGA Arcade Games and Joystick

In this instructable I will show how to reproduce four arcade like games - Tetris - Snake - Breakout - Bomber - using an ESP32, with the output for a VGA monitor.

The resolution is 320 x 200 pixels, in 8 colors. I have previously done a version with an Arduino Uno (see here), but the resolution was only 120 x 60 pixels, 4 colors, and the Arduino memory was almost full. Thanks to the greater performances of the ESP32, both resolution and playability are higher. Furthermore, there is still plenty of memory available, thus adding new games in the future will be straightforward.

I will also show hot to connect a simple joystick trough a RS232 cable. I am using the same pinout of the Commodore 64 one.

This project is made possible by the awesome ESP32 VGA library written by Fabrizio Di Vittorio. See here for more details.

First of all you need to purchase an ESP32 revision 1 or upper. There are many versions available, but I recommend to choose one with many pins, preferibly a model such as the one in this picture, with 38 pins. I am using this version, but I think many other are fine too. On ebay you can find this model for less then 7 Euro, including delivery.

Once you get the board, you need to proceed with the following three sub-steps:

1. Install the last Arduino IDE
2. Configure the ESP32 in the IDE and
3. Download and install the VGA library

Sub-step 1.
There are different methods to program the ESP32, but here you need to use the Arduino IDE (I am using the version 1.8.9, by the way). To install it, you can go to the Arduino IDE page and follow the instructions.

Sub-step 2.
Once the previous operation is done, you need to configure your ESP32 within the Arduino IDE. This is not trivial, since the ESP32 is not (yet?) native in it. You can follow this tutorial, or the following steps.

1) open the Arduino IDE

2) open the preferences window, File/Preference, alternatively press "Ctrl+comma"

3) go to the “Additional Board Manager URLs”, copy and paste the following text:

https://dl.espressif.com/dl/package_esp32_index.js...

and click the OK button .

4) Open boards manager. Go to Tools/Board/Boards Manager…

5) Search for ESP32 and press the install button for the “ESP32 by Espressif Systems“:

6) At this point, when you connect for the first time your ESP32, you should choose the right model in the long list of available ESP32 boards (see the picture in this step). In case of doubts about the model, just choose the generic one, i.e. the first one. It works for me.

7) the system should also choose the right USB (COM) port and the Upload Speed (normally 921600). At this point the connection between your PC and the ESP32 board should be established.

Sub-step 3.
Finally you have to install the FabGL VGA library. Click here to download the complete compressed file. Uncompress it and copy the resulting folder (FabGL-master) in the Arduino IDE libraries folder, which looks like:

"...\arduino-1.8.12\libraries".

Download ESP32_VGA_Tetris_Snake_Breakout_Bomber_V1.0.zip at the bottom of this step.
Unzip and open it with the Arduino IDE, then upload it to your ESP32. If you have no error messages, the code should already be running and you just need to connect the VGA port and buttons (or joystick).

You need the following parts:

• a DSUB15 Connector, i.e. a VGA female connector or a VGA cable to be cut.
• three 270 Ohm resistors.

Connect the ESP32 GPIO pin 2, 15 and 21 to VGA Red, Green and Blue respectively, through the 270 Ohm resistors.

Connect the VGA Hsync and Vsync to ESP32 GPIO pins 17 and 4 respectively.

Connect the DSUB15 connectors pins 5, 6, 7, 8 and 10 to ESP32 GND.

For the VGA DSUB15 connector pin definition, see the picture in this step. NB, this is the soldering side of the female connector.

If you do not have a C64 joystick you can connect four buttons following this step. If yoy have the joystick, you can skip this step and jump to the next one, but you can anyway connect both the buttons and the joystick (they are anyway "in parallel").

The schematic in this step shows how to connect a single button (Normally Open) from +5V to the ESP32 given pin.

Note that you also need to connect the ESP given pin to GND trough a 1 to 5 kOhm resistor. In this way when the button is released (open) the ESP pin is at exactly zero Volts. More specifically, you need to connect four buttons with the following order:

• Pin 12 to Right button
• Pin 25 to Up button
• Pin 14 to Left button
• Pin 35 to Down button

A C64 joystick has the pinout shown in the first picture of this step. To connect it to the ESP32, you need a 9 pin DSUB male connector (i.e., a socket), as shown in the second picture. I removed one with exposed pins from an old electronic board. You can use a heat-gun to remove it (but do it outdoor!).

You need to connect the pins following the numeric order in these pictures. Note that the schematic refers to the joystick side, thus it represent the connection of its female plug. The socket (male) to connect to the ESP32 has the pins with a "mirror" disposition. In case of doubt, remember that the pin number is always reported on the male and female connectors, as shown in the third picture.

If you want to control the games with the joystick only, connect its common pin (9) to ESP32 +5V, and the joystick pins 1, 2, 3, 4 and 6 to the ESP given pins following the following list.

• ESP pin 12 to Right button (RS232 pin 4)
• ESP pin 14 to Left button (RS232 pin 3)
• ESP pin 35 to Down button (RS232 pin 2)

• ESP pin 25 to Up button (RS232 pin 1 and 6, i.e. joystick fire)

NB the ESP pins 12, 14, 25 and 35 must be also connected to GND trough a 1 to 5 kOhm resistor. In this way when the button is released (open) the ESP pin is at exactly zero Volts.

NB2 joystick UP position and fire button are connected together to ESP pin 25-

I have connected four buttons on the PC board, in this way I do not need the joystick to play (although with the joystick is much more funny). Again, the RS232 pin 9 must be connected to +5 V and the joystick pins are just in parallel to the buttons.

If everything works properly, just connect the VGA monitor and you should be able to enjoy some old style game!

You can also draw a Mandelbrot set with a resolution of 640 x 350 pixels, just to test the VGA library capabilities.

Note that the code is written i a way that other games can be easily added in the future (the ESP32 has plenty of space!). I this project gets enough interest, I may do that...

Finally, I wish to express my tanks to Fabrizio Di Vittorio for his awesome ESP32 VGA library. For more details, examples, and... Space Invaders, visit his site.