Here you will learn how to breadboard an Arcade from scratch using an Adafruit Feather M4 Express, a 1.8" TFT screen breakout and a few buttons. If you've already checked out the ItsyBitsy M4 Express page, we'll be following similar steps.
As always, before we get started, make sure you have the parts we've listed below!
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 Feather 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 2
Connect the screen to the Feather M4 Express 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 with how to map the pin to the Feather M4 Express
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 Feather M4 Express. The button hooked up in our example Fritzing diagram below is the 'B' button. The B button is mapped to D6 on the Feather M4 Express.
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 Feather M4 Express.
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 --->D10
- Right ---> D9
- 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 using the Feather M4 Express. It's even more crazy than the ItsyBitsy 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 Eater Princess game onto your Feather 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!
Page last edited March 08, 2024
Text editor powered by tinymce.
