# MakeCode Arcade Pixel Art Sprites ## Overview ![](https://cdn-learn.adafruit.com/assets/assets/000/074/873/medium800/gaming_adabot2.png?1556122989) Let's learn how to make our own pixel art character sprites! Many classic and modern video games use two-dimensional pixel art, a.k.a. sprites, to represent characters. The limitations on size and color palette can unlock worlds of creativity! We'll cover the fundamentals of pixel art character sprites, as well as learn to make our own using MakeCode Arcade, and even upload our characters and move them around on the PyBadge! https://youtu.be/au5w1sLjsaU ![](https://cdn-learn.adafruit.com/assets/assets/000/074/977/medium800/gaming_components_hero.png?1556244620) [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. Info: ### Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino [Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino](https://www.adafruit.com/product/4242) What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the **Adafruit PyGamer!** We wanted to make an entry-level gaming handheld for DIY gaming, and maybe a little... Out of Stock [Buy Now](https://www.adafruit.com/product/4242) [Related Guides to the Product](https://learn.adafruit.com/products/4242/guides) ![Angled shot of Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino.](https://cdn-shop.adafruit.com/640x480/4242-00.jpg) ### Adafruit PyGamer Acrylic Enclosure Kit [Adafruit PyGamer Acrylic Enclosure Kit](https://www.adafruit.com/product/4238) You've got your PyGamer, and you're ready to start jammin' on your favorite arcade games. You gaze adoringly at the charming silkscreen designed by Ada-friend PaintYourDragon. The nostalgia is palpable! Cradling the PCB in your hands, you realize there's something... In Stock [Buy Now](https://www.adafruit.com/product/4238) [Related Guides to the Product](https://learn.adafruit.com/products/4238/guides) ![Enclosure pieces and black, plastic hardware for a DIY handheld game console.](https://cdn-shop.adafruit.com/640x480/4238-00.jpg) ### Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino [Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/4200) What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the **Adafruit PyBadge!** We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch rounded rectangle, to make an all-in-one dev board with... Out of Stock [Buy Now](https://www.adafruit.com/product/4200) [Related Guides to the Product](https://learn.adafruit.com/products/4200/guides) ![Angled shot of a Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino. ](https://cdn-shop.adafruit.com/640x480/4200-01.jpg) ### Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino [Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/3939) What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the  **Adafruit PyBadge LC!**  We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch... Out of Stock [Buy Now](https://www.adafruit.com/product/3939) [Related Guides to the Product](https://learn.adafruit.com/products/3939/guides) ![Angled Shot of Adafruit PyBadge - Low Cost. ](https://cdn-shop.adafruit.com/640x480/3939-05.jpg) ### Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh [Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh](https://www.adafruit.com/product/3898) Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of **400mAh** for a total of about 1.9 Wh. If you need a larger (or smaller!)... Out of Stock [Buy Now](https://www.adafruit.com/product/3898) [Related Guides to the Product](https://learn.adafruit.com/products/3898/guides) ![Slim Lithium Ion Polymer Battery 3.7v 400mAh with JST 2-PH connector and short cable](https://cdn-shop.adafruit.com/640x480/3898-05.jpg) # MakeCode Arcade Pixel Art Sprites ## Pixel Art Fundamentals ## Pixels What is pixel art? **Pixel** is a word for individual “picture elements” on a screen, such as your computer monitor or your handheld gaming device. They are essentially the smallest unique element of a display that is comprised of a single color (this is true of most all displays other than vector scopes). If you look really, really closely at your screen, you’ll see lots of individual pixels that make up the images you normally see when you step back and take it all in. Here's a closeup of a section of this very webpage so you can see the individual pixel that make up the guide's main graphic. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/874/medium800/gaming_screenPixels.jpg?1556124769) ## Pixel Art For our purposes, **pixel art** refers to a type of graphics made for use in games, where the individual pieces of art (sometimes referred to as **sprites** ) are small enough to be created by hand, one pixel at a time. This is as opposed to graphics made from pre-rendered or real-time 3D models, or graphics of sufficient complexity and size that it’s impractical to create the art at the individual pixel level. Here, we see pixel art from the game Celeste. The backgrounds and characters are artfully constructed pixel art. And incredibly appealing! ![](https://cdn-learn.adafruit.com/assets/assets/000/074/875/medium800/gaming_celeste.png?1556125519 Scene from the game Celeste) ## Software and Resources On the next page we'll use the pixel art editor that's built right into MakeCode Arcade. However, if you'd like to explore other pixel art software, here are some good ones to check out: - [**Piskel**](https://www.piskelapp.com/) is a free online editor for pixel art and animated sprites - [**Aseprite**](https://www.aseprite.org/) is a paid app ($15) that many professionals use -- there's also a free trial, and it's open source, so you can [build the full version for yourself](https://github.com/aseprite/aseprite) if you are inclined. - **[Pixilart](https://www.pixilart.com/)** is another very nice, free online editor These [pixel art tutorials by MiniBoss](https://blog.studiominiboss.com/pixelart) are excellent (they created the fantastic artwork for Celeste). In them, they cover both static and animated sprites (and a whole lot more!) ![](https://cdn-learn.adafruit.com/assets/assets/000/074/896/medium800/gaming_minibosstute.png?1556134771) For a deeper dive into creating graphics for the Nintendo Entertainment System (NES) [have a look here](https://megacatstudios.com/blogs/press/creating-nes-graphics). [This Game Development magazine article on creating retro styled games](https://gamedevelopment.tutsplus.com/articles/going-old-school-making-games-with-a-retro-aesthetic--gamedev-3567) has a great look at different retro art styles. ## Color Palette Pixel art also tends to imply the use of a limited color palette, such as 1-bit (monochrome), 4-bit (16 colors), or 8-bit (256 colors) graphics seen in game consoles of yesteryear. Modern games tend to use 16-bit (65,536 colors) or 24-bit (16,777,216 colors). Not to say that pixel art with limited color palettes aren’t thriving now! But these color restrictions are now often chosen for stylistic reasons, not technological ones when using the latest, most powerful computers and consoles. If we look closely at the Celeste character sprite from the scene above, we can see that she is made up of only twelve colors (including transparency as one "color"). ![gaming_celeste_pallet.png](https://cdn-learn.adafruit.com/assets/assets/000/074/876/medium640/gaming_celeste_pallet.png?1556309146) On handheld systems, such as the **PyBadge** and **PyGamer** , we can create pixel art that will look great on the small screens when compared to the relative busy-ness of higher color depth graphics. (More on aliasing in a bit.) Want to check out some excellent examples of pixel art palettes? [Have a look over here at LOSPEC](https://lospec.com/palette-list)! ## The Canvas When creating pixel art characters, one of the first decisions you'll make is the size of the image sprite you're going to make. Here's a typical canvas set up for a 16 pixel wide, by 16 pixel high image. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/869/medium800/gaming_canvas16x16_02.png?1556118105) Here's a similar canvas, except this time its set for a 32x32 pixel image. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/870/medium800/gaming_canvas32x32_01.png?1556118342) Each cell of the canvas can have a single pixel drawn into it, or no pixel at all. Cells with no pixel are treated as a transparent part of the image by the game engine. First, we have Mario from the NES Super Mario Bros. game He's made in a 16 x 16 pixel canvas and has a four color palette (one color being transparency). ![](https://cdn-learn.adafruit.com/assets/assets/000/074/899/medium800/gaming_nesMariotiny.png?1556139765) ![](https://cdn-learn.adafruit.com/assets/assets/000/074/898/medium800/gaming_newMarioFour02.png?1556139661) Next we have a 32x32 pixel Mario from SNES Super Mario World. He's now sporting a 16-color palette! ![](https://cdn-learn.adafruit.com/assets/assets/000/074/868/medium800/gaming_marioSNES_actual.png?1556118045) ![](https://cdn-learn.adafruit.com/assets/assets/000/074/864/medium800/gaming_snesMario.png?1556117577) Finally, here's a 32x32 pixel sprite from New Super Mario Bros. for Nintendo DS. The sprite looks like it was not hand made, pixel by pixel, so much as rendered from a 3D model, since the shading is so complex. The color palette is virtually unrestricted, as evidenced by the huge number of different shades of blue, red, Mario's skin-tone, and more. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/866/medium800/gaming_newMario.png?1556117597) ![](https://cdn-learn.adafruit.com/assets/assets/000/074/865/medium800/gaming_newMario_32_grid.png?1556117591) ## Sprite Sheets If you'd like to look at examples of pixel art from existing games, search online for "sprite sheets". For example, "Mario sprite sheets" turns up images such as these, which are pulled directly from the in-game resources: ![gaming_nesMarioSheet.png](https://cdn-learn.adafruit.com/assets/assets/000/074/995/medium640/gaming_nesMarioSheet.png?1556309079) ![gaming_marioSNESSheet.png](https://cdn-learn.adafruit.com/assets/assets/000/074/996/medium640/gaming_marioSNESSheet.png?1556309093) ## Drawing Sprites In this example, we see a palette of 16 colors (the first one isn’t a color, it allows you to make a transparent pixel) and then we have a grid of 16 x 16 pixels for the art. You can pick a color and then use the pencil tool, for example, to click and place pixels where you like. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/882/medium800/gaming_wumby2.png?1556131063) Here's a very nice example from the [MiniBoss Studio tutorials](https://blog.studiominiboss.com/pixelart). In this sprite art progression for a shovel, note how the limited color palette is still enough to - first, create the basic form of the object - then, "shade" it (add dimension) using additional colors - finally, to round off the appearance of the corners using anti-aliasing techniques ![](https://cdn-learn.adafruit.com/assets/assets/000/074/886/medium800/gaming_Screen_Shot_2019-04-24_at_11.46.09_AM.png?1556131619) ## Anti-Aliasing **Aliasing** is the name given to the rough, stair-stepping effect that's seen when pixels are used to create curved or diagonal lines. While we can't change the basic problem of square (or rectangular on some screens) pixels being used to represent curved or diagonal shapes, we can lessen the effect by using a technique known as **anti-aliasing**. Typically, anti-aliasing is achieved by adding medium contrast pixels at the problem areas. In other words, an aliased black line on a white background can be anti-aliased by the addition of grey pixels to help fool the eye. In this example, we start with two colors, black and white. To fix the aliasing, we add pixels in four shades of gray. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/888/medium800/gaming_antialiasing02.png?1556133018) This can look a bit strange and fuzzy up close, but look at these same images at actual scale to see how effective the anti-aliasing is at removing the "jaggies". ![](https://cdn-learn.adafruit.com/assets/assets/000/074/994/medium800/gaming_aa_scale3.png?1556308778) # MakeCode Arcade Pixel Art Sprites ## Create Sprites in MakeCode Arcade ![](https://cdn-learn.adafruit.com/assets/assets/000/074/852/medium800/gaming_ruby_mca_bline_dither_03.png?1556057649) Now that we understand the fundamentals of pixel art, let's make our own character sprites inside of MakeCode Arcade! Now that we understand the fundamentals of pixel art, let's make our own character sprites inside of MakeCode Arcade! ![gaming_ruby_mca_bling_dither_03_ingame.png](https://cdn-learn.adafruit.com/assets/assets/000/074/853/medium640/gaming_ruby_mca_bling_dither_03_ingame.png?1556308827) ## MakeCode Arcade First, open a new Chrome browser window (Chrome works best) and go to [MakeCode Arcade](https://arcade.makecode.com). Next, click on the **New Project** button. ![gaming_mcapix01.png](https://cdn-learn.adafruit.com/assets/assets/000/074/900/medium640/gaming_mcapix01.png?1556308895) This will take you to the MakeCode Arcade Editor. ![gaming_mcapix02.png](https://cdn-learn.adafruit.com/assets/assets/000/074/901/medium640/gaming_mcapix02.png?1556308858) ## mySprite Let's create a character sprite. In the Sprites category, click on the **set mySprite to sprite of kind Player** block and drag it onto the canvas. ![gaming_mcapix03.png](https://cdn-learn.adafruit.com/assets/assets/000/074/902/medium640/gaming_mcapix03.png?1556308923) ![](https://cdn-learn.adafruit.com/assets/assets/000/074/903/medium800/gaming_mcapix04.png?1556140784) ## Sprite Editor This creates a sprite object that you'll be able to control in the game. But how do you actually make the pixel art for it? Click on the gray box to the right of the word **sprite** in the block you just added and MakeCode Arcade will launch the built in **sprite editor**! ![](https://cdn-learn.adafruit.com/assets/assets/000/074/904/medium800/gaming_mcapix05.png?1556140899) The default canvas size for your sprite is 16x16 pixels, as shown on the bottom of the sprite editor. You can click that number to cycle between a few presets. If you do, keep clicking until you get back to the 16x16 setting. Next, let's have a tour of the editor. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/905/medium800/gaming_EditorTour.jpg?1556142128) These are the tools and interface elements of the sprite editor: - **Canvas** is where you draw your sprite - **Editor** and **Gallery** buttons allow you to switch between editing sprites and selecting from a set of pre-made sprites - **Pencil tip sizes** allow you to switch between 1x1, 3x3, and 5x5 pixel tip sizes. These also apply to the **eraser** , and **square/circle** tools - **Pencil** **tool** is used for drawing pixels in the canvas with the currently selected color. Just click or click-drag to use! It has an alternate behavior if you press the **L** on your keyboard -- it turns into a straight **line tool** - **Eraser** is used to remove pixels from the canvas - **Bucket fill** tool will flood fill an area with a color. The boundary of the fill is defined by the color of the pixel under the tool when the mouse button is released - **Square tool** creates a rectangle defined by the click-drag-release points of the mouse cursor. The stroke width of the shape is determined by the pencil tip sizes. Press the **C** key on your keyboard to create a circle instead. Note: circles work best on larger canvas sizes - **Current color** indicates the color you've got picked - **Color palette swatches** are the colors you can use in your sprite. Click one to make it current. Note: choosing the transparent color allows you to erase pixels with the **pencil/line, bucket** , and **square/circle** tools - **Canvas dimensions** determines how many pixels you'll be able to use for your sprite. Click this button to cycle between presets - **Undo/redo** allow you to go back in time and fix mistakes! Or, change your mind and go back to the future!! - **Done** press this button when you're finished and are ready to go back to the main MakeCode Arcade program ![](https://cdn-learn.adafruit.com/assets/assets/000/074/907/medium800/gaming_ruby_MCA_sixteen.png?1556143143) Try out the sprite editor now and create your own version of Ruby the red LED. This sprite was created using the pencil tool and four colors. You can try out other tools, such as the paint bucket to flood fill Ruby to a different color! Or maybe the line tool to add some stylish stripes. When finished, press **Done**. MakeCode Arcade will load your player sprite into the simulator. ![gaming_rubysim01.png](https://cdn-learn.adafruit.com/assets/assets/000/074/908/medium640/gaming_rubysim01.png?1556308966) ## Bigger Ruby This is looking a bit small for our character -- let's return to the sprite editor and make a 32x32 pixel version instead! ![](https://cdn-learn.adafruit.com/assets/assets/000/074/909/medium800/gaming_ruby32.png?1556143580) In this version, not only is Ruby larger, but I've used some extra colors to add a bit of dimension and bling. The checkerboard technique is a type of **dithering** used to add a type of color mix that isn't possible with such a limited color palette. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/910/medium800/gaming_rubysim2.png?1556143699) ## Controls That's looking better! Next, let's add some controls so we can move Ruby around the screen. In the Controller category, pick the **move mySprite with buttons** block and add it to the **on start** loop. ![gaming_controlruby.png](https://cdn-learn.adafruit.com/assets/assets/000/074/911/medium640/gaming_controlruby.png?1556309013) Now, you can use the d-pad buttons on the simulator (or the arrow keys on your keyboard) to move Ruby around! ![](https://cdn-learn.adafruit.com/assets/assets/000/074/912/medium800/gaming_moveruby.png?1556143874) # MakeCode Arcade Pixel Art Sprites ## Update the PyBadge/PyGamer Bootloader You are at the bleeding edge of handheld, open source, game playing hardware and software, what with your PyBadge/PyBadge LC or PyGamer! Congratulations! It's fun and exciting! It is also changing and improving all the time, so please update your bootloaders before proceeding to put your MakeCode Arcade games on the board!! Info: ## PyBadge/PyBadge LC Bootloader If you have a **PyBadge** or **PyBadge LC** , [please go to this page for instructions on updating the bootloader.](https://learn.adafruit.com/adafruit-pybadge/updating-the-bootloader) ![gaming_pyb.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/276/medium640/gaming_pyb.jpg?1559330072) ## PyGamer Bootloader If you have a **PyGamer** , [please go to this page for instructions on updating the bootloader.](https://learn.adafruit.com/adafruit-pygamer/updating-the-bootloader) ![gaming_pyg.jpg](https://cdn-learn.adafruit.com/assets/assets/000/076/277/medium640/gaming_pyg.jpg?1559330110) Danger: ## Hardware Checks If, after updating your board's bootloader, you still think you may have a hardware problem, here's a great way to test out all of the functions. From buttons, to the light sensor, thumbstick (PyGamer only), accelerometer (PyGamer and PyBadge only, not the LC), and more, we've got a super nifty set of hardware test .UF2 files you can use. Click on the link for your board below for more info and a link to the appropriate UF2 file. [PyBadge/PyBadge LC Hardware Check](https://learn.adafruit.com/adafruit-pybadge/arduino-test) [PyGamer Hardware Check](https://learn.adafruit.com/adafruit-pygamer/arduino-test) Another way to do a hardware check is with the handy, dandy MakeCode Arcade Basic Hardware Test. This was created with MakeCode Arcade and you can use it to check that your d-pad buttons or thumb joystick can move the yellow face around the screen, and that the A and B buttons work to play a sound (just make sure you have a speaker plugged in to the PyGamer first). You can [open this link](https://makecode.com/_icwXcg4PWRYW) to get to it, or download the UF2 file below and drag it onto your board's USB drive in bootloader mode. [arcade-Basic-Hardware-Test.UF2](https://cdn-learn.adafruit.com/assets/assets/000/076/316/original/arcade-Basic-Hardware-Test-PyBadge_and_PyGamer.uf2?1559345409) ![](https://cdn-learn.adafruit.com/assets/assets/000/076/317/medium800/gaming_hwtest.png?1559345457) # MakeCode Arcade Pixel Art Sprites ## Load a MakeCode Game on PyGamer/PyBadge Let's load a game! For example, here's a link to **Run, Blinka, Run! ** To open the game in the MakeCode Arcade editor, first, click the share link below. This will allow you to play the game in the browser right away. [Makecode Arcade Game: Run, Blinka, Run!](https://makecode.com/_Y90aTaiHfh41) Then, click on the Show Code button in the upper left corner. The shows the code for the game, and by clicking the Edit button in the upper right corner, it'll open into the editor where you can upload it to your PyGamer/PyBadge. Once you have a game working on the MakeCode Arcade web editor, it's time to download it and flash it onto your board. ![adafruit_products_Run_Blinka_Run__-_Microsoft_MakeCode_2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/078/777/medium640/adafruit_products_Run_Blinka_Run__-_Microsoft_MakeCode_2.jpg?1564457638) ![adafruit_products_Run_Blinka_Run__-_Microsoft_MakeCode_3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/078/778/medium640/adafruit_products_Run_Blinka_Run__-_Microsoft_MakeCode_3.jpg?1564457679) Primary: ## Board Definition In order to load a game made in MakeCode Arcade onto the PyBadge, first choose the proper board definition inside of MakeCode. Click the ellipsis (...) next to DOWNLOAD and then the **Choose Hardware** item. ![adafruit_products_MakeCode_choose_hardware.jpg](https://cdn-learn.adafruit.com/assets/assets/000/108/981/medium640/adafruit_products_MakeCode_choose_hardware.jpg?1644859647) ## Change Board screen Click on the image of your board, either the PyBadge/PyBadge LC or the PyGamer ![adafruit_products_MakeCode_Arcade.jpg](https://cdn-learn.adafruit.com/assets/assets/000/078/781/medium640/adafruit_products_MakeCode_Arcade.jpg?1564458209) This will cause the game .uf2 file for your particular board to be saved to your hard drive. You only need to do this the first time you use a new board. Thereafter you can simply click the **Download** button on the MakeCode Arcade editor page. ![](https://cdn-learn.adafruit.com/assets/assets/000/074/943/medium800/gaming_downloaded.png?1556169879) Danger: ## Bootloader Mode Now, we'll put the board into bootloader mode so we can drag on the saved .uf2 file. On the back side of the board you'll see a reset button at the top. Make sure the board is plugged into your computer via USB with a USB micro B to A data cable. Also, be sure the board is turned on.   Then, press the reset button. This will initiate bootloader mode.   When the board is in bootloader mode you'll see a screen similar to this one show up. ![gaming_IMG_5427.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/945/medium640/gaming_IMG_5427.jpg?1556170490) ![gaming_IMG_5428.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/991/medium640/gaming_IMG_5428.jpg?1556308393) ![gaming_IMG_5429.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/992/medium640/gaming_IMG_5429.jpg?1556308428) ## Drag and Drop Now that the board is in bootloader mode, you should see a **BADGEBOOT** drive show up on your computer as a USB flash drive. Simply drag the arcade game .uf2 file onto the drive. ![gaming_dragtoPyBadge.jpg](https://cdn-learn.adafruit.com/assets/assets/000/074/944/medium640/gaming_dragtoPyBadge.jpg?1556308458) ## Play! That's all there is to it! Once the file is copied over the board will restart and launch the game! ![](https://cdn-learn.adafruit.com/assets/assets/000/074/948/medium800/gaming_IMG_5430.jpg?1556170587) https://youtu.be/au5w1sLjsaU Keep an eye on Adafruit.com for additional game related content. # MakeCode Arcade Pixel Art Sprites ## Troubleshooting MakeCode Arcade If you run into trouble with MakeCode Arcade, here are some resources for getting help: - [Microsoft MakeCode Arcade Forum](https://forum.makecode.com/c/Share-your-Arcade-projects-here) - [Adafruit MakeCode Forum](https://forums.adafruit.com/viewforum.php?f=64) - [Microsoft MakeCode Arcade Discord](https://aka.ms/makecodecommunity) -- look for the #arcade channel - [Adafruit MakeCode Discord](https://adafru.it/discord) -- look for the #makecode channel Primary: # MakeCode Arcade Pixel Art Sprites ## Update the PyBadge Bootloader Info: Your PyBadge may need its bootloader updated for several reasons. Bootloaders earlier than **v3.9.0** do not protect against a rare problem in which part of internal flash is erased on startup. **Starting with MacOS 10.14.4** , Apple changed how USB devices are recognized on certain Macs. This caused a timing problem with boards that were loaded with a MakeCode program, preventing the `PYBADGEBOOT` drive from appearing. Also the A and B buttons will be reversed in MakeCode if your bootloader is too old. Danger: ## Updating Your PyBadge Bootloader To see if you need to update your bootloader, get the UF2 boot drive to appear on your board. If you're running MakeCode, click the reset button once. If you're running CircuitPython or an Arduino program, double-click the reset button. If the boot drive is named `ARCADE-D51` or `BADGEBOOT`, you definitely need to upgrade. If you see `PYBADGEBOOT`, click the`PYBADGEBOOT` drive in the Finder and then double-click the `INFO_UF2.TXT` file to see what's inside. (The screenshots below are for `PYGAMERBOOT`, but `PYBADGEBOOT` will be similar.) ![](https://cdn-learn.adafruit.com/assets/assets/000/090/345/medium800/adafruit_products_pygamerboot.png?1586904670) The bootloader version is listed in `INFO_UF2.TXT`. In this example, the version is **V3.6.0**. ![](https://cdn-learn.adafruit.com/assets/assets/000/090/346/medium800/adafruit_products_pygamer-info_uf2.png?1586904730) **If the bootloader version you see is older than _v3.9.0_,** you need to update. For instance, the bootloader above needs to be upgraded. Download the latest version of the PyBadge bootloader updater on the circuitpython.org download page for the board: [Latest PyBadge and PyBadge LC downloads](https://circuitpython.org/board/pybadge/) The bootloader updater will be named `update-bootloader-arcade_pybadge-vN.N.N.uf2` with whatever version. Drag that file from your `Downloads` folder onto the bootloader drive: `ARCADE-D5`, `BADGEBOOT`, or `PYBADGEBOOT`. ![](https://cdn-learn.adafruit.com/assets/assets/000/090/348/medium800/adafruit_products_pygamer-update_4.54.18_PM.png?1586904788) After you drag the updater onto the boot drive, the red LED on the board will flicker as the bootloader is updated. The NeoPixels will flash and turn green again. A few seconds later, `PYBADGEBOOT` will appear in the Finder. After that, you can click on`PYBADGEBOOT` and double-click `INFO_UF2.TXT` again to confirm you've updated the bootloader. ![](https://cdn-learn.adafruit.com/assets/assets/000/090/349/medium800/adafruit_products_pyportal-info_uf2-updated.png?1586904808) Info: [Latest CircuitPython for PyBadge and PyBadge LC](https://circuitpython.org/board/pybadge) ## Oh no, I updated MacOS already and I can't see the boot drive! If your Mac has already been updated to MacOS 10.14.4 and now you can't see a boot drivein the Finder, you need to find another computer that will work. Not all upgraded Macs will fail to show the boot drive: older ones can work. Or find a Mac that hasn't been upgraded yet. Any Windows 10 or Linux computer should work for upgrading your bootloader. Windows 7 computers [will need drivers installed](https://learn.adafruit.com/adafruit-circuit-playground-express/adafruit2-windows-driver-installation), but then can work. ## Featured Products ### Adafruit PyGamer Starter Kit [Adafruit PyGamer Starter Kit](https://www.adafruit.com/product/4277) **Please note: you may get a royal blue _or_ purple case with your starter kit (they're both lovely colors)** What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right,... Out of Stock [Buy Now](https://www.adafruit.com/product/4277) [Related Guides to the Product](https://learn.adafruit.com/products/4277/guides) ### Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino [Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/4200) What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the **Adafruit PyBadge!** We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch rounded rectangle, to make an all-in-one dev board with... Out of Stock [Buy Now](https://www.adafruit.com/product/4200) [Related Guides to the Product](https://learn.adafruit.com/products/4200/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) ### Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh [Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh](https://www.adafruit.com/product/3898) Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of **400mAh** for a total of about 1.9 Wh. If you need a larger (or smaller!)... Out of Stock [Buy Now](https://www.adafruit.com/product/3898) [Related Guides to the Product](https://learn.adafruit.com/products/3898/guides) ## Related Guides - [Adafruit PyBadge and PyBadge LC](https://learn.adafruit.com/adafruit-pybadge.md) - [Game & Watch Octopus](https://learn.adafruit.com/game-watch-octopus.md) - [MLX90640 Thermal Camera with Image Recording](https://learn.adafruit.com/mlx90640-thermal-image-recording.md) - [Submitting Games to MakeCode Arcade Front Page](https://learn.adafruit.com/submitting-games-to-makecode-arcade-front-page.md) - [Introducing Adafruit PyGamer](https://learn.adafruit.com/adafruit-pygamer.md) - [Wakanda Forever Game](https://learn.adafruit.com/wakanda-forever-game.md) - [Playing Arduboy Games on Arcada](https://learn.adafruit.com/playing-arduboy-games-on-arcada.md) - [Trash Panda: The Game](https://learn.adafruit.com/trash-panda-the-game.md) - [PyGamer MP3 Player with CircuitPython](https://learn.adafruit.com/pygamer-mp3-player-with-circuitpython.md) - [Trash Panda 2: Garbage Day](https://learn.adafruit.com/trash-panda-2-dumpster-dive.md) - [Bounce - an accelerometer game in Arduino for PyGamer and PyBadge](https://learn.adafruit.com/bounce-an-accelerometer-game-in-arduino-for-pygamer-and-pybadge.md) - [CircuitPython Turtle Graphics](https://learn.adafruit.com/circuitpython-turtle-graphics.md) - [PixelDust Digital Sand Demos for Arcada](https://learn.adafruit.com/pixeldust-digital-sand-demos-for-arcada.md) - [Creating Your First Tilemap Game with CircuitPython](https://learn.adafruit.com/creating-your-first-tilemap-game-with-circuitpython.md) - [Arcada Animated GIF Display](https://learn.adafruit.com/pyportal-animated-gif-display.md) - [Two Player Game System for PyGamer and RFM69HCW Radio Wing](https://learn.adafruit.com/two-player-game-system-for-pygamer-and-rfm69hcw-radio-wing.md)