# MakeCode Arcade with SAMD51 M4 ## What is MakeCode Arcade? ![](https://cdn-learn.adafruit.com/assets/assets/000/069/249/medium800/components_hero.png?1547258569) [Microsoft MakeCode Arcade](https://arcade.makecode.com) is a **web-based** beginner-friendly code editor to create **retro arcade games** for the web and for microcontrollers. In this guide, you will learn how to assemble your own Arcade hardware from different parts. MakeCode Arcade is [open source on GitHub](https://github.com/microsoft/pxt-arcade). #### **Arcade is for retro 2D sprite-based games**. Arcade supports a 160x120 screen with 16 colors, and has a 2D game engine with sprites, platformer-style collisions, tile maps, particle systems and more! ![components_duck.gif](https://cdn-learn.adafruit.com/assets/assets/000/069/271/medium640thumb/components_duck.jpg?1547298908) #### **Arcade is a web-based code editor.**   Just like the [MakeCode Circuit Playground Express](https://makecode.adafruit.com) editor, you can use blocks or JavaScript to build your program in your browser. Nothing to install - it just works! ![components_webpage.png](https://cdn-learn.adafruit.com/assets/assets/000/069/252/medium640/components_webpage.png?1547259575) #### **Arcade is friendly to beginners!**   Get started with building your own retro games, using the block editor and the many guides. You don't need to be a programmer to get started! ![components_freindly.png](https://cdn-learn.adafruit.com/assets/assets/000/069/253/medium640/components_freindly.png?1547259716) #### **Arcade is friendly to seasoned programmers too!** Switch to JavaScript and type away. MakeCode supports [**Static TypeScript**](https://makecode.com/language), a special flavor of JavaScript optimized for compilation on micro-controllers. ![components_javascript.png](https://cdn-learn.adafruit.com/assets/assets/000/069/254/medium640/components_javascript.png?1547259792) #### **Arcade runs on hardware (in particular SAMD51)! ** While all games can be shared and played via the web, the fun starts when you compile them for SAMD51-based boards, like the **Adafruit ItsyBitsy M4 Express**. ![components_vlcsnap-2019-01-12-05h25m38s411.png](https://cdn-learn.adafruit.com/assets/assets/000/069/274/medium640/components_vlcsnap-2019-01-12-05h25m38s411.png?1547299573) [Open MakeCode Arcade](https://arcade.makecode.com/) # MakeCode Arcade with SAMD51 M4 ## Bootloader **The bootloader** is piece of software on the board that is responsible for flashing the rest of the board with the program from the user. [Many of the Adafruit M0 and M4 boards, ](https://blog.adafruit.com/2017/04/28/uf2-bootloader-on-express-boards/)as well as others, now come with a UF2 bootloader. The UF2 bootloader emulates a USB (or pen / thumb / flash) drive and lets you flash the board by simply copying a UF2 file onto the drive presented by the board. > Are you trying to build a MakeCode Arcade for Raspberry Pi 0? Try [this guide](https://learn.adafruit.com/makecode-arcade-with-raspberry-pi-zero "MakeCode Arcade for Raspberry Pi0") instead. With **MakeCode Arcade,** we go a step further and let you use the same UF2 file on many different boards, which differ only in the pinout (how things are mapped). To do that, the bootloader contains a small amount of configuration data that specifies which pin is connected to which button, and which pins are connected to the screen. The Arcade program then probes this data at runtime and configures itself accordingly. This way, the same Arcade binary game (UF2 file) could run on a device made of an ItsyBitsy M4, a Feather M4, or another completely custom board that uses the ATSAMD51 microcontroller (MCU). ## Bootloader screen   This is the screen image displayed by the bootloader for an ATSAMD51-based MCU. "D51" is the code name with a green background, and this image helps you configure the MakeCode Arcade editor.   The screen also displays the drive name, **ARCD-D51** in this case. ![components_bootloader.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/279/medium640/components_bootloader.jpg?1547303744) ![components_downloadoptions.png](https://cdn-learn.adafruit.com/assets/assets/000/069/280/medium640/components_downloadoptions.png?1547303876) ## ItsyBitsy M4 Express Bootloader If you have an ItsyBitsy M4, that's great! However, the bootloader that comes with it by default doesn't have the configuration data needed for MakeCode Arcade, mostly because we don't know where you want to connect things beforehand! This means you'll need to update the bootloader on your ItsyBitsy M4; it's very fast and painless to do so. Just follow the steps below: 1. Connect your ItsyBitsy M4 to a computer with a USB cable. Then make sure the ITSYBOOT drive is visible. If it is not appearing, you might need to double-click the reset button for it to show up on your list of drives. 2. Download the UF2 file (below) and copy (or drag) it onto the ITSYBOOT drive. 3. After a few seconds, the LEDs should start blinking on the ItsyBitsy M4, and you can reset it then. 4. Once completed, the ARCD-D51 drive should show up on your computer, which means you have successfully turned your ItsyBitsy M4 into an Arcade MCU! [itsybitsy-arcade-bl-v3.2.2.uf2](https://cdn-learn.adafruit.com/assets/assets/000/069/786/original/itsybitsy-arcade-bl-v3.2.2.uf2?1548262016) ## Feather M4 Express bootloader If you want to use a Feather M4 to build your arcade, instead of the ItsyBitsy M4, use the bootloader below. Drop it on the Patcher site to see the pinout!   [feather-arcade-bl-v3.2.2.uf2](https://cdn-learn.adafruit.com/assets/assets/000/069/787/original/feather-arcade-bl-v3.2.2.uf2?1548262022) ## Custom configuration data Earlier, we mentioned that configuration data is necessary for the bootloader. You can view the configuration data by dragging and dropping the UF2 file onto our page here: https://microsoft.github.io/uf2/patcher/ When you do this with any of the bootloaders we've provided above, you will see how buttons and the screen are to be connected, such as this example below: PIN\_BTN\_A = PIN\_SCL PIN\_BTN\_B = PIN\_D7 PIN\_BTN\_DOWN = PIN\_D12 PIN\_BTN\_LEFT = PIN\_D11 PIN\_BTN\_MENU = PIN\_SDA PIN\_BTN\_RIGHT = PIN\_D9 PIN\_BTN\_UP = PIN\_D10 PIN\_DISPLAY\_BL = PIN\_A5 PIN\_DISPLAY\_CS = PIN\_A2 PIN\_DISPLAY\_DC = PIN\_A3 PIN\_DISPLAY\_MISO = PIN\_MISO PIN\_DISPLAY\_MOSI = PIN\_MOSI PIN\_DISPLAY\_RST = PIN\_A4 PIN\_DISPLAY\_SCK = PIN\_SCK If you decide to use other pins, just copy the configuration lines you want to change to the text area on top of the page, change the setting, and hit the \*\*Apply my patch\*\* button. This will generate a new bootloader updater, that you can apply just like those we've provided above. # MakeCode Arcade with SAMD51 M4 ## 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! ![components_vlcsnap-2019-01-12-05h25m38s411.png](https://cdn-learn.adafruit.com/assets/assets/000/069/276/medium640/components_vlcsnap-2019-01-12-05h25m38s411.png?1547300984) ![](https://cdn-learn.adafruit.com/assets/assets/000/069/416/medium800/components_P1060161.jpg?1547593949) ### Part: Adafruit ItsyBitsy M4 Express quantity: 1 The board that will be running the Arcade game engine and driving the screen. [Adafruit ItsyBitsy M4 Express](https://www.adafruit.com/product/3800) ### Part: 1.8" Color TFT LCD display with MicroSD Card Breakout quantity: 1 This will be the screen for your MakeCode Arcade [1.8" Color TFT LCD display with MicroSD Card Breakout](https://www.adafruit.com/product/358) ### Part: Full size breadboard quantity: 1 We need a lot for space for a board, a screen and 6 buttons! [Full size breadboard](https://www.adafruit.com/product/239) ### Part: Premium Male/Male Jumper Wires - 40 x 6" (150mm) quantity: 1 You are going to need a few cables to wire this all up. [Premium Male/Male Jumper Wires - 40 x 6" (150mm)](https://www.adafruit.com/product/758) ### Part: Tactile Button switch (6mm) x 20 pack quantity: 1 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. [Tactile Button switch (6mm) x 20 pack](https://www.adafruit.com/product/367) ## 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. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/296/medium800/components_makecode-arcade-itsybitsy-m4-express-screen_bb.png?1547326476) 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. [MakeCode Arcade ItsyBitsy M4 Express Screen Hookup.fzz](https://cdn-learn.adafruit.com/assets/assets/000/069/580/original/MakeCode-Arcade-ItsyBitsy-M4-Express-Screen-Hookup.fzz?1547781754) ### Step 1 Mount the screen on the breadboard, next to the ItsyBitsy M4 Express. ![components_P1060172.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/356/medium640/components_P1060172.jpg?1547516047) ### 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. ![components_P1060205.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/357/medium640/components_P1060205.jpg?1547516196) ![](https://cdn-learn.adafruit.com/assets/assets/000/069/392/medium800/components_ItsyBitsyScreenMapping.png?1547589911) ### 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. ![components_P1060207.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/358/medium640/components_P1060207.jpg?1547517000) ## 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.   ![](https://cdn-learn.adafruit.com/assets/assets/000/069/297/medium800/components_makecode-arcade-itsybitsy-m4-express-A-button_bb.png?1547326658) ### 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.   ![](https://cdn-learn.adafruit.com/assets/assets/000/069/360/medium800/components_makecode-arcade-itsybitsy-m4-express_bb.png?1547517750) 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](https://github.com/adafruit/Fritzing-Library)). [MakeCode Arcade ItsyBitsy M4-Express (All Buttons).fzz](https://cdn-learn.adafruit.com/assets/assets/000/069/579/original/MakeCode-Arcade-ItsyBitsy-M4-Express-All-Buttons.fzz?1547781406) And here is what a fully assembled Arcade looks like! It's beautiful isn't it! :-) ![](https://cdn-learn.adafruit.com/assets/assets/000/069/362/medium800/components_P1060220.jpg?1547520558) ### 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](https://arcade.makecode.com) 2. Download the Level Up! game onto your ItsyBitsy M4 Express Arcade (see the [Downloading games](#h_60852811411547780462044) page for instructions) 3. Play the game! You now should be able to move around and collect the cherries before time runs out! ![](https://cdn-learn.adafruit.com/assets/assets/000/069/364/medium800/components_P1060226.jpg?1547520714) 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! # MakeCode Arcade with SAMD51 M4 ## Feather M4 Express 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! ![components_P1060292.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/432/medium640/components_P1060292.jpg?1547599955) ![](https://cdn-learn.adafruit.com/assets/assets/000/069/422/medium800/components_P1060234.jpg?1547597726) ### Part: Adafruit Feather M4 Express quantity: 1 The board that will be running the Arcade game engine and driving the screen. [Adafruit Feather M4 Express](https://www.adafruit.com/product/3857) ### Part: 1.8" Color TFT LCD display with MicroSD Card Breakout quantity: 1 This will be the screen for your MakeCode Arcade [1.8" Color TFT LCD display with MicroSD Card Breakout](https://www.adafruit.com/product/358) ### Part: Full size breadboard quantity: 1 We need a lot for space for a board, a screen and 6 buttons! [Full size breadboard](https://www.adafruit.com/product/239) ### Part: Premium Male/Male Jumper Wires - 40 x 6" (150mm) quantity: 1 You are going to need a few cables to wire this all up. [Premium Male/Male Jumper Wires - 40 x 6" (150mm)](https://www.adafruit.com/product/758) ### Part: Tactile Button switch (6mm) x 20 pack quantity: 1 Enough buttons for a D-Pad, A, B, Menu. You can use the tiny breadboard buttons or full size Arcade buttons. [Tactile Button switch (6mm) x 20 pack](https://www.adafruit.com/product/367) ### 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. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/433/medium800/components_makecode-arcade-feather-m4-express-no-button_bb.png?1547600461) 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. [MakeCode Arcade Feather M4 Express Screen Hookup.fzz](https://cdn-learn.adafruit.com/assets/assets/000/069/581/original/MakeCode-Arcade-Feather-M4-Express-Screen-Hookup.fzz?1547782326) ### Step 1   Mount the screen and the Feather M4 Express onto the breadboard. ![components_P1060250.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/424/medium640/components_P1060250.jpg?1547597857) ### 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 ![components_P1060261.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/425/medium640/components_P1060261.jpg?1547597938) ![components_P1060257.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/426/medium640/components_P1060257.jpg?1547597999) ![](https://cdn-learn.adafruit.com/assets/assets/000/069/406/medium800/components_FeatherM4ScreenMapping.png?1547591364) ### 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. ![components_P1060272.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/428/medium640/components_P1060272.jpg?1547599253) ![components_P1060276.jpg](https://cdn-learn.adafruit.com/assets/assets/000/069/429/medium640/components_P1060276.jpg?1547599344) ## 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.   ![](https://cdn-learn.adafruit.com/assets/assets/000/069/435/medium800/components_makecode-arcade-feather-m4-express-one_button_bb.png?1547601415) 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. 1. **A** ---\> **SCL** 2. **Up**  ---\> **D10** 3. **Right** ---\> **D9** 4. **Left** ---\> **D11** 5. **Down** ---\> **D12** 6. **Menu** ---\> **SDA** Warning: 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. ![](https://cdn-learn.adafruit.com/assets/assets/000/069/434/medium800/components_makecode-arcade-feather-m4-express-all_button_bb.png?1547601389) 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](https://github.com/adafruit/Fritzing-Library)). [MakeCode Arcade Feather M4 Express All Buttons.fzz](https://cdn-learn.adafruit.com/assets/assets/000/069/582/original/MakeCode-Arcade-Feather-M4-Express-All-Buttons.fzz?1547782676) 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?! ![](https://cdn-learn.adafruit.com/assets/assets/000/069/430/medium800/components_P1060287.jpg?1547599731) ### 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](https://arcade.makecode.com) 2. Download the Eater Princess game onto your Feather M4 Express Arcade (see the[Downloading games](#h_23822386411547780392888) page for instructions) 3. Play the game! You now should be able to move around and collect the cherries before time runs out! ![](https://cdn-learn.adafruit.com/assets/assets/000/069/431/medium800/components_P1060296.jpg?1547599070) 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! # MakeCode Arcade with SAMD51 M4 ## Downloading Games ![](https://cdn-learn.adafruit.com/assets/assets/000/069/264/medium800/components_29-_1060119.jpg?1547261479 A single-button Arcade game using Adafruit Itsy Bitsy M4 Express) Once you have a game working on the MakeCode Arcade web editor, it's time to download it and flash it onto your Adafruit board. There are essentially two ways to do it: 1. Using WebUSB in the browser. More details can be found here: [**WebUSB**](https://wicg.github.io/webusb/) 2. You can also drag and drop a .uf2 file. You can find additional games by: 1. Opening https://arcade.makecode.com in your favorite browser 2. Either open a game that we've provided or start creating your own! ## Downloading a game through WebUSB If you are in a [WebUSB-enabled browser](https://caniuse.com/#feat=webusb) (most likely Chrome), you will be prompted to pair your device with your browser. In fact, you will be prompted **twice** to pair the device in application mode and in bootloader mode (they are essentially two different devices). Once the pairing is completed, flashing will happen automatically in future. Here is how you do it: 1. Connect your board to your computer with a micro-USB cable. 2. Press the **Download** button on the Arcade interface in the browser you are using. If it is unpaired, you will be taken through a wizard to pair the application device and bootloader device. 3. Wait a few seconds, and your board will be flashed! ## Downloading a game with a drag and drop .uf2 file When WebUSB is not available, you can always use the drag and drop flow. Here is how you do it: 1. Connect your board to your computer with a micro-USB cable. 2. Press the reset button to put your device in bootloader mode. You should see the bootloader picture with the big **D51** sign. 3. Press on the **Download** button in the Arcade editor and select the **D51** hardware platform. 4. Drag and drop the generated **arcade-YOURGAME.uf2** file into the **ARCD-D51** drive. 5. Wait a few seconds and the board will restart in the game! # MakeCode Arcade with SAMD51 M4 ## Sharing Games There are plenty of ways to share games with your friends, family and anyone else who you think might enjoy something you've created! Let's quickly go over a few of your options. ### Online page Click on the **Share** button and follow the steps to upload a version of your game online. It will generate a URL for you.   Anyone with the generated URL will be able to play in a full screen mode, or edit your game! They'll also be able to download it onto their own Arcade if they have one.   This page supports oEmbed and other various embedding options. ![components_share.png](https://cdn-learn.adafruit.com/assets/assets/000/069/281/medium640/components_share.png?1547307183) ![components_sharedialog.png](https://cdn-learn.adafruit.com/assets/assets/000/069/282/medium640/components_sharedialog.png?1547307249) ![components_embed.png](https://cdn-learn.adafruit.com/assets/assets/000/069/283/medium640/components_embed.png?1547307576) ### Save into an image Click the disk icon will save your code into a PNG image. You can import the image back or simply drag and drop it into the editor to reload the code.   The image below contains the **falling duck** game. ![components_save.png](https://cdn-learn.adafruit.com/assets/assets/000/069/286/medium640/components_save.png?1547307874) ![](https://cdn-learn.adafruit.com/assets/assets/000/069/287/medium800/components_arcade-falling-duck_%281%29.png?1547307938) Info: ## Downloaded .UF2 files Downloaded .uf2 files also contain the game code. You can import them or drag and drop them into the editor to reload the code. ## GitHub repo You can also use GitHub repositories to store and share your code. This is particularily useful if you end up building a lot of code or if you want to share an extension with other users. Read all about getting started with GitHub at https://makecode.com/extensions/github-authoring . # MakeCode Arcade with SAMD51 M4 ## Resources ## Bootloaders Attached below are the current boards we support for building your own MakeCode Arcade. More will be coming soon! [itsybitsy-arcade-bl-v3.2.1.uf2](https://cdn-learn.adafruit.com/assets/assets/000/069/583/original/itsybitsy-arcade-bl-v3.2.1.uf2?1547782942) [feather-arcade-bl-v3.2.1.uf2](https://cdn-learn.adafruit.com/assets/assets/000/069/584/original/feather-arcade-bl-v3.2.1.uf2?1547782950) ## Fritzing files Attached below are the Fritzing files for the supported boards from the guide! [MakeCode Arcade ItsyBitsy M4 Express All Buttons.fzz](https://cdn-learn.adafruit.com/assets/assets/000/069/585/original/MakeCode-Arcade-ItsyBitsy-M4-Express-All-Buttons.fzz?1547783020) [MakeCode Arcade Feather M4 Express All Buttons.fzz](https://cdn-learn.adafruit.com/assets/assets/000/069/586/original/MakeCode-Arcade-Feather-M4-Express-All-Buttons.fzz?1547783046) ## Featured Products ### 1.8" SPI TFT display, 160x128 18-bit color - ST7735R driver [1.8" SPI TFT display, 160x128 18-bit color - ST7735R driver](https://www.adafruit.com/product/618) We just love this little 1.8" TFT display, with true TFT color (up to 18-bits per pixel!), fine 160x128 resolution, two white LED backlight that runs on 3.3V and a very easy SPI interface that requires only 4 or 5 digital pins to send pixels to the display. **Please...** Out of Stock [Buy Now](https://www.adafruit.com/product/618) [Related Guides to the Product](https://learn.adafruit.com/products/618/guides) ### Adafruit ItsyBitsy M4 Express featuring ATSAMD51 [Adafruit ItsyBitsy M4 Express featuring ATSAMD51](https://www.adafruit.com/product/3800) What's smaller than a Feather but larger than a Trinket? It's an **Adafruit ItsyBitsy M4 Express** featuring the **Microchip ATSAMD51**! Small, powerful, with a ultra fast ATSAMD51 Cortex M4 processor running at 120 MHz - this microcontroller board is perfect... Out of Stock [Buy Now](https://www.adafruit.com/product/3800) [Related Guides to the Product](https://learn.adafruit.com/products/3800/guides) ### Adafruit Feather M4 Express - Featuring ATSAMD51 [Adafruit Feather M4 Express - Featuring ATSAMD51](https://www.adafruit.com/product/3857) It's what you've been waiting for, the Feather M4 Express featuring ATSAMD51. This Feather is fast like a swift, smart like an owl, strong like a ox-bird (it's half ox, half bird, OK?) This feather is powered by our new favorite chip, the **ATSAMD51J19** -  with... In Stock [Buy Now](https://www.adafruit.com/product/3857) [Related Guides to the Product](https://learn.adafruit.com/products/3857/guides) ### Tactile Button switch (6mm) x 20 pack [Tactile Button switch (6mm) x 20 pack](https://www.adafruit.com/product/367) Little clicky switches are standard input "buttons" on electronic projects. These work best in a PCB but [can be used on a solderless breadboard as shown in this tutorial](https://learn.adafruit.com/adafruit-arduino-lesson-6-digital-inputs?view=all). The pins are normally... In Stock [Buy Now](https://www.adafruit.com/product/367) [Related Guides to the Product](https://learn.adafruit.com/products/367/guides) ## Related Guides - [Adafruit Feather M4 Express](https://learn.adafruit.com/adafruit-feather-m4-express-atsamd51.md) - [Multi-tasking with CircuitPython](https://learn.adafruit.com/multi-tasking-with-circuitpython.md) - [CircuitPython displayio Setup for TFT FeatherWings](https://learn.adafruit.com/using-circuitpython-displayio-with-a-tft-featherwing.md) - [Playa Festival Bike](https://learn.adafruit.com/playa-festival-bike.md) - [Using Python on Windows 10](https://learn.adafruit.com/using-python-on-windows-10.md) - [Make It Glow With Crickit](https://learn.adafruit.com/make-it-glow-with-crickit.md) - [Using LoraWAN and The Things Network with CircuitPython](https://learn.adafruit.com/using-lorawan-and-the-things-network-with-circuitpython.md) - [Adafruit 1.14" 240x135 Color TFT Breakout LCD Display](https://learn.adafruit.com/adafruit-1-14-240x135-color-tft-breakout.md) - [Quickstart using Adafruit eInk/ePaper displays with CircuitPython](https://learn.adafruit.com/quickstart-using-adafruit-eink-epaper-displays-with-circuitpython.md) - [Multi-Sensor IoT Environmental Sensor Box With CircuitPython](https://learn.adafruit.com/remote-iot-environmental-sensor.md) - [NeoPixel Run LED Arcade Game](https://learn.adafruit.com/pixel-chase-game.md) - [CircuitPython 101: State Machines, Two Ways](https://learn.adafruit.com/circuitpython-101-state-machines.md) - [Arcade Synth Controller](https://learn.adafruit.com/arcade-synth-controller.md) - [Esenciales para CircuitPython](https://learn.adafruit.com/esenciales-para-circuitpython.md) - [CircuitPython Essentials](https://learn.adafruit.com/circuitpython-essentials.md) - [Living Ventriloquist Dummy with MONSTER M4SK Eyes](https://learn.adafruit.com/living-ventriloquist-dummy-with-monster-m4sk-eyes.md)