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!
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 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.
- A ---> SCL
- Up ---> D9
- Right ---> D10
- Left ---> D11
- Down ---> D12
- 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:
- First go to the MakeCode Arcade page: https://arcade.makecode.com
- Download the Level Up! game onto your ItsyBitsy M4 Express Arcade (see the Downloading games page for instructions)
- 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!
Text editor powered by tinymce.
