# Custom Controllers for MakeCode Arcade ## Overview [MakeCode Arcade](https://arcade.makecode.com) is a retro-gaming code editor to build cute 2D 1980's looking games. Arcade is well know here in Adafruit as it allows anyone to create games for the [pyBadge](https://www.adafruit.com/product/4200) or [pyGamer](https://www.adafruit.com/product/4242). In this guide, we'll focus on a different approach: building custom controllers to play Aracde games in the browser. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/720/medium800thumb/microcontrollers_m.jpg?1571700115) ## Parts You can choose from a number of microcontrollers supported in Microsoft MakeCode for Circuit Playground Express or MakeCode Maker. The Adafruit Circuit Playground Express has all kinds of sensors, buttons, and capacitive touch pads to make keypresses. But even the Adafruit Feather Express or Trinket M0 can be used in MakeCode Maker. Tailor your needs to the boards available or have on hand. ### Microcontrollers ### Circuit Playground Express [Circuit Playground Express](https://www.adafruit.com/product/3333) **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to... In Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ![A Black woman's manicured hand holds a round microcontroller with lit up LEDs.](https://cdn-shop.adafruit.com/640x480/3333-05.jpg) ### Adafruit Feather M0 Express [Adafruit Feather M0 Express](https://www.adafruit.com/product/3403) At the Feather M0's heart is an ATSAMD21G18 ARM Cortex M0+ processor, clocked at 48 MHz and at 3.3V logic, the same one used in the new [Arduino Zero](https://www.adafruit.com/products/2843). This chip has a whopping 256K of FLASH (8x more than the Atmega328 or 32u4) and... In Stock [Buy Now](https://www.adafruit.com/product/3403) [Related Guides to the Product](https://learn.adafruit.com/products/3403/guides) ![Angled shot of rectangular microcontroller.](https://cdn-shop.adafruit.com/640x480/3403-04.jpg) ### Adafruit Trinket M0 - for use with CircuitPython & Arduino IDE [Adafruit Trinket M0 - for use with CircuitPython & Arduino IDE](https://www.adafruit.com/product/3500) The Adafruit Trinket M0 may be small, but do not be fooled by its size! It's a tiny microcontroller board, built around the Atmel ATSAMD21, a little chip with _a lot_ of power. We wanted to design a microcontroller board that was small enough to fit into any project, and low... In Stock [Buy Now](https://www.adafruit.com/product/3500) [Related Guides to the Product](https://learn.adafruit.com/products/3500/guides) ![Manicured hand holding Trinket M0.](https://cdn-shop.adafruit.com/640x480/3500-04.jpg) ## Switches Adafruit carries a huge array of switches, including arcade buttons. You can use alligator clips or wires to connect them to your microcontroller. Here are just two of the dozens of products you can choose from on [adafruit.com](https://www.adafruit.com/). ### Arcade Button - 30mm Translucent Clear [Arcade Button - 30mm Translucent Clear](https://www.adafruit.com/product/471) A button is a button, and a switch is a switch, but these translucent arcade buttons are in a class of their own. They're the same size as common arcade controls (often referred to as 30mm diameter) but have some nice things going for them that justify the extra dollar. First,... In Stock [Buy Now](https://www.adafruit.com/product/471) [Related Guides to the Product](https://learn.adafruit.com/products/471/guides) ![Angled shot of a clear round 30mm arcade button. ](https://cdn-shop.adafruit.com/640x480/471-00.jpg) ## USB Cable Do get a known good USB cable. An extra long, bendy one like the purple one below work exceptionally well. # Custom Controllers for MakeCode Arcade ## Everything is a Keyboard The browser-based Arcade game player supports a number of inputs like keyboard, mouse or gamepads. **If you can emulate a keyboard, you can build a controller!** The idea to build custom controller by emulating a keyboard was pionered by Makey Makey. In this guide, we will show how to use MakeCode to turn your beloved Adafruit boards, like Circuit Playground Express, into a keyboard and ultimately an awesome custom Arcade controller. Inputs to your game can be: - Buttons on the Circuit Playground Express - Capacitive touch (metal, fruit, etc.) - Any sort of switch, like arcade style buttons, big mashable buttons, etc. - Sensor readings on the Circuit Playground Express like light, sound, movement, etc. MakeCode Arcade supports 2 players on a keyboard using typical game key assignments. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/631/medium800/microcontrollers_key-assign.jpg?1571681997) ## The maker-controller extension Microsoft built a MakeCode extension that exposes custom blocks and functions to turn any hardware into a custom controller. It takes care of emitting the keystrokes with the correct order and timing so that it really looks like a real keyboard. The extension is hosted on GitHub at https://github.com/microsoft/pxt-maker-controller and we'll be showing how to use it the next pages. Get your microcontroller and plug it into your computer via a known good data + power USB cable. ### Circuit Playground Express To use the maker-controller extension with the Circuit Playground Express, * In your web browser, open https://makecode.adafruit.com/beta * Click on **New Project** * Click on **Extensions** under the gearwheel menu (upper right on the screen) * Type or copy https://github.com/microsoft/pxt-maker-controller into the search box. ### Maker (Feather Express, Metro Express, and other MakeCode Maker compatible boards) To use the maker-controller extension with the MakeCode Maker, * In your web browser, open https://maker.makecode.com/ * Click on **New Project** * Click on **Extensions** under the gearwheel menu (upper right on the screen) * Type or copy https://github.com/microsoft/pxt-maker-controller into the search box. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/637/medium800/microcontrollers_blocks.png?1571682937) ## Remember... it's a keyboard! Remember that when you'll plug your custom controller into your computer, it will start generating keystrokes regardless where the focus is. So make sure to leave any text editor before using it... You can unplug your board from USB to stop it from sending characters if need be. # Custom Controllers for MakeCode Arcade ## Button Presses You can use the **press player .. button ..** block to simulate button presses in the game. ## Button clicks For example, the snippet below reponds to button A/B on the CPX and converts them into A/B button keyboard keystrokes. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/638/medium800/microcontrollers_buttonsab.png?1571683684) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/668/medium800thumb/microcontrollers_m.jpg?1571692657) ## Buttons on Pins You can also detect clicks on pins by closing the circuit to the ground pins. For example, you can use alligator clips between the pins (a data pin and **GND**) and an Arcade button. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/677/medium800/microcontrollers_pin1A.png?1571695357) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/669/medium800thumb/microcontrollers_m.jpg?1571692982) ## Capactive touch Get your apples and bananas! It's totally possible to use capacitive touch to build controllers. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/678/medium800/microcontrollers_touch1a.png?1571695392) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/647/medium800thumb/microcontrollers_m.jpg?1571686113) ## Shake and other events Any event triggered by a sensor could be used to generate a keystroke. For example, shake can be used to make the bunny jump. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/681/medium800/microcontrollers_shaketojump.png?1571695833) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/679/medium800thumb/microcontrollers_m.jpg?1571695793) The light sensor is also a great sensor to build analog controllers. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/709/medium800/microcontrollers_lightbright.png?1571698937) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/707/medium800thumb/microcontrollers_m.jpg?1571698873) # Custom Controllers for MakeCode Arcade ## Ups and Downs Some games use the up and down state of the buttons, so it can be more efficient to send those events instead of simple presses. For example, the duration of the button press can determine the strength at which the golfer hits the ball! You can use **set player .. button .. to up/down** to set the button to up or down states. ## Buttons Buttons, on board or using pins, have a **up** and **down** event that can be used to control the arcade buttons more precisely. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/643/medium800/microcontrollers_updowns.png?1571685670) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/682/medium800thumb/microcontrollers_m.jpg?1571696355) ## Pin Buttons Close the circuit between **GND** and a pin to trigger down and up events. Real arcade buttons work great! ![](https://cdn-learn.adafruit.com/assets/assets/000/082/686/medium800/microcontrollers_arcadedownup.png?1571696626) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/685/medium800thumb/microcontrollers_m.jpg?1571696550) # Custom Controllers for MakeCode Arcade ## Analog DPAD Use the **set player .. analog .. to value** block to convert an analog sensor value, like an accelerometer reading, into button ups and downs. ## Left and right We use the **set player .. analog ... to ..** block to convert the horizontal acceleration data into DPAD left/right buttons. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/688/medium800/microcontrollers_ducksplayt.png?1571696685) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/692/medium800thumb/microcontrollers_m.jpg?1571696861) # Custom Controllers for MakeCode Arcade ## Reading Analog Values For analog readings mapped to values in-game, you can use the **set player .. analog ..** blocks to change a value. For example, if in-game, an analog reading controls an object, you can set what values you want in a **set player .. analog .. threshold** block. Then in game, the maximum and minimum values for an analog reading, like light level or potentiometer, map to the threshold values using a **set player .. analog .. to** block. In the example below, the game responds to levels from 0 to 150 for a balloon on screen. The analog **light level** sensor block gives readings from 0 to 255. The analog blocks do all the mapping for getting the input the game is looking for. ![](https://cdn-learn.adafruit.com/assets/assets/000/082/718/medium800/microcontrollers_lighta.png?1571699451) ![](https://cdn-learn.adafruit.com/assets/assets/000/082/719/medium800thumb/microcontrollers_m.jpg?1571699987) ## Featured Products ### Circuit Playground Express [Circuit Playground Express](https://www.adafruit.com/product/3333) **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to... In Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ### Adafruit Feather M0 Express [Adafruit Feather M0 Express](https://www.adafruit.com/product/3403) At the Feather M0's heart is an ATSAMD21G18 ARM Cortex M0+ processor, clocked at 48 MHz and at 3.3V logic, the same one used in the new [Arduino Zero](https://www.adafruit.com/products/2843). This chip has a whopping 256K of FLASH (8x more than the Atmega328 or 32u4) and... In Stock [Buy Now](https://www.adafruit.com/product/3403) [Related Guides to the Product](https://learn.adafruit.com/products/3403/guides) ### Adafruit Trinket M0 - for use with CircuitPython & Arduino IDE [Adafruit Trinket M0 - for use with CircuitPython & Arduino IDE](https://www.adafruit.com/product/3500) The Adafruit Trinket M0 may be small, but do not be fooled by its size! It's a tiny microcontroller board, built around the Atmel ATSAMD21, a little chip with _a lot_ of power. We wanted to design a microcontroller board that was small enough to fit into any project, and low... In Stock [Buy Now](https://www.adafruit.com/product/3500) [Related Guides to the Product](https://learn.adafruit.com/products/3500/guides) ### Pink and Purple Braided USB A to Micro B Cable - 2 meter long [Pink and Purple Braided USB A to Micro B Cable - 2 meter long](https://www.adafruit.com/product/4148) This cable is super-fashionable with a woven pink and purple Blinka-like pattern! First let's talk about the cover and over-molding. We got these in custom colors, and if you _have_ to have visible cables, then you might as well have the nicest fabric-bound... No Longer Stocked [Buy Now](https://www.adafruit.com/product/4148) [Related Guides to the Product](https://learn.adafruit.com/products/4148/guides) ### USB cable - USB A to Micro-B [USB cable - USB A to Micro-B](https://www.adafruit.com/product/592) This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller Approximately 3 feet / 1 meter long In Stock [Buy Now](https://www.adafruit.com/product/592) [Related Guides to the Product](https://learn.adafruit.com/products/592/guides) ### Arcade Button - 30mm Translucent Clear [Arcade Button - 30mm Translucent Clear](https://www.adafruit.com/product/471) A button is a button, and a switch is a switch, but these translucent arcade buttons are in a class of their own. They're the same size as common arcade controls (often referred to as 30mm diameter) but have some nice things going for them that justify the extra dollar. First,... In Stock [Buy Now](https://www.adafruit.com/product/471) [Related Guides to the Product](https://learn.adafruit.com/products/471/guides) ### Small Alligator Clip Test Lead (set of 12) [Small Alligator Clip Test Lead (set of 12)](https://www.adafruit.com/product/1008) Connect this to that without soldering using these handy mini alligator clip test leads. 15" cables with alligator clip on each end, color coded. You get 12 pieces in 6 colors. Strong and grippy, these always come in handy! We often use these in conjunction with a multimeter so we... Out of Stock [Buy Now](https://www.adafruit.com/product/1008) [Related Guides to the Product](https://learn.adafruit.com/products/1008/guides) ## Related Guides - [Adafruit Feather M0 Express](https://learn.adafruit.com/adafruit-feather-m0-express-designed-for-circuit-python-circuitpython.md) - [Adafruit Trinket M0](https://learn.adafruit.com/adafruit-trinket-m0-circuitpython-arduino.md) - [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md) - [Qu'est-ce que MakeCode?](https://learn.adafruit.com/makecode-fr.md) - [FruitBox Sequencer: Musically Delicious Step Pattern Generator ](https://learn.adafruit.com/circuitpython-fruitbox-sequencer-musically-delicious-step-pattern-generator.md) - [CircuitPython Hardware: PCA9685 PWM & Servo Driver](https://learn.adafruit.com/micropython-hardware-pca9685-pwm-and-servo-driver.md) - [Glowing Bottle Castle and Capacitive Touch Piano](https://learn.adafruit.com/glowing-bottle-castle-and-capacitive-touch-piano.md) - [Drone Claw](https://learn.adafruit.com/drone-claw.md) - [CircuitPython Basics: Digital Inputs & Outputs](https://learn.adafruit.com/circuitpython-digital-inputs-and-outputs.md) - [Circuit Playground Gizmo Ornaments](https://learn.adafruit.com/display-ornaments-with-circuit-playground.md) - [Esenciales para CircuitPython](https://learn.adafruit.com/esenciales-para-circuitpython.md) - [Game Clock with Circuit Playground & MakeCode](https://learn.adafruit.com/game-clock-with-circuit-playground-makecode.md) - [Personal UV HotSpot Parasol](https://learn.adafruit.com/personal-blacklight-uv-parasol.md) - [CircuitPython Hardware: Charlieplex LED Matrix](https://learn.adafruit.com/micropython-hardware-charlieplex-led-matrix.md) - [Installing Microsoft MakeCode for Adafruit](https://learn.adafruit.com/installing-makecode-for-adafruit.md) - [DIY Circuit Playground Shields](https://learn.adafruit.com/circuit-playground-shields.md) - [NeoPixel Manicure](https://learn.adafruit.com/neopixel-manicure.md) - [Secret Hollow Book Intrusion Detector](https://learn.adafruit.com/secret-hollow-book.md)