ItsyBitsy M4 Express

In this guide, you will learn how to breadboard an Arcade from scratch using an Adafruit ItsyBitsy M4 Express, a 1.8" TFT screen breakout and a few buttons.

 

Before we get started, make sure you have the parts we've listed below!

1 x Adafruit ItsyBitsy M4 Express
The board that will be running the Arcade game engine and driving the screen.
1 x 1.8" Color TFT LCD display with MicroSD Card Breakout
This will be the screen for your MakeCode Arcade
1 x Full size breadboard
We need a lot for space for a board, a screen and 6 buttons!
1 x Premium Male/Male Jumper Wires - 40 x 6" (150mm)
You are going to need a few cables to wire this all up.
1 x Tactile Button switch (6mm) x 20 pack
Enough buttons for a D-Pad, A, B, Menu. You can use the tiny breadboard buttons or full size Arcade buttons. You will be needing 7 total.

Part 1: Let's connect the screen

Let's begin by getting the screen up and running. First, solder male headers onto both the TFT screen breakout and the ItsyBitsy M4 Express. This makes it so that they can both be mounted easily onto the breadboard.

Above is a diagram that shows you how to connect everything. Be sure to check this out before starting to get a sense of what you'll be connecting. We've also attached the Fritzing file below for just the screen hookup.

Step 1

Mount the screen on the breadboard, next to the ItsyBitsy M4 Express.

Step 2

Connect the screen to the Itsy using male-male jumper cables. Starting from the left pin on the screen, follow the pin mapping specified in the bootloader. We've provided a chart below to show you how to map the pins to the ItsyBitsy.

Step 3

Power up your board and test that you're seeing the bootloader screen. If you have skipped the bootloader steps, now is the time to download it!

 

If you see a white screen or it isn't turning on, please check that every cable is secured and plugged into the breadboard properly.

 

When it all works, unplug the usb cable to continue the guide and get buttons connected.

Part 2 - Connecting the buttons for your Arcade

Next, we're going to hook up all the buttons for your Arcade. We're going to hook up an 'A', "B', "Left", "Right", "Up", "Down" and "Menu" button, which are all used in different ways in some of the games you can code or play on your Makecode Arcade.

Step 1: Hook up a single button

To start, below is a Fritzing diagram that shows how to hook up the ONE button to the ItsyBitsy M4 Express. The button hooked up in our example fritzing diagram below is the 'B' button. The B button is mapped to D7 on the ItsyBitsy M4.

You will be following a similar pattern for the remaining buttons by mapping them to their corresponding pins.

 

Step 2: Hook up the remaining buttons

As you can tell from above, connecting a single button is fairly simple. Below are the final mapping of pins on the breadboard to the ItsyBitsy M4.

Required Pin Mappings:

For the Arcade, you'll need to use the pin mappings below to hook up the remaining 6 buttons (A, Left, Up, Right, Down and Menu). We support 7 buttons in total.

  1. A ---> SCL
  2. Up ---> D9
  3. Right ---> D10
  4. Left ---> D11
  5. Down ---> D12
  6. Menu ---> SDA

With the mappings above, add 6 more switch pins to the bread board and get them all connected! Use the Fritzing diagram below if you need some visuals of how to connect the buttons for your Arcade.

 

We've also attached the Fritzing file in case you wanted an even closer look. Just make sure to download and install the additional Adafruit parts needed to open the file correctly in Fritzing (download here).

And here is what a fully assembled Arcade looks like! It's beautiful isn't it! :-)

Step 3: Load a game!

You've got a fully assembled MakeCode Arcade, so now it's time to load a game onto your Arcade. Here is what you need to do:

  1. First go to the MakeCode Arcade page: https://arcade.makecode.com
  2. Download the Level Up! game onto your ItsyBitsy M4 Express Arcade (see the Downloading games page for instructions)
  3. Play the game! You now should be able to move around and collect the cherries before time runs out!

Congratulations! You've just build your very own MakeCode Arcade board from parts. You can checkout the MakeCode Arcade site for additional games and start making your own as well!

This guide was first published on Jan 18, 2019. It was last updated on Jan 18, 2019. This page (ItsyBitsy M4 Express) was last updated on May 23, 2019.